暮らしのハンドノート

2018年5月21日2018年5月22日

WP【Twenty Seventeen】初心者でも簡単にできる!タイトル見出しサンプル集22選

WordPress【Twenty Seventeen】初心者の方向けに通常の見出し&テキストの長さに合わせて自動で可変するサンプルを作ってみました。

HTML,CSS初心者の方は🔰マークのところを読んでくださいね。

その他の方は🔰マークのところはスルーしたください。

🔰 ビジュアルモードの場合

見出しにしたいテキスト内にカーソルを合わせて以下のように投稿画面の段落から見出しを選択するだけ!!

🔰 テキストモードの場合

以下のようにタイトルにしたいテキストを<h2>～</h2>などで囲みます。

🔰 CSSをコピペする時の注意事項

以下に記載のCSSは全て見出しの部分はh2で記述しています。
1 .entry content {h2　から始まるcssは、h2 をご自身が使用したい h1~h6 に置き換えて使用してください。
2 .midashi で始まるcssにはhtmlも記述していますので参考にしてください。
3 fontサイズは、現在18px~20pxで指定していますのでご自分のサイトのレイアウトに応じて指定し直してください。

↓CSSにLet’s go!↓

シンプルなボーダーライン

ごくごくシンプルなラインですが、どんなサイトでも合いそうですね

見出し1のSampleです

コードを表示

.entry-content h2{
    padding: 0 0 0 15px;
    margin: 0;
    font-weight: bold ;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-bottom: solid 3px #205a97;
}

.entry-content h2{

padding: 0 0 0 15px;

margin: 0;

font-weight: bold ;

font-size: 20px;

color: #555;

background: #FFF;

border-bottom: solid 3px #205a97;

}

↓h2タグを使用しない場合↓

<p class="midashi1">ここにテキストを入力</p>

1	<p class="midashi1">ここにテキストを入力</p>

.midashi1 {
    padding: 0 0 0 15px;
    margin: 0;
    font-weight: bold ;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-bottom: solid 3px #205a97;
}

.midashi1 {

padding: 0 0 0 15px;

margin: 0;

font-weight: bold ;

font-size: 20px;

color: #555;

background: #FFF;

border-bottom: solid 3px #205a97;

}

見出し2のSampleです

コードを表示

.entry-content h2{
    padding: 10px;
    margin: 0;
    font-weight: bold ;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 4px #205a97;
    border-bottom: solid 2px #205a97;
}

.entry-content h2{

padding: 10px;

margin: 0;

font-weight: bold ;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 4px #205a97;

border-bottom: solid 2px #205a97;

}

↓h2タグを使用しない場合↓

<p class="midashi2">ここにテキストを入力</p>

1	<p class="midashi2">ここにテキストを入力</p>

.midashi2 {
    padding: 10px;
    margin: 0;
    font-weight: bold ;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 4px #205a97;
    border-bottom: solid 2px #205a97;
}

.midashi2 {

padding: 10px;

margin: 0;

font-weight: bold ;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 4px #205a97;

border-bottom: solid 2px #205a97;

}

見出し3のSampleです

コードを表示

.entry-content h2{
   padding: 0.5em 1em;
   margin: 2.0em 0;
   font-weight: bold;
   font-size: 20px;
   color: #555;
   background: #FFF;
   border-left: solid 5px #205a97;
}

.entry-content h2{

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #205a97;

}

↓h2タグを使用しない場合↓

<p class="midashi3">ここにテキストを入力</p>

1	<p class="midashi3">ここにテキストを入力</p>

.midashi3 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #205a97;
}

.midashi3 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #205a97;

}

立体感のあるシンプルでカラフルなライン

縦ラインにはgoogleで使われている色も入れて下には影を入れて立体感を出してみました。

見出し4のSampleです

コードを表示

.entry-content h2 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #205a97;
    box-shadow: 1px 1px 2px gray;
}

.entry-content h2 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #205a97;

box-shadow: 1px 1px 2px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi4">ここにテキストを入力</p>

1	<p class="midashi4">ここにテキストを入力</p>

.midashi4 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #205a97;
    box-shadow: 1px 1px 2px gray;
}

.midashi4 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #205a97;

box-shadow: 1px 1px 2px gray;

}

見出し5のSampleです

コードを表示

.entry-content h2 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #34a853;
    box-shadow: 1px 1px 2px gray;
}

.entry-content h2 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #34a853;

box-shadow: 1px 1px 2px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi5">ここにテキストを入力</p>

1	<p class="midashi5">ここにテキストを入力</p>

.midashi5 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #34a853;
    boxshadow: 1px 1px 2px gray;
}

.midashi5 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #34a853;

boxshadow: 1px 1px 2px gray;

}

見出し6のSampleです

コードを表示

.entry-content h2 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #fbbc05;
    box-shadow: 1px 1px 2px gray;
}

.entry-content h2 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #fbbc05;

box-shadow: 1px 1px 2px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi6">ここにテキストを入力</p>

1	<p class="midashi6">ここにテキストを入力</p>

.midashi6 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #fbbc05;
    box-shadow: 1px 1px 2px gray;
}

.midashi6 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #fbbc05;

box-shadow: 1px 1px 2px gray;

}

見出し7のSampleです

コードを表示

.entry-content h2 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #ea4335;
    box-shadow: 1px 1px 2px gray;
}

.entry-content h2 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #ea4335;

box-shadow: 1px 1px 2px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi7">ここにテキストを入力</p>

1	<p class="midashi7">ここにテキストを入力</p>

.midashi7 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 5px #ea4335;
    box-shadow: 1px 1px 2px gray;
}

.midashi7 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 5px #ea4335;

box-shadow: 1px 1px 2px gray;

}

パステルカラーの可愛らしいライン

パステルカラーで上下にラインを入れて少し可愛らしく仕上げてみました。

見出し8のSampleです

コードを表示

.entry-content h2 { 
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-top: solid 2px #ff8181;
    border-bottom: solid 4px #ff8181;
    box-shadow: 1px 1px 2px gray;
}

.entry-content h2 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-top: solid 2px #ff8181;

border-bottom: solid 4px #ff8181;

box-shadow: 1px 1px 2px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi8">ここにテキストを入力</p>

1	<p class="midashi8">ここにテキストを入力</p>

.midashi8 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-top: solid 2px #ff8181;
    border-bottom: solid 4px #ff8181;
    box-shadow: 1px 1px 2px gray;
}

.midashi8 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-top: solid 2px #ff8181;

border-bottom: solid 4px #ff8181;

box-shadow: 1px 1px 2px gray;

}

見出し9のSampleです

コードを表示

.entry-content h2 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-top: solid 2px #ffdfa1;
    border-bottom: solid 4px #ffdfa1;
    box-shadow: 1px 1px 2px gray;
}

.entry-content h2 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-top: solid 2px #ffdfa1;

border-bottom: solid 4px #ffdfa1;

box-shadow: 1px 1px 2px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi9">ここにテキストを入力</p>

1	<p class="midashi9">ここにテキストを入力</p>

.midashi9 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-top: solid 2px #ffdfa1;
    border-bottom: solid 4px #ffdfa1;
    box-shadow: 1px 1px 2px gray;
}

.midashi9 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-top: solid 2px #ffdfa1;

border-bottom: solid 4px #ffdfa1;

box-shadow: 1px 1px 2px gray;

}

見出し10のSampleです

コードを表示

.entry-content h2 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-top: solid 2px #6091d3;
    border-bottom: solid 4px #6091d3;
    box-shadow: 1px 1px 2px gray;
}

.entry-content h2 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-top: solid 2px #6091d3;

border-bottom: solid 4px #6091d3;

box-shadow: 1px 1px 2px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi10">ここにテキストを入力</p>

1	<p class="midashi10">ここにテキストを入力</p>

.midashi10 {
    padding: 0.5em 1em;
    margin: 2.0em 0;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-top: solid 2px #6091d3;
    border-bottom: solid 4px #6091d3;
    box-shadow: 1px 1px 2px gray;
}

.midashi10 {

padding: 0.5em 1em;

margin: 2.0em 0;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-top: solid 2px #6091d3;

border-bottom: solid 4px #6091d3;

box-shadow: 1px 1px 2px gray;

}

テキストの長さに合ってラインが可変するサンプルあり

◯でアクセントを付けてみました

パステル系の◯に濃いアンダーラインを引いてみまた。これは、中見出しくらいがいいでしょう!

見出し11と見出し12はテキストの長さに合わせてラインが可変します。

見出し11のSampleです

コードを表示

.entry-content h2 {
    display: inline-block;
    position: relative;
    padding: 0.5em 0.5em 0 2.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-bottom: solid 2px #205a97;
}
h2:before{
    content: "";
    position: absolute;
    background: #ff8181;
    width: 25px;
    height: 25px;
    left: 3px;
    bottom: 5px;
    border-radius: 50%;
}

.entry-content h2 {

display: inline-block;

position: relative;

padding: 0.5em 0.5em 0 2.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-bottom: solid 2px #205a97;

}

h2:before{

content: "";

position: absolute;

background: #ff8181;

width: 25px;

height: 25px;

left: 3px;

bottom: 5px;

border-radius: 50%;

}

↓h2タグを使用しない場合↓

<p class="midashi11">ここにタイトルを入れる</p>

1	<p class="midashi11">ここにタイトルを入れる</p>

.midashi11 {
    display: inline-block;
    position: relative;
    padding: 0.5em 0.5em 0 2.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-bottom: solid 2px #205a97;
}
.midashi11:before{
    content: "";
    position: absolute;
    background: #ff8181;
    width: 25px;
    height: 25px;
    left: 3px;
    bottom: 5px;
    border-radius: 50%;
}

.midashi11 {

display: inline-block;

position: relative;

padding: 0.5em 0.5em 0 2.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-bottom: solid 2px #205a97;

}

.midashi11:before{

content: "";

position: absolute;

background: #ff8181;

width: 25px;

height: 25px;

left: 3px;

bottom: 5px;

border-radius: 50%;

}

見出し12のSampleです

コードを表示

.entry-content h2 {
    display: inline-block;
    position: relative;
    padding: 0.5em 0.5em 0 2.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-bottom: solid 2px #205a97;
    max-width:100%;
}
h2:before{
    content: "";
    position: absolute;
    background: #ffdfa1;
    width: 25px;
    height: 25px;
    left: 3px;
    bottom: 5px;
    border-radius: 50%;
}

.entry-content h2 {

display: inline-block;

position: relative;

padding: 0.5em 0.5em 0 2.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-bottom: solid 2px #205a97;

max-width:100%;

}

h2:before{

content: "";

position: absolute;

background: #ffdfa1;

width: 25px;

height: 25px;

left: 3px;

bottom: 5px;

border-radius: 50%;

}

↓h2タグを使用しない場合↓

<p class="midashi12">ここにタイトルを入れる</p>

1	<p class="midashi12">ここにタイトルを入れる</p>

.midashi12 {
    display: inline-block;
    position: relative;
    padding: 0.5em 0.5em 0 2.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-bottom: solid 2px #205a97;
}
.midashi12:before{
    content: "";
    position: absolute;
    background: #ffdfa1;
    width: 25px;
    height: 25px;
    left: 3px;
    bottom: 5px;
    border-radius:
}

.midashi12 {

display: inline-block;

position: relative;

padding: 0.5em 0.5em 0 2.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-bottom: solid 2px #205a97;

}

.midashi12:before{

content: "";

position: absolute;

background: #ffdfa1;

width: 25px;

height: 25px;

left: 3px;

bottom: 5px;

border-radius:

}

見出し13のSampleです

コードを表示

.entry-content h2 {
    display: inline-block;
    position: relative;
    padding: 0.5em 0.5em 0 2.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-bottom: solid 2px #205a97;
    width:100%;
}
h2:before{
    content: "";
    position: absolute;
    background: #6091d3;
    width: 25px;
    height: 25px;
    left: 3px;
    bottom: 5px;
    border-radius: 50%;
}

.entry-content h2 {

display: inline-block;

position: relative;

padding: 0.5em 0.5em 0 2.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-bottom: solid 2px #205a97;

width:100%;

}

h2:before{

content: "";

position: absolute;

background: #6091d3;

width: 25px;

height: 25px;

left: 3px;

bottom: 5px;

border-radius: 50%;

}

↓h2タグを使用しない場合↓

<p class="midashi13">ここにタイトルを入れる</p>

1	<p class="midashi13">ここにタイトルを入れる</p>

.midashi13 {
    display: inline-block;
    position: relative;
    padding: 0.5em 0.5em 0 2.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-bottom: solid 2px #205a97;
    width:100%;
}
.midashi13:before{
    content: "";
    position: absolute;
    background: #6091d3;
    width: 25px;
    height: 25px;
    left: 3px;
    bottom: 5px;
    border-radius: 50%;
}

.midashi13 {

display: inline-block;

position: relative;

padding: 0.5em 0.5em 0 2.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-bottom: solid 2px #205a97;

width:100%;

}

.midashi13:before{

content: "";

position: absolute;

background: #6091d3;

width: 25px;

height: 25px;

left: 3px;

bottom: 5px;

border-radius: 50%;

}

可愛らしいパステルカラーと濃いアンダーラインでシンプルに

見出し14と見出し15はテキストの長さに合わせてラインが可変します。

見出し14のSampleです

コードを表示

.entry-content h2 {
    display: inline-block;
    position: relative;
    padding: 0.5em 1.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 8px #ff8181;
    border-bottom: solid 2px #205a97;
}

.entry-content h2 {

display: inline-block;

position: relative;

padding: 0.5em 1.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 8px #ff8181;

border-bottom: solid 2px #205a97;

}

↓h2タグを使用しない場合↓

<p class="midashi14">ここにテキストを入力</p>

1	<p class="midashi14">ここにテキストを入力</p>

.midashi14 {
    display: inline-block;
    position: relative;
    padding: 0.5em 1.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 8px #ff8181;
    border-bottom: solid 2px #205a97;
}

.midashi14 {

display: inline-block;

position: relative;

padding: 0.5em 1.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 8px #ff8181;

border-bottom: solid 2px #205a97;

}

見出し15のSampleです

コードを表示

.entry-content h2 {
    display: inline-block;
    position: relative;
    padding: 0.5em 1.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 8px #ffdfa1;
    border-bottom: solid 2px #205a97;
}

.entry-content h2 {

display: inline-block;

position: relative;

padding: 0.5em 1.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 8px #ffdfa1;

border-bottom: solid 2px #205a97;

}

↓h2タグを使用しない場合↓

<p class="midashi15">ここにテキストを入力</p>

1	<p class="midashi15">ここにテキストを入力</p>

.midashi15 {
    display: inline-block;
    position: relative;
    padding: 0.5em 1.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 8px #ffdfa1;
    border-bottom: solid 2px #205a97;
}

.midashi15 {

display: inline-block;

position: relative;

padding: 0.5em 1.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 8px #ffdfa1;

border-bottom: solid 2px #205a97;

}

見出し16のSampleです

コードを表示

.entry-content h2 {
    padding: 0.5em 1.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 8px #6091d3;
    border-bottom: solid 2px #205a97;
}

.entry-content h2 {

padding: 0.5em 1.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 8px #6091d3;

border-bottom: solid 2px #205a97;

}

↓h2タグを使用しない場合↓

<p class="midashi16">ここにテキストを入力</p>

1	<p class="midashi16">ここにテキストを入力</p>

.midashi16 {
    padding: 0.5em 1.0em;
    margin: 0em;
    font-weight: bold;
    font-size: 20px;
    color: #555;
    background: #FFF;
    border-left: solid 8px #6091d3;
    border-bottom: solid 2px #205a97;
}

.midashi16 {

padding: 0.5em 1.0em;

margin: 0em;

font-weight: bold;

font-size: 20px;

color: #555;

background: #FFF;

border-left: solid 8px #6091d3;

border-bottom: solid 2px #205a97;

}

左右に縦ライン&unicodeの絵文字を使ってみました

見出し17と見出し18はテキストの長さに合わせてラインが可変します。

✔見出し17のSampleです

コードを表示

<h2>✔ テキストを入力</h2> /*テキストモードの時*/

1	<h2>✔ テキストを入力</h2> /テキストモードの時/

.entry-content h2 {
    display: inline-block;
    padding: 0.5em;
　  margin: 2.0em;
    font-weight: bold;
    font-size: 18px;
    color: #ff8181;
    background: #FFF;
    border-left: solid 7px #ff8181;
    border-right: solid 1px #ff8181;
    box-shadow: 1px 1px 3px gray;
}

.entry-content h2 {

display: inline-block;

padding: 0.5em;

　 margin: 2.0em;

font-weight: bold;

font-size: 18px;

color: #ff8181;

background: #FFF;

border-left: solid 7px #ff8181;

border-right: solid 1px #ff8181;

box-shadow: 1px 1px 3px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi17">✔ テキストを入力</p>

1	<p class="midashi17">✔ テキストを入力</p>

.midashi17 {
    display: inline-block;
　　padding: 0.5em;
　  margin: 2.0em;
    font-weight: bold;
　　font-size: 18px;
    color: #ff8181;
　　background: #FFF;
　　border-left: solid 7px #ff8181;
　　border-right: solid 1px #ff8181;
　　box-shadow: 1px 1px 3px gray;
}

.midashi17 {

display: inline-block;

　　padding: 0.5em;

　 margin: 2.0em;

font-weight: bold;

　　font-size: 18px;

color: #ff8181;

　　background: #FFF;

　　border-left: solid 7px #ff8181;

　　border-right: solid 1px #ff8181;

　　box-shadow: 1px 1px 3px gray;

}

🗂見出し18のSampleです

コードを表示

<h2>🗂 ここにテキストを入力</h2> /*テキストモードの時*/

1	<h2>🗂 ここにテキストを入力</h2> /テキストモードの時/

.entry-content h2 {
   display: inline-block;
   padding: 0.5em;
　  margin: 2.0em;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    background: #FFF;
    border-left: solid 7px #6091d3;
    border-right: solid 1px #6091d3;
    box-shadow: 1px 1px 3px gray;
}

.entry-content h2 {

display: inline-block;

padding: 0.5em;

　 margin: 2.0em;

font-weight: bold;

font-size: 18px;

color: #333;

background: #FFF;

border-left: solid 7px #6091d3;

border-right: solid 1px #6091d3;

box-shadow: 1px 1px 3px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi18">🗂 ここにテキストを入力</p>

1	<p class="midashi18">🗂 ここにテキストを入力</p>

.midashi18 {
    display: inline-block;
　　padding: 0.5em;
　  margin: 2.0em;
    font-weight: bold;
　　font-size: 18px;
    color: #333;
　　background: #FFF;
　　border-left: solid 7px #6091d3;
　　border-right: solid 1px #6091d3;
　　box-shadow: 1px 1px 3px gray;
}

.midashi18 {

display: inline-block;

　　padding: 0.5em;

　 margin: 2.0em;

font-weight: bold;

　　font-size: 18px;

color: #333;

　　background: #FFF;

　　border-left: solid 7px #6091d3;

　　border-right: solid 1px #6091d3;

　　box-shadow: 1px 1px 3px gray;

}

🍎見出し19のSampleです

コードを表示

<h2>🍎 テキストを入力</h2>

1	<h2>🍎 テキストを入力</h2>

.entry-content h2 {
    padding: 0.5em;
　  margin: 2.0em 0;
    font-weight: bold;
    font-size: 18px;
    color: #555;
    background: #FFF;
    border-left: solid 7px #34a853;
    border-right: solid 1px #34a853;
    box-shadow: 1px 1px 3px gray;
}

.entry-content h2 {

padding: 0.5em;

　 margin: 2.0em 0;

font-weight: bold;

font-size: 18px;

color: #555;

background: #FFF;

border-left: solid 7px #34a853;

border-right: solid 1px #34a853;

box-shadow: 1px 1px 3px gray;

}

↓h2タグを使用しない場合↓

<p class="midashi19">🍎 見出し19のSampleです</p>

1	<p class="midashi19">🍎 見出し19のSampleです</p>

.midashi19 {
    padding: 0.5em;
　  margin: 2.0em 0;
    font-weight: bold;
    font-size: 18px;
    color: #555;
    background: #FFF;
    border-left: solid 7px #34a853;
    border-right: solid 1px #34a853;
    box-shadow: 1px 1px 3px gray;
}

.midashi19 {

padding: 0.5em;

　 margin: 2.0em 0;

font-weight: bold;

font-size: 18px;

color: #555;

background: #FFF;

border-left: solid 7px #34a853;

border-right: solid 1px #34a853;

box-shadow: 1px 1px 3px gray;

}

アクセントの◯やラインが薄く消えていくグラデーション

見出し20のSampleです

コードを表示

.entry-content h2{
    padding: 0.25em 0;
    font-weight: bold;
    font-size: 18px;
    color: #555;
}
h2:before{
    content: "";
    display: block;
    height: 4px;
    background: -moz-linear-gradient(left, #ff8181,transparent);
    background: -webkit-linear-gradient(left, #FF8181, transparent);
    background: linear-gradient(left, #FF8181, transparent);
}

.entry-content h2{

padding: 0.25em 0;

font-weight: bold;

font-size: 18px;

color: #555;

}

h2:before{

content: "";

display: block;

height: 4px;

background: -moz-linear-gradient(left, #ff8181,transparent);

background: -webkit-linear-gradient(left, #FF8181, transparent);

background: linear-gradient(left, #FF8181, transparent);

}

↓h2タグを使用しない場合↓

<p class="midashi20">ここにテキストを入力</p>

1	<p class="midashi20">ここにテキストを入力</p>

.midashi20 {
    padding: 0.25em 0;
    font-weight: bold;
    font-size: 18px;
    color: #555;
}
.midashi20:beforer {
    content: "";
    display: block;
    height: 4px;
    background: -moz-linear-gradient(left, #ff8181,transparent);
    background: -webkit-linear-gradient(left, #FF8181, transparent);
    background: linear-gradient(left, #FF8181, transparent);
}

.midashi20 {

padding: 0.25em 0;

font-weight: bold;

font-size: 18px;

color: #555;

}

.midashi20:beforer {

content: "";

display: block;

height: 4px;

background: -moz-linear-gradient(left, #ff8181,transparent);

background: -webkit-linear-gradient(left, #FF8181, transparent);

background: linear-gradient(left, #FF8181, transparent);

}

見出し21のSampleです

コードを表示

.entry-content h2 {
   display: inline-block;
   position: relative;
   padding: 0.5em 0 0 2em;
   font-weight: bold;
   font-size: 18px;
   color: #555;
   width:100%;
}
h2:before{
   content: "";
   display: inline-block;
   position: absolute;
   background: -moz-radial-gradient(#ffffff 5%, #EA4335 45%); 
   background: -webkit-radial-gradient(#ffffff 5%, #EA4335　45%);
   background: radial-gradient(#ffffff 5%, #EA4335 45%);  
   width: 25px;
   height: 25px;
   left: 1px;
   bottom: 5px;
   border-radius: 50%;
}
h2:after{
    content: "";
    display: block;
    padding: 0.5em 0 0 -12em;
    margin:  0 0 0 -2em;
    height: 3px;
    background: -moz-linear-gradient(left, #ff8181,transparent);
    background: -webkit-linear-gradient(left, #ff8181, transparent);
    background: linear-gradient(left, #ff8181, transparent);
}

.entry-content h2 {

display: inline-block;

position: relative;

padding: 0.5em 0 0 2em;

font-weight: bold;

font-size: 18px;

color: #555;

width:100%;

}

h2:before{

content: "";

display: inline-block;

position: absolute;

background: -moz-radial-gradient(#ffffff 5%, #EA4335 45%);

background: -webkit-radial-gradient(#ffffff 5%, #EA4335　45%);

background: radial-gradient(#ffffff 5%, #EA4335 45%);

width: 25px;

height: 25px;

left: 1px;

bottom: 5px;

border-radius: 50%;

}

h2:after{

content: "";

display: block;

padding: 0.5em 0 0 -12em;

margin: 0 0 0 -2em;

height: 3px;

background: -moz-linear-gradient(left, #ff8181,transparent);

background: -webkit-linear-gradient(left, #ff8181, transparent);

background: linear-gradient(left, #ff8181, transparent);

}

↓h2タグを使用しない場合↓

<p class="midashi21">ここにテキストを入力</p>

1	<p class="midashi21">ここにテキストを入力</p>

.midashi21 {
    display: inline-block;
    position: relative;
    padding: 0.5em 0 0 2em;
    font-weight: bold;
    font-size: 18px;
    color: #555;
    width:100%;
}
.midashi21:before {
    content: "";
    display: inline-block;
    position: absolute;
    background: -moz-radial-gradient(#ffffff 5%, #EA4335 45%); 
    background: -webkit-radial-gradient(#ffffff 5%, #EA4335　45%);
    background: radial-gradient(#ffffff 5%, #EA4335 45%);  
    width: 25px;
    height: 25px;
    left: 1px;
    bottom: 5px;
    border-radius: 50%;
}
.midashi21:after {
    content: "";
    display: block;
    padding: 0.5em 0 0 -12em;
    margin:  0 0 0 -2em;
    height: 3px;
    background: -moz-linear-gradient(left, #ff8181,transparent);
    background: -webkit-linear-gradient(left, #ff8181, transparent);
    background: linear-gradient(left, #ff8181, transparent);
}

.midashi21 {

display: inline-block;

position: relative;

padding: 0.5em 0 0 2em;

font-weight: bold;

font-size: 18px;

color: #555;

width:100%;

}

.midashi21:before {

content: "";

display: inline-block;

position: absolute;

background: -moz-radial-gradient(#ffffff 5%, #EA4335 45%);

background: -webkit-radial-gradient(#ffffff 5%, #EA4335　45%);

background: radial-gradient(#ffffff 5%, #EA4335 45%);

width: 25px;

height: 25px;

left: 1px;

bottom: 5px;

border-radius: 50%;

}

.midashi21:after {

content: "";

display: block;

padding: 0.5em 0 0 -12em;

margin: 0 0 0 -2em;

height: 3px;

background: -moz-linear-gradient(left, #ff8181,transparent);

background: -webkit-linear-gradient(left, #ff8181, transparent);

background: linear-gradient(left, #ff8181, transparent);

}

見出し22のSampleです

コードを表示

.entry-content h2 {
   display: inline-block;
    position: relative;
    padding: 0.5em 0 0 2em;
    font-weight: bold;
    font-size: 18px;
    color: #555;
    width:100%;
}
h2:before {
    content: "";
    display: inline-block;
    position: absolute;
  　background: -moz-radial-gradient( #ffffff 5%, #34a853 55%); 
    background: -webkit-radial-gradient( #ffffff 5%, #34a853　55%);
    background: radial-gradient(#ffffff 5%, #34a853 55%);  
    width: 25px;
    height: 25px;
    left: 1px;
    bottom: 5px;
    border-radius: 50%;
}
h2:after {
    content: "";
    display: block;
    padding: 0.5em 0 0 -12em;
    margin:  0 0 0 -2em;
    height: 3px;
    background: -moz-linear-gradient(left, #34a853,transparent);
    background: -webkit-linear-gradient(left, #34a853, transparent);
    background: linear-gradient(left, #34a853, transparent);
}

.entry-content h2 {

display: inline-block;

position: relative;

padding: 0.5em 0 0 2em;

font-weight: bold;

font-size: 18px;

color: #555;

width:100%;

}

h2:before {

content: "";

display: inline-block;

position: absolute;

　background: -moz-radial-gradient( #ffffff 5%, #34a853 55%);

background: -webkit-radial-gradient( #ffffff 5%, #34a853　55%);

background: radial-gradient(#ffffff 5%, #34a853 55%);

width: 25px;

height: 25px;

left: 1px;

bottom: 5px;

border-radius: 50%;

}

h2:after {

content: "";

display: block;

padding: 0.5em 0 0 -12em;

margin: 0 0 0 -2em;

height: 3px;

background: -moz-linear-gradient(left, #34a853,transparent);

background: -webkit-linear-gradient(left, #34a853, transparent);

background: linear-gradient(left, #34a853, transparent);

}

↓h2タグを使用しない場合↓

<p class="midashi22">ここにテキストを入力</p>

1	<p class="midashi22">ここにテキストを入力</p>

.midashi22 {
    display: inline-block;
    position: relative;
    padding: 0.5em 0 0 2em;
    font-weight: bold;
    font-size: 18px;
    color: #555;
    width:100%;
}
.midashi22:before{
    content: "";
    display: inline-block;
    position: absolute;
  　background: -moz-radial-gradient( #ffffff 5%, #34a853 55%); 
    background: -webkit-radial-gradient( #ffffff 5%, #34a853　55%);
    background: radial-gradient(#ffffff 5%, #34a853 55%);  
    width: 25px;
    height: 25px;
    left: 1px;
    bottom: 5px;
    border-radius: 50%;
}
.midashi22:after {
    content: "";
    display: block;
    padding: 0.5em 0 0 -12em;
    margin:  0 0 0 -2em;
    height: 3px;
    background: -moz-linear-gradient(left, #34a853,transparent);
    background: -webkit-linear-gradient(left, #34a853, transparent);
    background: linear-gradient(left, #34a853, transparent);
}

.midashi22 {

display: inline-block;

position: relative;

padding: 0.5em 0 0 2em;

font-weight: bold;

font-size: 18px;

color: #555;

width:100%;

}

.midashi22:before{

content: "";

display: inline-block;

position: absolute;

　background: -moz-radial-gradient( #ffffff 5%, #34a853 55%);

background: -webkit-radial-gradient( #ffffff 5%, #34a853　55%);

background: radial-gradient(#ffffff 5%, #34a853 55%);

width: 25px;

height: 25px;

left: 1px;

bottom: 5px;

border-radius: 50%;

}

.midashi22:after {

content: "";

display: block;

padding: 0.5em 0 0 -12em;

margin: 0 0 0 -2em;

height: 3px;

background: -moz-linear-gradient(left, #34a853,transparent);

background: -webkit-linear-gradient(left, #34a853, transparent);

background: linear-gradient(left, #34a853, transparent);

}

🍹役にたったら共有してね🍹

2018年5月19日2018年5月22日

【WordPress】改行しても囲い枠内にピッタリ文字が納まった時のまとめ!

`display:inline-block;`でテキストの長さに合わせる

一行に連続した文字を入力した場合以下のようにdisplay: inline-block;をCSで指定すると以下のように自動で枠が広がっていくのですが

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

改行すると下のように右側に空白ができてしまいます。

これはfukidashi1のサンプルです。
ここで改行してます。
右に余白ができてしまいますね

<div class="fukidashi1">ここに文字を入力</div>

1	<div class="fukidashi1">ここに文字を入力</div>

.fukidashi1 {
    position: relative;
    display: inline-blok;
    padding: 1.5em;
    margin: 0 auto;
    min-width: 2em;
    max-width: 400px;
    color: #555;
    font-weight: bold;
    background: #fff;
    border: solid 3px #ff8181;
    border-radius: 20px;
    box-shadow: 1px 1px 2px gray;
    box-sizing: border-box;
}
.fukidashi1:before{
    content: "";
    position: absolute;
    background: #ff8181;
    width: 25px;
    height: 25px;
    left: -30px;
    bottom: 0px;
    coler: #ff8181;
    border-radius: 50%;
}
.fukidashi1:after{
    content: "";
    position: absolute;
    background: #ff8181;
    width: 15px;
    height: 15px;
    left: -46px;
    bottom: 0px;
    coler: #ff8181;
    border-radius: 50%;
}
.fukidashi1 p {
    font-weight: bold;
}

.fukidashi1 {

position: relative;

display: inline-blok;

padding: 1.5em;

margin: 0 auto;

min-width: 2em;

max-width: 400px;

color: #555;

font-weight: bold;

background: #fff;

border: solid 3px #ff8181;

border-radius: 20px;

box-shadow: 1px 1px 2px gray;

box-sizing: border-box;

}

.fukidashi1:before{

content: "";

position: absolute;

background: #ff8181;

width: 25px;

height: 25px;

left: -30px;

bottom: 0px;

coler: #ff8181;

border-radius: 50%;

}

.fukidashi1:after{

content: "";

position: absolute;

background: #ff8181;

width: 15px;

height: 15px;

left: -46px;

bottom: 0px;

coler: #ff8181;

border-radius: 50%;

}

.fukidashi1 p {

font-weight: bold;

}

labelに文字を表示する

そこで試したのが”label”に文字を表示させることです。
これは以前アコーディオンみたいなのを作っていた時に文字と枠の間に空白ができないのが記憶の片隅に残っていてこれは試す価値ありだな!!・・・と思い試してみました!
参考にさせて頂いたサイトは、[CSS]可変するレイアウト幅の最大値を制限する簡単な方法　です。ありがとうございました。

するとこれは通常と同じ表示なのですが

これはfukidashi2のサンプルです。改行してないので枠内に綺麗に納まってますね

改行した時以下のように、右側にあった空白がなくなっていました。

これはfikidashi2のサンプルです。
ここで改行しましたが
文字と枠の隙間がなく
ピッタリ!綺麗に納まりました。

<div class="fukidashi2"><label for="label">ここに文字を入力する</label></div>

1	<div class="fukidashi2"><label for="label">ここに文字を入力する</label></div>

.fukidashi2 {
    padding: 0;
    margin: 0 auto;
    min-width: 2em;
    max-width: 400px;
}
.fukidashi2 label{
    display: inline-block;
    position: relative;
    padding: 1.5em;
    margin: 0;
    min-width: 2em;
    max-width: 400px;
    text-decoration: none;
    color: #555;
    font-weight: bold;
    background: #fff;
    border: solid 3px #ff8181;
    border-radius: 20px;
    box-shadow: 1px 1px 2px gray;
}

.fukidashi2 label:before {
    content: "";
    position: absolute;
    background: #ff8181;
    width: 25px;
    height: 25px;
    left: -30px;
    bottom: 0px;
    coler:#ff8181;
    border-radius: 50%;
　　box-sizing: border-box;　
}
.fukidashi2 label:after {
    content: "";
    position: absolute;
    background: #ff8181;
    width: 15px;
    height: 15px;
    left: -46px;
    bottom: 0px;
    coler:#ff8181;
    border-radius: 50%;
}

.fukidashi2 {

padding: 0;

margin: 0 auto;

min-width: 2em;

max-width: 400px;

}

.fukidashi2 label{

display: inline-block;

position: relative;

padding: 1.5em;

margin: 0;

min-width: 2em;

max-width: 400px;

text-decoration: none;

color: #555;

font-weight: bold;

background: #fff;

border: solid 3px #ff8181;

border-radius: 20px;

box-shadow: 1px 1px 2px gray;

}

.fukidashi2 label:before {

content: "";

position: absolute;

background: #ff8181;

width: 25px;

height: 25px;

left: -30px;

bottom: 0px;

coler:#ff8181;

border-radius: 50%;

　　box-sizing: border-box;　

}

.fukidashi2 label:after {

content: "";

position: absolute;

background: #ff8181;

width: 15px;

height: 15px;

left: -46px;

bottom: 0px;

coler:#ff8181;

border-radius: 50%;

}

もっとわかりやすく表示すると

↓こんな感じです。↓

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

Excel
Word
PowerPoint

これはfukidashi2のサンプルです。改行してないので枠内に綺麗に納まってますね

Excel
Word
PowerPoint

文字数が少ないとわかりやすいですね!

2018年5月18日2018年5月19日

【WordPress】初心者向け1記事に装飾枠を付けるサンプル

この記事のサンプルは、このページのみcssを反映させてますので、https://暮らしのハンドノート.comからダイレクトにアクセスされた方にはサンプル画像が表示されません。

サンプル画像が見えない時は、ここをクリックして下さい。
プラグインのcssやTwenty Seventeenの追加cssを使うと全体的にcssが反映してしまいますね。

一部の記事にcssを反映させたい時は、カスタムフィールドにcssを記述しましょう。

カスタムフィールドの作成方法は、WordPressのカスタムフィールドを使用し投稿する方法

で説明していますので参考にして下さい。

※box名が重複した場合はbox名のみ重複しないbox名を使って下さい。

シンプルな囲い枠

↓htmlのコードは下記の通り↓

<div class="box10">BOXの中に入れる文字</div>

1	<div class="box10">BOXの中に入れる文字</div>

box10を使用したい任意のbox名(数値)に変更するだけです。

可愛くてシンプルなボーダー線

このサンプルはborder: soid (直線)を使っています。

詳細はbox10の中に記述しています。

box10

コードを表示

.box10 {

position: relative;/*相対位置*/

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;/*領域間(枠の外)のスペース */

background: #fff6f5;/*背景色*/

box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/

border: solid 3px #ff7c5c;/*直線 太さ 色*/

padding: 1.0em ;/*領域(枠)内のスペース*/

font-weight: bold;/*枠内の文字を太字*/

color: #ff7c5c; /*枠内の文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center/*枠内の文字を中央表示*/

}

box20

コードを表示

.box20 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff9f1;

box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/

border: solid 3px #fbb305;/*直線*/

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box30

コードを表示

.box30 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #efefff;

box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/

border: solid 3px #1765c5;;/*直線*/

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #1765c5; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

立体的に窪んだ線

box11

コードを表示

.box11 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff6f5;

box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/

outline: groove 5px #ff7c5c;/*立体的に窪んだ線*/

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #ff7c5c; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box21

コードを表示

.box21 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff9f1;

box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/

outline: groove 5px #fbb305;/*立体的に窪んだ線*/

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box31

コードを表示

.box31 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #efefff;

box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/

outline: groove 5px #1765c5;/*立体的に窪んだ線*/

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #1765c5; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

立体的に隆起した線

box12

コードを表示

.box12 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fdf5e6;

box-shadow: 0px 0px 0px 10px #fdf5e6;/*線の外側*/

outline: ridge 5px #ff7c5c;/*立体的に隆起した線*/

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #ff7c5c; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box22

コードを表示

.box22 {

position: relative;

width: 250px;/*横幅*/

padding: 1.0em ;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff9f1;

box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/

outline: ridge 5px #fbb305;/*立体的に隆起した線*/

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box32

コードを表示

.box32 {

position: relative;

width: 250px;/*横幅*/

padding: 1.0em ;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #efefff;

box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/

outline: ridge 5px #1765c5;/*立体的に隆起した線*/

font-weight: bold;/*太字*/

color: #1765c5; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

角を丸くした線

box13

コードを表示

.box13 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff6f5;

box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/

border: solid 3px #ff7c5c;/*1本線*/

border-radius: 9px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #ff7c5c; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box23

コードを表示

.box23 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff9f1;

box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/

border: solid 3px #fbb305;/*1本線*/

border-radius: 9px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box33

コードを表示

.box33 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #efefff;

box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/

border: solid 3px #1765c5;/*1本線*/

border-radius: 9px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #1765c5; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

角を丸くした破線

box14

コードを表示

.box14 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff6f5;

box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/

border: dashed 3px #ff7c5c;/*破線*/

border-radius: 9px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #ff7c5c; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box24

コードを表示

.box24 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff9f1;

box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/

border: dashed 3px #fbb305;/*破線*/

border-radius: 9px;

padding: 1.0em ;

width: 250px;/*横幅*/

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box34

コードを表示

.box34 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #efefff;

box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/

border: dashed 3px #1765c5;/*破線*/

border-radius: 9px;

padding: 1.0em ;

width: 250px;/*横幅*/

font-weight: bold;/*太字*/

color: #1765c5; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

角を丸くした点線

box15

コードを表示

.box15 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff6f5;

box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/

border: dotted 3px #ff7c5c;/*点線*/

border-radius: 9px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #ff7c5c; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box25

コードを表示

.box25 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff9f1;

box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/

border: dotted 3px #fbb305;;/*点線*/

border-radius: 9px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box35

コードを表示

.box35 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #efefff;

box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/

border: dotted 3px #1765c5;;/*点線*/

border-radius: 9px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #1765c5; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

角が変形した不思議な線

box16

コードを表示

.box16 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff6f5;

box-shadow: 0px 0px 0px 5px #fff6f5;/*線の外側*/

border: solid 5px  #ff7c5c;/*1本線*/

border-radius: 300px 50px;

padding: 1.0em ;

width: 250px;/*横幅*/

font-weight: bold;/*太字*/

color: #ff7c5c; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box26

コードを表示

.box26 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #fff9f1;

box-shadow: 0px 0px 0px 5px #fff9f1;/*線の外側*/

border: solid 5px  #fbb305;/*1本線*/

border-radius: 200px 100px 100px 200px;

padding: 1.0em ;

width: 250px;/*横幅*/

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

box36

コードを表示

.box36 {

position: relative;

width: 250px;/*横幅*/

margin: 2em 0 2em 0px;

background: #efefff;

box-shadow: 0px 0px 0px 5px #efefff;/*線の外側*/

border: solid 5px  #1765c5;/*1本線*/

border-radius: 100px 500px;

padding: 1.0em ;

width: 250px;/*横幅*/

font-weight: bold;/*太字*/

color: #1765c5; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

こんな使い方もできるよ!

アルバムみたいに

width(幅)の指定を外せば画面いっぱいに

例えば、下のboxのようにアルバム代わりにもアレンジできます

可愛い動物

コードを表示

<div class="box3"><i class="fas fa-paw"></i>可愛い動物<i class="fas fa-paw"></i>
<a href="https://～画像のurl～画像のurl～画像のurl</a></div>

1 2	<div class="box3"><i class="fas fa-paw"></i>可愛い動物<i class="fas fa-paw"></i> <a href="https://～画像のurl～画像のurl～画像のurl</a></div>

.box3 {
    position: relative;
    margin: 2em 0 2em 0px;
    background: #fdf5e6;
    box-shadow: 0px 0px 0px 10px #fdf5e6;/*線の外側*/
    outline: ridge 5px #fbb305;/*立体的に隆起した線*/
　 　border-radius: 5px;
    padding: 1.0em ;
    font-weight: bold;/*太字*/
    color: #fbb305; /*文字色*/
    font-size: 2em;/*フォントサイズ*/
    text-align: center
}

.box3 {

position: relative;

margin: 2em 0 2em 0px;

background: #fdf5e6;

box-shadow: 0px 0px 0px 10px #fdf5e6;/*線の外側*/

outline: ridge 5px #fbb305;/*立体的に隆起した線*/

　　border-radius: 5px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

このFontAwesomeのアイコンを使うには少しだけ準備する必要があります。

まず、下のコードをコピーして

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

1	<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

WordPressの[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]の<head>〜</head>の中に貼り付けます。

枠を横に並べる

枠を横に並べる時は幅や高さを指定できるdisplay: inline-block;を使います。

box13-1

box23-1

box33-1

コードを表示

<div class="box13-1">box13-1</div>
<div class="box23-1">box23-1</div>
<div class="box33-1">box33-1</div>

.box13-1 {
    display:inline-block;
    position: relative;
    width: 200px;/*横幅*/
    margin: 2em 0.2em 2em 0px;
    background: #fff6f5;
    box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/
    border: solid 3px #ff7c5c;/*1本線*/
    border-radius: 9px;
    padding: 1.0em;
    font-weight: bold;/*太字*/
    color: #ff7c5c; /*文字色*/
    font-size: 2em;/*フォントサイズ*/
    text-align: center
}

.box23-1 {
    display:inline-block;
    position: relative;
    width: 200px;/*横幅*/
    margin: 2em 0.2em 2em 0px;
    background: #fff9f1;
    box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/
    border: solid 3px #fbb305;/*1本線*/
    border-radius: 9px;
    padding: 1.0em;
    font-weight: bold;/*太字*/
    color: #fbb305; /*文字色*/
    font-size: 2em;/*フォントサイズ*/
    text-align: center
}

.box33-1 {
    display:inline-block;
    position: relative;
    width: 200px;/*横幅*/
    margin: 2em 0.2em 2em 0px;
    background: #efefff;
    box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/
    border: solid 3px #1765c5;/*1本線*/
    border-radius: 9px;
    padding: 1.0em ;
    font-weight: bold;/*太字*/
    color: #1765c5; /*文字色*/
    font-size: 2em;/*フォントサイズ*/
    text-align: center
}

.box13-1 {

display:inline-block;

position: relative;

width: 200px;/*横幅*/

margin: 2em 0.2em 2em 0px;

background: #fff6f5;

box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/

border: solid 3px #ff7c5c;/*1本線*/

border-radius: 9px;

padding: 1.0em;

font-weight: bold;/*太字*/

color: #ff7c5c; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

.box23-1 {

display:inline-block;

position: relative;

width: 200px;/*横幅*/

margin: 2em 0.2em 2em 0px;

background: #fff9f1;

box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/

border: solid 3px #fbb305;/*1本線*/

border-radius: 9px;

padding: 1.0em;

font-weight: bold;/*太字*/

color: #fbb305; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

.box33-1 {

display:inline-block;

position: relative;

width: 200px;/*横幅*/

margin: 2em 0.2em 2em 0px;

background: #efefff;

box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/

border: solid 3px #1765c5;/*1本線*/

border-radius: 9px;

padding: 1.0em ;

font-weight: bold;/*太字*/

color: #1765c5; /*文字色*/

font-size: 2em;/*フォントサイズ*/

text-align: center

}

画像と吹き出し枠を横に並べる

画像と枠や文字などを横に並べるにはalign属性を使います。

画像に記述する時は下コードを参考にして下さい。

残念ながら、スマホの画面には入りきれないので吹き出し枠が画像の下に表示されますが・・・

【align=”left】で画像に
回り込みを指定して表示しています。
可愛い３匹のワンちゃんですね。

コードを表示

　回り込みを指定するときは

<img src="URL（画像のアドレス）" align="leftまたはright">

1	<img src="URL（画像のアドレス）" align="leftまたはright">

今回の表示は

<img src="URL（画像のアドレス）" align="left></a>
<div class="hukidashi">ここは吹き出しの中の文字</div>

1 2	<img src="URL（画像のアドレス）" align="left></a> <div class="hukidashi">ここは吹き出しの中の文字</div>

/*吹き出し*/
.hukidashi {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0 1.5em 0px;
	padding: 1.0em 1.0em;
	min-width: 2.0em;
 	max-width: 100%;
 	color: #000;
	font-size: 18px;
	background: #fff;
 	border: solid 3px #808080;
    border-radius: 10px;
 	box-sizing: border-box;
}

.hukidashi:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
 	margin-top: -10px;
	border: 10px solid transparent;
	border-right: 10px solid #FFF;
 	z-index: 2;
}

.hukidashi:after{
	content: "";
	position: absolute;
	top: 50%;
	left: -28px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #808080;
 	z-index: 1;
}

/*吹き出し*/

.hukidashi {

position: relative;

display: inline-block;

margin: 1.5em 0 1.5em 0px;

padding: 1.0em 1.0em;

min-width: 2.0em;

max-width: 100%;

color: #000;

font-size: 18px;

background: #fff;

border: solid 3px #808080;

border-radius: 10px;

box-sizing: border-box;

}

.hukidashi:before{

content: "";

position: absolute;

top: 50%;

left: -20px;

margin-top: -10px;

border: 10px solid transparent;

border-right: 10px solid #FFF;

z-index: 2;

}

.hukidashi:after{

content: "";

position: absolute;

top: 50%;

left: -28px;

margin-top: -14px;

border: 14px solid transparent;

border-right: 14px solid #808080;

z-index: 1;

}

↓解除するときは↓

<br clear="left">
<br clear="right">
<br clear="all">

left、right、allのいずれかを指定。
画像が左側にあるときの回り込み解除は、値にleftを指定します。
画像が右側にあるときの回り込みを解除は、値にrightを指定します。
画像が左右のどちらにあっても、値にallを指定すれば回りこみを解除できます

wordpressで<br>タグを使って解除できないときは、

<div style="clear: both;"></div>

1	<div style="clear: both;"></div>

を使います。

border-radiusを使って●を作って少し可愛げに
右下には少し影を付けて立体感をだしてアレンジしてみました。
こちら表示は左marginを330pxで指定して表示しています。

ヨチヨチと歩く姿がかわいい!
アヒルの赤ちゃんですね。

コードを表示

<img src="URL（画像のアドレス）" align="left></a>
<p class="fukidashi1">ヨチヨチと歩く姿がかわいい!
アヒルの赤ちゃんですね。</p>

<p class="fukidashi1">ヨチヨチと歩く姿がかわいい!

アヒルの赤ちゃんですね。</p>

.fukidashi1 {
    position: relative;
    display: inline-blok;
    margin: 1.5em 0 1.5em 330px;
	padding: 1.0em 1.0em;
    min-width: 250px;
    max-width: 300px;
    color: #555;
	font-size: 18px;
	background: #fff;
 	border: solid 3px #ff8181;
    border-radius: 20px;
	box-shadow: 1px 1px 2px gray;
}
.fukidashi1:before{
    content: "";
    position: absolute;
    background: #ff8181;
    width: 25px;
    height: 25px;
    left: -30px;
	bottom: 0px;
    coler:#ff8181;
    border-radius: 50%;
}
.fukidashi1:after{
	content: "";
	position: absolute;
    background: #ff8181;
    width: 15px;
    height: 15px;
    left: -46px;
	bottom: 0px;
    coler:#ff8181;
    border-radius: 50%;
}

.fukidashi1 {

position: relative;

display: inline-blok;

margin: 1.5em 0 1.5em 330px;

padding: 1.0em 1.0em;

min-width: 250px;

max-width: 300px;

color: #555;

font-size: 18px;

background: #fff;

border: solid 3px #ff8181;

border-radius: 20px;

box-shadow: 1px 1px 2px gray;

}

.fukidashi1:before{

content: "";

position: absolute;

background: #ff8181;

width: 25px;

height: 25px;

left: -30px;

bottom: 0px;

coler:#ff8181;

border-radius: 50%;

}

.fukidashi1:after{

content: "";

position: absolute;

background: #ff8181;

width: 15px;

height: 15px;

left: -46px;

bottom: 0px;

coler:#ff8181;

border-radius: 50%;

}

2018年5月11日2018年5月11日

光明水だけで植物がみるみる元気に!!

かなり前に、紹介した光明石なんですが

昨年の9月に購入したドラセナ・カンボジアーナ(観葉植物)で

こっそりと実験してみました。

下から中間くらいまでの葉は、購入当初の葉で、

中間から上の方の葉は、光明石をペットボトルに入れて、

その中に水を入れて(光明水)を作り水やりしだしてからの葉です。

葉の長さが違うのが分かりますか？

下の画像は、真横から撮った写真なんですが、

こちらの方が分かりやすいですかね？

真上からみるとこんな感じ

光明水を購入した時についてきた、光明石での実験結果報告でした。

他にも、菊の花を水耕栽培していますが90％の確率で、根が生えてきて

まだ2ﾐﾘ程度ですけど、小さい花芽が出てきました!!

ちなみに残りの10％は、私が水やりを忘れたて枯らしてしまったので、水やりを忘れなかったら・・どんな確立だったんでしょうね？

光明石の詳しい情報が知りたい方は、室井さんまで連絡して下さいね。

室井さんってどんな人？

はい。こんな人です。

↓　　↓

優しそうなおじさまでしょ!!

室井さんは、無理に光明石を勧めたりする人ではないですので、不明な点は気楽にお尋ねになられたらいいと思いますよ。

おかみの足湯(番頭さん)のTEL 090-1876-0621です。

2018年5月11日2018年5月13日

100円ショップのアイテムを使って30分程でキーボードが新品同様ピカピカに!

いつもお世話になっているキーボードなんですがすごいホコリまみれ・・・

キーボードキーを外すと、こんなにもすごい汚い・・・

エアーダスターを使ってホコリを取り除こうと思ったら、あら!!エアーが出てこない・・・
そこで、思いついたのが以前100円ショップで購入していた掃除機の先端につけるハケが付いたアイテム。

これを使うと、ホコリを取り除きつつ掃除機に吸い込んでくれます。

このアイテムが何故あるかと言うと、パソコン・テレビの後ろ・リモコンなどの小さい、隙間に入ったホコリを吸い取ってもらうのに便利なので10年以上前からの必需品です。

キーボードのキーは洗濯ネットへ入れてジャバジャバ洗いキーをタオルなどの上で乾燥させ、キーボード本体は、掃除機の先端に上のアイテムを付けてホコリを吸い取りました。

すると約30分程で完了。こんなに綺麗になりましたよ。

キーボードのキーの戻りもよくなったので、タイピングも楽になりました。

100円ショップのアイテム結構いいですね!!

　キーボードのキーを外す前にご自分のキーボードの配列を写メで撮っておくと、はめる時に便利です。

2018年5月9日2018年5月18日

VisualStudio【C言語】メニュー画面作成中のメモです【マイツール】との違いは?

前回引き続き、今回はメニュー画面を作っています。

最近、色作りに専念しちゃっててやっと本題ですか?って感じですよね。

まぁ、超初心者のページなんて誰もみない!!と勝手に仮定させてもらって、

超メモ書きになっているのですが・・

こんなふうにしたらいいよ!!なんてアドバイスいただけるとものすごーく嬉しいので(#^.^#)念のため・・・

使用しているOSは:Windows7 64bit
統合開発環境:VisualStudioCommunity2017 win32 です。

私が作りたいのはこんなの↓↓

なんですけど・・・

以前作ってたのはここまでで・・

でも、今回は少しだけ進みました。

マイツールの記述方法とは違いがあり、まず画面表示に座標が指定ができそうになかったことです。

以下のソースはマイツールで記述したものなんですが、

使えたのは、今のところCLS とIFくらいです。(記述方法は違いますが・・・)

RUNという命令は、次のプログラムを実行する命令なんですが、C言語ではまだ見つけていません。

C言語ではgoto関数は使わない方がいい?

マイツールでよく使っていた飛び先を指定する方法「GOTO」なんですが、まず、下のように記述してみました。

#include <stdio.h>
#include <windows.h>
#include "color16.h"


int main()

{
		
	printf("==========================================================================\n\n");
	SET(COLOR, CYAN);//文字色をシアン
	printf("\t\t\t  メインメニュー\n\n");
	SET(COLOR, WHITE);//文字色を白に変更
	printf("==========================================================================\n\n\n");
	printf("\t\t\t1.販売管理メニュー\n\n");
	printf("\t\t\t2.顧客管理メニュー\n\n");
	printf("\t\t\t3.財務管理メニュー\n\n");
	SET(COLOR, RED);//文字色を強調の赤に変更
	printf("\t\t\t4.終            了\n\n\n\n\n");
	SET(COLOR, WHITE);//文字色を白に変更
	printf("\t 処理番号を数字(1～4)で入力してエンターを押してください");



        int c; /* キーボードから受け取った文字を入れておく変数 */

	
	c = getchar(); /* キーボードから１文字だけ受け取る */

	putchar(c);

	if (c == 1) { 
		goto hanbai;
	}else if (c == 2) {
		goto kokyaku;
	}else if (c== 3) {
		goto zaimu;
	}else if (c == 4) {
		goto owari;
		}
	system("stty echo -icanon min 1 time 0");

	c = 0;

hanbai:
	system("cls");
	int hanbai(void);
	{
		printf("hanbaiです\n");
		return 0;


	}
		system("pause");    // 出力表示のための一時停止	

	kokyaku:
		system("cls");
		int kokyaku(void);
	{
		printf("kokyakuです\n");
		return 0;
	}
	

zaimu:
	{
		printf("zaiomuです\n");
	}
	

owari:
	{
		printf("owariです\n");

	}
	return 0;
}

#include <stdio.h>

#include <windows.h>

#include "color16.h"

int main()

{

printf("==========================================================================\n\n");

SET(COLOR, CYAN);//文字色をシアン

printf("\t\t\t メインメニュー\n\n");

SET(COLOR, WHITE);//文字色を白に変更

printf("==========================================================================\n\n\n");

printf("\t\t\t1.販売管理メニュー\n\n");

printf("\t\t\t2.顧客管理メニュー\n\n");

printf("\t\t\t3.財務管理メニュー\n\n");

SET(COLOR, RED);//文字色を強調の赤に変更

printf("\t\t\t4.終了\n\n\n\n\n");

SET(COLOR, WHITE);//文字色を白に変更

printf("\t 処理番号を数字(1～4)で入力してエンターを押してください");

int c; /* キーボードから受け取った文字を入れておく変数 */

c = getchar(); /* キーボードから１文字だけ受け取る */

putchar(c);

if (c == 1) {

goto hanbai;

}else if (c == 2) {

goto kokyaku;

}else if (c== 3) {

goto zaimu;

}else if (c == 4) {

goto owari;

}

system("stty echo -icanon min 1 time 0");

c = 0;

hanbai:

system("cls");

int hanbai(void);

{

printf("hanbaiです\n");

return 0;

}

system("pause"); // 出力表示のための一時停止

kokyaku:

system("cls");

int kokyaku(void);

{

printf("kokyakuです\n");

return 0;

}

zaimu:

{

printf("zaiomuです\n");

}

owari:

{

printf("owariです\n");

}

return 0;

}

すると1C言語では、「goto」を指定すると思うように飛先に行ってくれず・・

困ったあげくに検索すると、やはりgoto関数は戻ってこれないとか色々なことが書かれていて素人は使わない方がいいようなことが沢山書かれていました。

そこで、気を取り直し、

goto関数を使うのはやめて、以下のように入力変更・・・

#include <stdio.h>
#include "color16.h"




int main(void)

{
		
	printf("==========================================================================\n\n");
	SET(COLOR, CYAN);//文字色をシアン
	printf("\t\t\t  メインメニュー\n\n");
	SET(COLOR, WHITE);//文字色を白に変更
	printf("==========================================================================\n\n\n");
	printf("\t\t\t1.販売管理メニュー\n\n");
	printf("\t\t\t2.顧客管理メニュー\n\n");
	printf("\t\t\t3.財務管理メニュー\n\n");
	SET(COLOR, RED);//文字色を強調の赤に変更
	printf("\t\t\t4.終            了\n\n\n\n\n");
	SET(COLOR, WHITE);//文字色を白に変更
	printf("\t 処理番号を数字(1～4)で入力してエンターを押してください");


	int c; /* キーボードから受け取った文字を入れておく変数 */

	c = getchar(); /* キーボードから１文字だけ受け取る */


	

	if ( c == '1' ) { //キーボードから入力された値が1の時の処理  

	

		int hanbai(void); {
			
			

			printf("==========================================================================\n\n");
			SET(COLOR, CYAN);//文字色をシアン
			printf("\t\t\t  販売管理メニュー\n\n");
			SET(COLOR, WHITE);//文字色を白に変更
			printf("==========================================================================\n\n\n");
			printf("\t\t\t1.レンタル 納品伝票\n\n");
			printf("\t\t\t2.レンタル 返却伝票\n\n");
			printf("\t\t\t3.販　 売 　伝　 票\n\n");
			SET(COLOR, RED);//文字色を強調の赤に変更
			printf("\t\t\t4.終             了\n\n\n\n\n");
			SET(COLOR, WHITE);//文字色を白に変更
			printf("\t 処理番号を数字(1～4)で入力してエンターを押してください\n\n\n");



			int b; /* キーボードから受け取った文字を入れておく変数 */

			b = getchar(); /* キーボードから１文字だけ受け取る */

			system("pause");    // 出力表示のための一時停止


			return 0;

		}
		
	}
	else if (c == '2') { //キーボードから入力された値が2の時の処理

		int kokyaku(void); {

			
			printf("==========================================================================\n\n");
			SET(COLOR, CYAN);//文字色をシアン
			printf("\t\t\t  顧客管理メニュー\n\n");
			SET(COLOR, WHITE);//文字色を白に変更
			printf("==========================================================================\n\n\n");
			printf("\t\t\t1.顧客登録\n\n");
			printf("\t\t\t2.顧客修正\n\n");
			SET(COLOR, RED);//文字色を強調の赤に変更
			printf("\t\t\t3.終             了\n\n\n\n\n");
			SET(COLOR, WHITE);//文字色を白に変更
			printf("\t 処理番号を数字(1～3)で入力してエンターを押してください\n\n\n");



			int d; /* キーボードから受け取った文字を入れておく変数 */

			d = getchar(); /* キーボードから１文字だけ受け取る */

			
			return 0;


		}
	}
	else if (c == '3') {
		
		int zaimu(void);

		printf("財務が表示されました");

	}
	else

	return 0;
}

100

101

102

103

104

105

106

#include <stdio.h>

#include "color16.h"

int main(void)

{

printf("==========================================================================\n\n");

SET(COLOR, CYAN);//文字色をシアン

printf("\t\t\t メインメニュー\n\n");

SET(COLOR, WHITE);//文字色を白に変更

printf("==========================================================================\n\n\n");

printf("\t\t\t1.販売管理メニュー\n\n");

printf("\t\t\t2.顧客管理メニュー\n\n");

printf("\t\t\t3.財務管理メニュー\n\n");

SET(COLOR, RED);//文字色を強調の赤に変更

printf("\t\t\t4.終了\n\n\n\n\n");

SET(COLOR, WHITE);//文字色を白に変更

printf("\t 処理番号を数字(1～4)で入力してエンターを押してください");

int c; /* キーボードから受け取った文字を入れておく変数 */

c = getchar(); /* キーボードから１文字だけ受け取る */

if ( c == '1' ) { //キーボードから入力された値が1の時の処理

int hanbai(void); {

printf("==========================================================================\n\n");

SET(COLOR, CYAN);//文字色をシアン

printf("\t\t\t 販売管理メニュー\n\n");

SET(COLOR, WHITE);//文字色を白に変更

printf("==========================================================================\n\n\n");

printf("\t\t\t1.レンタル納品伝票\n\n");

printf("\t\t\t2.レンタル返却伝票\n\n");

printf("\t\t\t3.販　売　伝　票\n\n");

SET(COLOR, RED);//文字色を強調の赤に変更

printf("\t\t\t4.終了\n\n\n\n\n");

SET(COLOR, WHITE);//文字色を白に変更

printf("\t 処理番号を数字(1～4)で入力してエンターを押してください\n\n\n");

int b; /* キーボードから受け取った文字を入れておく変数 */

b = getchar(); /* キーボードから１文字だけ受け取る */

system("pause"); // 出力表示のための一時停止

return 0;

}

else if (c == '2') { //キーボードから入力された値が2の時の処理

int kokyaku(void); {

printf("==========================================================================\n\n");

SET(COLOR, CYAN);//文字色をシアン

printf("\t\t\t 顧客管理メニュー\n\n");

SET(COLOR, WHITE);//文字色を白に変更

printf("==========================================================================\n\n\n");

printf("\t\t\t1.顧客登録\n\n");

printf("\t\t\t2.顧客修正\n\n");

SET(COLOR, RED);//文字色を強調の赤に変更

printf("\t\t\t3.終了\n\n\n\n\n");

SET(COLOR, WHITE);//文字色を白に変更

printf("\t 処理番号を数字(1～3)で入力してエンターを押してください\n\n\n");

int d; /* キーボードから受け取った文字を入れておく変数 */

d = getchar(); /* キーボードから１文字だけ受け取る */

return 0;

}

else if (c == '3') {

int zaimu(void);

printf("財務が表示されました");

}

else

return 0;

}

すると・・始めの画面表示はよかったのですが

メインメニュー表示中に 1⏎ すると・・・

上の画像のように画面表示されました。

解決方法としては、マイツールの時に使っていたCLS命令

それに匹敵するのが【system(cls)】でした。

system(cls)で現在の画面をクリアにする

system() 関数はシステムにコマンド実行を要求する関数で

ｃｌｓ＝画面クリアコマンド

system("cls"); //現在の画面を非表示にする

1	system("cls"); //現在の画面を非表示にする

でも、次の画面を表示したいので、

system("pause"); // 出力表示のための一時停止

1	system("pause"); // 出力表示のための一時停止

を使って表示しました。

やっとコマンドプロント画面から 1⏎ で次のメニュー画面が表示されるようになりました。

今回少し手こずったのは、数字を入力しても指定の場所にいってくれなかったところでした。

解決方法としては変数キーボードから入力した値を格納する時に以下のように

if ( c == '1' )

1	if ( c == '1' )

文字として認識してもらえるようにシングルコーテーションを付加した結果素直に動いてもらえました。

get char関数を使う時の注意点!

get char関数は、コマンドプロンプト画面から入力された半角英数字を自動的に文字として変数の型charに格納する関数。

少しだけ進んだかな?

2018年5月8日2018年5月8日

VisualStudioCommunity2017【C言語】で16色の背景色と文字色をコンソール画面に出力に成功!

前回に引き続き背景色がどうしても諦められず・・・

色コードで色々試した結果、

下のような16色の背景色を出力するのに成功しました！

この色は0x0001 などのコードを入力して出力された色から逆にhtmlの色コードのcolor名に当てはめたものです。実際にこの色コードが存在するものかどうかは?です。

ソースの中のコメントに記述している【#000080】などのコード色はhtmlの色コードなのでC言語には関係ありませんが、色々コードを使って試している時にわからなくなりそうだったもので記述しました^^;

#include <windows.h>
#include <stdio.h>
#include <wincon.h>


//文字色の色コード

#define  NAVY            0x0001        //#000080←htmlの色コード　
#define  BREEN           0x0002        //#008000
#define  TEAL            0x0003        //#008080
#define  MAROON          0x0004        //#800000
#define  PURPLE          0x0005        //#800080
#define  OLIVE           0x0006        //#808000
#define  SILVER          0x0007        //#c0c0c0
#define  GRAY            0x0008        //#808080
#define  BLUE            0x0009        //#0000ff
#define  BLACK           0x0010        //#000000
#define  LIME            0x0002|0x0008 //#00ff00
#define  CYAN            0x0002|0x0009 //#00ffff
#define  RED             0x0004|0x0008 //#ff0000
#define  MAGENTA         0x0004|0x0009 //#ff00ff
#define  YELLOW          0x0006|0x0008 //#ffff00
#define  WITE            0x0006|0x0009 //#ffffff


//背景色の色コード


#define  B_NAVY            0x0010        //#000080
#define  B_BREEN           0x0020        //#008000
#define  B_TEAL            0x0030        //#008080
#define  B_MAROON          0x0040        //#800000
#define  B_PURPLE          0x0050        //#800080
#define  B_OLIVE           0x0060        //#808000
#define  B_SILVER          0x0070        //#c0c0c0
#define  B_GRAY            0x0080        //#808080
#define  B_BLUE            0x0090        //#0000ff
#define  B_BLACK           0x0100        //#000000
#define  B_LIME            0x0020|0x0080 //#00ff00
#define  B_CYAN            0x0020|0x0090 //#00ffff
#define  B_RED             0x0040|0x0080 //#ff0000
#define  B_MAGENTA         0x0040|0x0090 //#ff00ff
#define  B_YELLOW          0x0060|0x0080 //#ffff00
#define  B_WITE            0x0060|0x0090 //#ffffff




/********************************************************************************************************
       
	     以下の構文を

		 SetConsoleTextAttribute(                                                                     
		      GetStdHandle(STD_OUTPUT_HANDLE),                                                         
　　　        0x05|0x0020|0x0010);                              

　　　　　
         SET(COLOR, 文字色 | 背景色)　で色の設定ができるように#defineに文字を置き換え

 
********************************************************************************************************/

 //SetConsoleTextAttribute(GetStdHandleをSETに置き換え

#define  SET SetConsoleTextAttribute(GetStdHandle 

 //STD_OUTPUT_HANDLE)をCOLORに置き換え

#define  COLOR STD_OUTPUT_HANDLE)

#include <windows.h>

#include <stdio.h>

#include <wincon.h>

//文字色の色コード

#define NAVY 0x0001 //#000080←htmlの色コード　

#define BREEN 0x0002 //#008000

#define TEAL 0x0003 //#008080

#define MAROON 0x0004 //#800000

#define PURPLE 0x0005 //#800080

#define OLIVE 0x0006 //#808000

#define SILVER 0x0007 //#c0c0c0

#define GRAY 0x0008 //#808080

#define BLUE 0x0009 //#0000ff

#define BLACK 0x0010 //#000000

#define LIME 0x0002|0x0008 //#00ff00

#define CYAN 0x0002|0x0009 //#00ffff

#define RED 0x0004|0x0008 //#ff0000

#define MAGENTA 0x0004|0x0009 //#ff00ff

#define YELLOW 0x0006|0x0008 //#ffff00

#define WITE 0x0006|0x0009 //#ffffff

//背景色の色コード

#define B_NAVY 0x0010 //#000080

#define B_BREEN 0x0020 //#008000

#define B_TEAL 0x0030 //#008080

#define B_MAROON 0x0040 //#800000

#define B_PURPLE 0x0050 //#800080

#define B_OLIVE 0x0060 //#808000

#define B_SILVER 0x0070 //#c0c0c0

#define B_GRAY 0x0080 //#808080

#define B_BLUE 0x0090 //#0000ff

#define B_BLACK 0x0100 //#000000

#define B_LIME 0x0020|0x0080 //#00ff00

#define B_CYAN 0x0020|0x0090 //#00ffff

#define B_RED 0x0040|0x0080 //#ff0000

#define B_MAGENTA 0x0040|0x0090 //#ff00ff

#define B_YELLOW 0x0060|0x0080 //#ffff00

#define B_WITE 0x0060|0x0090 //#ffffff

/********************************************************************************************************

以下の構文を

SetConsoleTextAttribute(

GetStdHandle(STD_OUTPUT_HANDLE),

　　　 0x05|0x0020|0x0010);

SET(COLOR, 文字色 | 背景色)　で色の設定ができるように#defineに文字を置き換え

********************************************************************************************************/

//SetConsoleTextAttribute(GetStdHandleをSETに置き換え

#define SET SetConsoleTextAttribute(GetStdHandle

//STD_OUTPUT_HANDLE)をCOLORに置き換え

#define COLOR STD_OUTPUT_HANDLE)

とりあえず、使いたい時にだけincludeできればいいので、

ヘッダファイルに保存することにしました。

念のため下のソースを試してみると・・・

#include <stdio.h>
#include "color16.h"


int main(void)
{
			
	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0001 | 0x0020|0x0080); printf("Hello, World!");
	
	SET(COLOR, 0x0001 | 0x0020|0x0090); printf("Hello, World!");
	
	SET(COLOR, 0x0001 | 0x0040|0x0080); printf("Hello, World!");

	SET(COLOR, 0x0001 | 0x0040|0x0090); printf("Hello, World!");

	SET(COLOR, 0x0001 | 0x0060|0x0080) ; printf("Hello, World!");
	
	SET(COLOR, 0x0001 | 0x0060|0x0090); printf("Hello, World!\n");


	
	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0002 | 0x0020 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0002 | 0x0020 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0002 | 0x0040 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0002 | 0x0040 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0002 | 0x0060 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0002 | 0x0060 | 0x0090); printf("Hello, World!\n");

	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0003 | 0x0020 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0003| 0x0020 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0003 | 0x0040 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0003 | 0x0040 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0003 | 0x0060 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0003 | 0x0060 | 0x0090); printf("Hello, World!\n");

	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0004 | 0x0020 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0004 | 0x0020 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0004 | 0x0040 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0004 | 0x0040 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0004 | 0x0060 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0004 | 0x0060 | 0x0090); printf("Hello, World!\n");

	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0005 | 0x0020 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0005 | 0x0020 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0005 | 0x0040 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0005 | 0x0040 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0005 | 0x0060 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0005 | 0x0060 | 0x0090); printf("Hello, World!\n");

	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0006 | 0x0020 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0006 | 0x0020 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0006 | 0x0040 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0006 | 0x0040 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0006 | 0x0060 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0006 | 0x0060 | 0x0090); printf("Hello, World!\n");

	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0007 | 0x0020 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0007 | 0x0020 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0007 | 0x0040 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0007 | 0x0040 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0007 | 0x0060 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0007 | 0x0060 | 0x0090); printf("Hello, World!\n");

	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0008 | 0x0020 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0008 | 0x0020 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0008 | 0x0040 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0008 | 0x0040 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0008 | 0x0060 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0008 | 0x0060 | 0x0090); printf("Hello, World!\n");

	SET(COLOR, 0x0f); printf("\t\t\t  ");
	SET(COLOR, 0x0009 | 0x0020 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0009 | 0x0020 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0009 | 0x0040 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0009 | 0x0040 | 0x0090); printf("Hello, World!");

	SET(COLOR, 0x0009 | 0x0060 | 0x0080); printf("Hello, World!");

	SET(COLOR, 0x0009 | 0x0060 | 0x0090); printf("Hello, World!\n\n");

	SET(COLOR, 0x0f); printf("\t\t\t  ");
	

	return 0;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

#include <stdio.h>

#include "color16.h"

int main(void)

{

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0001 | 0x0020|0x0080); printf("Hello, World!");

SET(COLOR, 0x0001 | 0x0020|0x0090); printf("Hello, World!");

SET(COLOR, 0x0001 | 0x0040|0x0080); printf("Hello, World!");

SET(COLOR, 0x0001 | 0x0040|0x0090); printf("Hello, World!");

SET(COLOR, 0x0001 | 0x0060|0x0080) ; printf("Hello, World!");

SET(COLOR, 0x0001 | 0x0060|0x0090); printf("Hello, World!\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0002 | 0x0020 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0002 | 0x0020 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0002 | 0x0040 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0002 | 0x0040 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0002 | 0x0060 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0002 | 0x0060 | 0x0090); printf("Hello, World!\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0003 | 0x0020 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0003| 0x0020 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0003 | 0x0040 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0003 | 0x0040 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0003 | 0x0060 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0003 | 0x0060 | 0x0090); printf("Hello, World!\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0004 | 0x0020 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0004 | 0x0020 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0004 | 0x0040 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0004 | 0x0040 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0004 | 0x0060 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0004 | 0x0060 | 0x0090); printf("Hello, World!\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0005 | 0x0020 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0005 | 0x0020 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0005 | 0x0040 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0005 | 0x0040 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0005 | 0x0060 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0005 | 0x0060 | 0x0090); printf("Hello, World!\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0006 | 0x0020 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0006 | 0x0020 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0006 | 0x0040 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0006 | 0x0040 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0006 | 0x0060 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0006 | 0x0060 | 0x0090); printf("Hello, World!\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0007 | 0x0020 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0007 | 0x0020 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0007 | 0x0040 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0007 | 0x0040 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0007 | 0x0060 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0007 | 0x0060 | 0x0090); printf("Hello, World!\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0008 | 0x0020 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0008 | 0x0020 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0008 | 0x0040 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0008 | 0x0040 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0008 | 0x0060 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0008 | 0x0060 | 0x0090); printf("Hello, World!\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

SET(COLOR, 0x0009 | 0x0020 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0009 | 0x0020 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0009 | 0x0040 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0009 | 0x0040 | 0x0090); printf("Hello, World!");

SET(COLOR, 0x0009 | 0x0060 | 0x0080); printf("Hello, World!");

SET(COLOR, 0x0009 | 0x0060 | 0x0090); printf("Hello, World!\n\n");

SET(COLOR, 0x0f); printf("\t\t\t ");

return 0;

}

無事動作確認!!

次回は、本題のメニュー画面作成に入りたいと思います。

2018年5月6日2018年5月6日

VisualStudio2017 【C言語】文字色(14色)背景色(RGB3原色)で表示に成功!

５月連休も最終日。昨日までの天気はどこへ？、車も今にも止まりそうな勢いなので、どこにも行かず・・仕事？今は・・・プーさんです(笑)

なので、以前からしてみたかったC言語のお勉強してます!!

C言語に関しては、土素人で只今、学びの最中の備忘録ですので、失敗するとこが多いと思います。

プロの方から見ると何やってんだろう!!って感じですよね。なので先に誤っておきます。ごめんなさい<(_ _)>

さて、前回はアホなアクシデントがありましたが、やっと背景色と文字色の指定に成功しました！

DLL化も検討していたのですが、先に、ソースのみで表示されないことにはDLL化してもどうしようもないので、今回はマクロ機能を作って少しだけ文字の入力が少なくて済むようにしてみました。

参考にさせていただいたのはC++のダブルバッファで使用されている色コードでNobuhide Tsudaさんのサイトなのですが、この色コードを自分専用に書き換えて使用さてせ頂きました。

私が購入したC言語のプログラミングの本には記載がなかったもので、悪戦苦闘しましたが(笑)

変なことしてたら、怒ってください。

でも。私の(#^.^#)顔はひっぱたかないでね(^_-)-☆

使用しているOS:Windows7 64bit

開発環境:VisualStudioCommunity2017
Visual C++ 空のプロジェクト win32 x86で作っています。

VisualStudio2017【C言語】自作マクロで使えた色

#define  T_BLACK   0x00
#define  T_DARK_BLUE       0x01
#define  T_DARK_GREEN 0x02
#define  T_DARK_CYAN       0x03
#define  T_DARK_RED     0x04
#define  T_DARK_VIOLET  0x05
#define  T_DARK_YELLOW   0x06
#define  T_GRAY 0x07
#define  T_LIGHT_GRAY      0x08
#define  T_BLUE     0x09
#define  T_GREEN   0x0a
#define  T_CYAN     0x0b
#define  T_RED      0x0c
#define  T_VIOLET  0x0d
#define  T_YELLOW 0x0e
#define  T_WHITE   0x0f
#define  T_INTENSITY     0x08     // 高輝度マスク
#define  T_RED_MASK     0x04     // 赤色ビット
#define  T_GREEN_MASK 0x02     // 緑色ビット
#define  T_BLUE_MASK   0x01     //  青色ビット

#define  B_RED  BACKGROUND_RED //赤
#define  B_GREEN BACKGROUND_GREEN　//緑
#define  B_BLUE  BACKGROUND_BLUE　//青
#define  B_INTENSITY BACKGROUND_INTENSITY //強調
#define  B_WHITE BACKGROUND_BLUE|BACKGROUND_RED|BACKGROUND_GREEN //白

#define T_BLACK 0x00

#define T_DARK_BLUE 0x01

#define T_DARK_GREEN 0x02

#define T_DARK_CYAN 0x03

#define T_DARK_RED 0x04

#define T_DARK_VIOLET 0x05

#define T_DARK_YELLOW 0x06

#define T_GRAY 0x07

#define T_LIGHT_GRAY 0x08

#define T_BLUE 0x09

#define T_GREEN 0x0a

#define T_CYAN 0x0b

#define T_RED 0x0c

#define T_VIOLET 0x0d

#define T_YELLOW 0x0e

#define T_WHITE 0x0f

#define T_INTENSITY 0x08 // 高輝度マスク

#define T_RED_MASK 0x04 // 赤色ビット

#define T_GREEN_MASK 0x02 // 緑色ビット

#define T_BLUE_MASK 0x01 // 青色ビット

#define B_RED BACKGROUND_RED //赤

#define B_GREEN BACKGROUND_GREEN　//緑

#define B_BLUE BACKGROUND_BLUE　//青

#define B_INTENSITY BACKGROUND_INTENSITY //強調

#define B_WHITE BACKGROUND_BLUE|BACKGROUND_RED|BACKGROUND_GREEN //白

こんな感じに無事背景色の色も表示されました!(^^)!

下のソースは、使えなかったのものですが・・

#define  B_CYAN BACKGROUND_BLUE|BACKGROUND_GREEN　//シアン
#define  B_YELLOW BACKGROUND_GREEN|BACKGROUND_RED　//イエロー
#define  B_MAGENTA BACKGROUND_BLUE|BACKGROUND_RED　//マゼンダ
#define  B_RED_I  BACKGROUND_RED|BACKGROUND_INTENSITY //明るい赤
#define  B_GREEN_I BACKGROUND_GREEN|BACKGROUND_INTENSITY　//明るい緑
#define  B_BLUE_I  BACKGROUND_BLUE|BACKGROUND_INTENSITY　//明るい青
#define  B_WHITE_I BACKGROUND_BLUE|BACKGROUND_RED|BACKGROUND_GREEN|BACKGROUND_INTENSITY //明るい白

#define B_CYAN BACKGROUND_BLUE|BACKGROUND_GREEN　//シアン

#define B_YELLOW BACKGROUND_GREEN|BACKGROUND_RED　//イエロー

#define B_MAGENTA BACKGROUND_BLUE|BACKGROUND_RED　//マゼンダ

#define B_RED_I BACKGROUND_RED|BACKGROUND_INTENSITY //明るい赤

#define B_GREEN_I BACKGROUND_GREEN|BACKGROUND_INTENSITY　//明るい緑

#define B_BLUE_I BACKGROUND_BLUE|BACKGROUND_INTENSITY　//明るい青

#define B_WHITE_I BACKGROUND_BLUE|BACKGROUND_RED|BACKGROUND_GREEN|BACKGROUND_INTENSITY //明るい白

重大度レベルコード説明プロジェクトファイル行抑制状態
エラー (アクティブ) E0007 認識されないトークンです。

重大度レベルコード説明プロジェクトファイル行抑制状態
エラー C3872 ‘0x3000’: この文字を識別子で使用することはできません。

とたくさん怒られてしまいました(>_<)

VisualStudio2017でエスケープシーケンスを使ってみる

もう一度基礎からC言語さんの

第47回特殊な画面制御～コンソール入出力関数とエスケープシーケンス

のペーシに下記のようなソースがあったので試してみたのですが・・・

#include <stdio.h>

int main(void)
{
  printf("¥033[2J");   /* 画面をクリア */
  printf("¥033[5;10H"); /* カーソルを移動 */
  printf("¥033[33m");   /* 文字色を黄色に */
  printf("Hello!¥n");  /* メッセージを出力 */

  printf("Press [Enter]...¥n");  /* メッセージを出力 */
  (void)getchar();     /* キー入力を待つ */
  printf("¥033[93m");   /* 文字色を標準に */
  return (0);
}

#include <stdio.h>

int main(void)

{

printf("¥033[2J"); /* 画面をクリア */

printf("¥033[5;10H"); /* カーソルを移動 */

printf("¥033[33m"); /* 文字色を黄色に */

printf("Hello!¥n"); /* メッセージを出力 */

printf("Press [Enter]...¥n"); /* メッセージを出力 */

(void)getchar(); /* キー入力を待つ */

printf("¥033[93m"); /* 文字色を標準に */

return (0);

}

VisualStudio2017で、配色などのエスケープシーケンスが使えなかった?・・・というより保存するにはUnicodeか違うエンコードで!!と言われてしまいました。

エスケープシーケンスで画面を表示しようとしたらこんな感じで・・・

使えないというよりUnicodeなんかで保存されたら、後々困りそうだから・・・やめときます。

　VisualStudioで使えたエスケープシーケンス

VisualStudioで使えるエスケープシーケンスは少しだけでした。

現在の全てのソースはこんな感じなんですが・・

#include <stdio.h>
#include <conio.h>
#include <windows.h>


#define  T_BLACK   0x00
#define  T_DARK_BLUE       0x01
#define  T_DARK_GREEN 0x02
#define  T_DARK_CYAN       0x03
#define  T_DARK_RED     0x04
#define  T_DARK_VIOLET  0x05
#define  T_DARK_YELLOW   0x06
#define  T_GRAY 0x07
#define  T_LIGHT_GRAY      0x08
#define  T_BLUE     0x09
#define  T_GREEN   0x0a
#define  T_CYAN     0x0b
#define  T_RED      0x0c
#define  T_VIOLET  0x0d
#define  T_YELLOW 0x0e
#define  T_WHITE   0x0f
#define  T_INTENSITY     0x08     // 高輝度マスク
#define  T_RED_MASK     0x04     // 赤色ビット
#define  T_GREEN_MASK 0x02     // 緑色ビット
#define  T_BLUE_MASK   0x01     //  青色ビット

#define  B_RED  BACKGROUND_RED //赤
#define  B_GREEN BACKGROUND_GREEN　//緑
#define  B_BLUE  BACKGROUND_BLUE　//青
#define  B_INTENSITY BACKGROUND_INTENSITY //強調
#define  B_WHITE BACKGROUND_BLUE|BACKGROUND_RED|BACKGROUND_GREEN //白
#define  B_CYAN BACKGROUND_BLUE|BACKGROUND_GREEN　//シアン
#define  B_YELLOW BACKGROUND_GREEN|BACKGROUND_RED　//イエロー
#define  B_MAGENTA BACKGROUND_BLUE|BACKGROUND_RED　//マゼンダ
#define  B_RED_I  BACKGROUND_RED|BACKGROUND_INTENSITY //明るい赤
#define  B_GREEN_I BACKGROUND_GREEN|BACKGROUND_INTENSITY　//明るい緑
#define  B_BLUE_I  BACKGROUND_BLUE|BACKGROUND_INTENSITY　//明るい青
#define  B_WHITE_I BACKGROUND_BLUE|BACKGROUND_RED|BACKGROUND_GREEN|BACKGROUND_INTENSITY //明るい白

int main()

{
	HANDLE hStdoutHandle = GetStdHandle(STD_OUTPUT_HANDLE);

	SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_GREEN | BACKGROUND_RED | BACKGROUND_INTENSITY | T_BLACK);
	printf("背景黄色文字黒\n");
	SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_BLUE | BACKGROUND_RED | BACKGROUND_INTENSITY | T_BLUE);
	printf("背景マゼンダ文字ブルー\n");
	SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_RED | BACKGROUND_INTENSITY | T_DARK_GREEN);
	printf("背景赤文字グリーン\n");
	SetConsoleTextAttribute(hStdoutHandle, T_CYAN);
	printf("背景指定なし文字シアン\n");
	SetConsoleTextAttribute(hStdoutHandle, T_DARK_RED);
	printf("背景指定なしダークレッド\n");
	SetConsoleTextAttribute(hStdoutHandle, T_DARK_VIOLET);
	printf("背景指定なし文字ダークバイオレッド\n");
	SetConsoleTextAttribute(hStdoutHandle, T_DARK_YELLOW);
	printf("背景指定なし文字ダークイエロー\n");
	SetConsoleTextAttribute(hStdoutHandle, T_GRAY);
	printf("背景指定なし文字グレー\n");
	SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_BLUE | BACKGROUND_INTENSITY | T_CYAN);
	printf("背景明るい青。文字シアン\n");
	SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_GREEN | BACKGROUND_INTENSITY | FOREGROUND_RED);
	printf("背景明るい緑。文字赤。\n");


	return 0;
}

#include <stdio.h>

#include <conio.h>

#include <windows.h>

#define T_BLACK 0x00

#define T_DARK_BLUE 0x01

#define T_DARK_GREEN 0x02

#define T_DARK_CYAN 0x03

#define T_DARK_RED 0x04

#define T_DARK_VIOLET 0x05

#define T_DARK_YELLOW 0x06

#define T_GRAY 0x07

#define T_LIGHT_GRAY 0x08

#define T_BLUE 0x09

#define T_GREEN 0x0a

#define T_CYAN 0x0b

#define T_RED 0x0c

#define T_VIOLET 0x0d

#define T_YELLOW 0x0e

#define T_WHITE 0x0f

#define T_INTENSITY 0x08 // 高輝度マスク

#define T_RED_MASK 0x04 // 赤色ビット

#define T_GREEN_MASK 0x02 // 緑色ビット

#define T_BLUE_MASK 0x01 // 青色ビット

#define B_RED BACKGROUND_RED //赤

#define B_GREEN BACKGROUND_GREEN　//緑

#define B_BLUE BACKGROUND_BLUE　//青

#define B_INTENSITY BACKGROUND_INTENSITY //強調

#define B_WHITE BACKGROUND_BLUE|BACKGROUND_RED|BACKGROUND_GREEN //白

#define B_CYAN BACKGROUND_BLUE|BACKGROUND_GREEN　//シアン

#define B_YELLOW BACKGROUND_GREEN|BACKGROUND_RED　//イエロー

#define B_MAGENTA BACKGROUND_BLUE|BACKGROUND_RED　//マゼンダ

#define B_RED_I BACKGROUND_RED|BACKGROUND_INTENSITY //明るい赤

#define B_GREEN_I BACKGROUND_GREEN|BACKGROUND_INTENSITY　//明るい緑

#define B_BLUE_I BACKGROUND_BLUE|BACKGROUND_INTENSITY　//明るい青

#define B_WHITE_I BACKGROUND_BLUE|BACKGROUND_RED|BACKGROUND_GREEN|BACKGROUND_INTENSITY //明るい白

int main()

{

HANDLE hStdoutHandle = GetStdHandle(STD_OUTPUT_HANDLE);

SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_GREEN | BACKGROUND_RED | BACKGROUND_INTENSITY | T_BLACK);

printf("背景黄色文字黒\n");

SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_BLUE | BACKGROUND_RED | BACKGROUND_INTENSITY | T_BLUE);

printf("背景マゼンダ文字ブルー\n");

SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_RED | BACKGROUND_INTENSITY | T_DARK_GREEN);

printf("背景赤文字グリーン\n");

SetConsoleTextAttribute(hStdoutHandle, T_CYAN);

printf("背景指定なし文字シアン\n");

SetConsoleTextAttribute(hStdoutHandle, T_DARK_RED);

printf("背景指定なしダークレッド\n");

SetConsoleTextAttribute(hStdoutHandle, T_DARK_VIOLET);

printf("背景指定なし文字ダークバイオレッド\n");

SetConsoleTextAttribute(hStdoutHandle, T_DARK_YELLOW);

printf("背景指定なし文字ダークイエロー\n");

SetConsoleTextAttribute(hStdoutHandle, T_GRAY);

printf("背景指定なし文字グレー\n");

SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_BLUE | BACKGROUND_INTENSITY | T_CYAN);

printf("背景明るい青。文字シアン\n");

SetConsoleTextAttribute(hStdoutHandle, BACKGROUND_GREEN | BACKGROUND_INTENSITY | FOREGROUND_RED);

printf("背景明るい緑。文字赤。\n");

return 0;

}

これでは色が色々な所から呼ばれているようでもっとスマートに、でも後々のことを考えると色の配色が沢山欲しいと思い

SetConsoleTextAttributeで検索してみると・・・

SetConsoleTextAttribute

Microsoftのコンソールリファレンスに

BOOL SetConsoleTextAttribute( HANDLE hConsoleOutput, // コンソールスクリーンバッファのハンドル WORD wAttributes // テキストと背景の色

があり「ヘッダー：wincon.h 内で宣言」と書かれてあったので、「wincon.h」を見てみると

#define FOREGROUND_BLUE      0x0001 // text color contains blue.
#define FOREGROUND_GREEN     0x0002 // text color contains green.
#define FOREGROUND_RED       0x0004 // text color contains red.
#define FOREGROUND_INTENSITY 0x0008 // text color is intensified.
#define BACKGROUND_BLUE      0x0010 // background color contains blue.
#define BACKGROUND_GREEN     0x0020 // background color contains green.
#define BACKGROUND_RED       0x0040 // background color contains red.
#define BACKGROUND_INTENSITY 0x0080 // background color is intensified.

#define FOREGROUND_BLUE 0x0001 // text color contains blue.

#define FOREGROUND_GREEN 0x0002 // text color contains green.

#define FOREGROUND_RED 0x0004 // text color contains red.

#define FOREGROUND_INTENSITY 0x0008 // text color is intensified.

#define BACKGROUND_BLUE 0x0010 // background color contains blue.

#define BACKGROUND_GREEN 0x0020 // background color contains green.

#define BACKGROUND_RED 0x0040 // background color contains red.

#define BACKGROUND_INTENSITY 0x0080 // background color is intensified.

がありましたが、RBG色と同じ配色で少ない。

無理矢理#define に入れようとするとVisualStudioに怒られたこともあるので、思考を変え　Nobuhide Tsudaさんの色コードを改良してもう少し入力文字数が少なくて済むようにしてみることにしました。

SET(COLOR,文字色|背景色);で色指定できるように変更

//文字色の設定
#define  T_BLACK   0x00
#define  T_DARK_BLUE       0x01
#define  T_DARK_GREEN 0x02
#define  T_DARK_CYAN       0x03
#define  T_DARK_RED     0x04
#define  T_DARK_VIOLET  0x05
#define  T_DARK_YELLOW   0x06
#define  T_GRAY 0x07
#define  T_LIGHT_GRAY      0x08
#define  T_BLUE     0x09
#define  T_GREEN   0x0a
#define  T_CYAN     0x0b
#define  T_RED      0x0c
#define  T_VIOLET  0x0d
#define  T_YELLOW 0x0e
#define  T_WHITE   0x0f
#define  T_INTENSITY     0x08     // 高輝度マスク

//背景色の設定
#define  BT_BLACK   0x00
#define  BT_DARK_BLUE       0x01
#define  BT_DARK_GREEN 0x02
#define  BT_DARK_CYAN       0x03
#define  BT_DARK_RED     0x04
#define  BT_DARK_VIOLET  0x05
#define  BT_DARK_YELLOW   0x06
#define  BT_GRAY  0x07
#define  BT_LIGHT_GRAY      0x08
#define  BT_BLUE     0x09
#define  BT_GREEN   0x0a
#define  BT_CYAN     0x0b
#define  BT_RED      0x0c
#define  BT_VIOLET  0x0d
#define  BT_YELLOW 0x0e
#define  BT_WHITE   0x0f
#define  BT_INTENSITY     0x08     // 高輝度マスク


// SET(COLOR, 文字色 | 背景色)で色の設定ができるように#defineに文字を代入
#define  SET SetConsoleTextAttribute //SetConsoleTextAttributeをSETに代入
#define  COLOR hStdoutHandle //hStdoutHandleをCOLORに代入

//文字色の設定

#define T_BLACK 0x00

#define T_DARK_BLUE 0x01

#define T_DARK_GREEN 0x02

#define T_DARK_CYAN 0x03

#define T_DARK_RED 0x04

#define T_DARK_VIOLET 0x05

#define T_DARK_YELLOW 0x06

#define T_GRAY 0x07

#define T_LIGHT_GRAY 0x08

#define T_BLUE 0x09

#define T_GREEN 0x0a

#define T_CYAN 0x0b

#define T_RED 0x0c

#define T_VIOLET 0x0d

#define T_YELLOW 0x0e

#define T_WHITE 0x0f

#define T_INTENSITY 0x08 // 高輝度マスク

//背景色の設定

#define BT_BLACK 0x00

#define BT_DARK_BLUE 0x01

#define BT_DARK_GREEN 0x02

#define BT_DARK_CYAN 0x03

#define BT_DARK_RED 0x04

#define BT_DARK_VIOLET 0x05

#define BT_DARK_YELLOW 0x06

#define BT_GRAY 0x07

#define BT_LIGHT_GRAY 0x08

#define BT_BLUE 0x09

#define BT_GREEN 0x0a

#define BT_CYAN 0x0b

#define BT_RED 0x0c

#define BT_VIOLET 0x0d

#define BT_YELLOW 0x0e

#define BT_WHITE 0x0f

#define BT_INTENSITY 0x08 // 高輝度マスク

// SET(COLOR, 文字色 | 背景色)で色の設定ができるように#defineに文字を代入

#define SET SetConsoleTextAttribute //SetConsoleTextAttributeをSETに代入

#define COLOR hStdoutHandle //hStdoutHandleをCOLORに代入

これなら、キーボードからの入力文字数が少なくて済みそうです。

でも、いざ試してみるとこんな感じ・・・

左上から背景が黒・右上がの背景は、ダークブルー

左下の背景はダークグリーン。右下の背景は白にしたのですが、綺麗に表示されたのは黒のみでした(T_T)

文字のみだと綺麗に表示されるのですが、背景を指定するのは、

背景色は、やっぱりRGB色を使うしかないみたいです。

下のコードも試したのですが・・・これもVisualStudioに怒られてしまいました^^;

//RBG文字色の設定


#define  F_RED   0x0004 //赤
#define  F_GREEN 　0x0002 //緑
#define  F_BLUE  　0x0001 //青
#define  F_INTENSITY 0x008//強調
#define  F_WHITE  0x0001|0x0004|0x0002//白
#define  F_CYAN 　0x0001|0x0002 //シアン
#define  F_YELLOW 0x0002|0x0004 //イエロー
#define  F_MAGENTA 0x0001|0x0004 //マゼンダ
#define  F_RED_I   0x0004|0x0008 //明るい赤
#define  F_GREEN_I 0x0002|0x0008//明るい緑
#define  F_BLUE_I  0x0001|0x0008//明るい青


//RGB背景色設定


#define  B_RED   0x0040 //赤
#define  B_GREEN 　0x0020 //緑
#define  B_BLUE  　0x0010 //青
#define  B_INTENSITY 0x0080//強調
#define  B_WHITE  0x0010|0x0040|0x0020//白
#define  B_CYAN 　0x0010|0x0020 //シアン
#define  B_YELLOW 0x0020|0x0040 //イエロー
#define  B_MAGENTA 0x0010|0x0040 //マゼンダ
#define  B_RED_I   0x0040|0x0080 //明るい赤
#define  B_GREEN_I 0x0020|0x0080//明るい緑
#define  B_BLUE_I  0x0010|0x0080//明るい青

//RBG文字色の設定

#define F_RED 0x0004 //赤

#define F_GREEN 　0x0002 //緑

#define F_BLUE 　0x0001 //青

#define F_INTENSITY 0x008//強調

#define F_WHITE 0x0001|0x0004|0x0002//白

#define F_CYAN 　0x0001|0x0002 //シアン

#define F_YELLOW 0x0002|0x0004 //イエロー

#define F_MAGENTA 0x0001|0x0004 //マゼンダ

#define F_RED_I 0x0004|0x0008 //明るい赤

#define F_GREEN_I 0x0002|0x0008//明るい緑

#define F_BLUE_I 0x0001|0x0008//明るい青

//RGB背景色設定

#define B_RED 0x0040 //赤

#define B_GREEN 　0x0020 //緑

#define B_BLUE 　0x0010 //青

#define B_INTENSITY 0x0080//強調

#define B_WHITE 0x0010|0x0040|0x0020//白

#define B_CYAN 　0x0010|0x0020 //シアン

#define B_YELLOW 0x0020|0x0040 //イエロー

#define B_MAGENTA 0x0010|0x0040 //マゼンダ

#define B_RED_I 0x0040|0x0080 //明るい赤

#define B_GREEN_I 0x0020|0x0080//明るい緑

#define B_BLUE_I 0x0010|0x0080//明るい青

結局、背景色は自作マクロでは呼び出さず、ソースに記途しました。

まぁ、こんなものですかね。

中央の画像は、BACKGROUND_INTENSITYを+したもので残りは、そのままの色です。

最終的に上の画像が実行できたソースは下のソースでした。

#include <windows.h>
#include <stdio.h>
#include <conio.h>

//文字色の設定
#define  T_BLACK   0x00
#define  T_DARK_BLUE       0x01
#define  T_DARK_GREEN 0x02
#define  T_DARK_CYAN       0x03
#define  T_DARK_RED     0x04
#define  T_DARK_VIOLET  0x05
#define  T_DARK_YELLOW   0x06
#define  T_GRAY 0x07
#define  T_LIGHT_GRAY      0x08
#define  T_BLUE     0x09
#define  T_GREEN   0x0a
#define  T_CYAN     0x0b
#define  T_RED      0x0c
#define  T_VIOLET  0x0d
#define  T_YELLOW 0x0e
#define  T_WHITE   0x0f
#define  T_INTENSITY     0x08     // 高輝度マスク
#define  T_RED_MASK     0x04     // 赤色ビット
#define  T_GREEN_MASK 0x02     // 緑色ビット
#define  T_BLUE_MASK   0x01     //  青色ビット



// SET(COLOR, 文字色 | 背景色)で色の設定ができるように#defineに文字を代入
#define  SET SetConsoleTextAttribute //SetConsoleTextAttributeをSETに代入
#define  COLOR hStdoutHandle //hStdoutHandleをCOLORに代入


int main(void)

{
	HANDLE hStdoutHandle = GetStdHandle(STD_OUTPUT_HANDLE);
	
		

	SET(COLOR, BACKGROUND_BLUE | T_BLACK); printf("背景BLUE文字BLACK\n");
	SET(COLOR, BACKGROUND_BLUE | T_DARK_BLUE); printf("背景BLUE文字DARK_BLUE\n");
	SET(COLOR, BACKGROUND_BLUE | T_DARK_GREEN); printf("背景BLUE文字DARK_GREEN\n");
	SET(COLOR, BACKGROUND_BLUE | T_DARK_RED); printf("背景BLUE文字DARE_RED\n");
	SET(COLOR, BACKGROUND_BLUE | T_DARK_VIOLET); printf("背景BLUE文字DARK_VIOLET\n");
	SET(COLOR, BACKGROUND_BLUE | T_GRAY); printf("背景BLUE文字GRAY\n");
	SET(COLOR, BACKGROUND_BLUE | T_LIGHT_GRAY); printf("背景BLUE文字GRAY\n");
	SET(COLOR, BACKGROUND_BLUE | T_BLUE); printf("背景BLUE文字BLUE\n");
	SET(COLOR, BACKGROUND_BLUE | T_CYAN); printf("背景BLUE文字CYAN\n");
	SET(COLOR, BACKGROUND_BLUE | T_RED); printf("背景BLUE文字RED\n");
	SET(COLOR, BACKGROUND_BLUE | T_VIOLET); printf("背景BLUE文字VIOLET\n");
	SET(COLOR, BACKGROUND_BLUE | T_GREEN); printf("背景BLUE文字YYLLOW\n");
	SET(COLOR, BACKGROUND_BLUE | T_WHITE); printf("背景BLUE文字WHITE\n\n");
	SET(COLOR, T_WHITE | T_WHITE); 		

	return 0;
}

#include <windows.h>

#include <stdio.h>

#include <conio.h>

//文字色の設定

#define T_BLACK 0x00

#define T_DARK_BLUE 0x01

#define T_DARK_GREEN 0x02

#define T_DARK_CYAN 0x03

#define T_DARK_RED 0x04

#define T_DARK_VIOLET 0x05

#define T_DARK_YELLOW 0x06

#define T_GRAY 0x07

#define T_LIGHT_GRAY 0x08

#define T_BLUE 0x09

#define T_GREEN 0x0a

#define T_CYAN 0x0b

#define T_RED 0x0c

#define T_VIOLET 0x0d

#define T_YELLOW 0x0e

#define T_WHITE 0x0f

#define T_INTENSITY 0x08 // 高輝度マスク

#define T_RED_MASK 0x04 // 赤色ビット

#define T_GREEN_MASK 0x02 // 緑色ビット

#define T_BLUE_MASK 0x01 // 青色ビット

// SET(COLOR, 文字色 | 背景色)で色の設定ができるように#defineに文字を代入

#define SET SetConsoleTextAttribute //SetConsoleTextAttributeをSETに代入

#define COLOR hStdoutHandle //hStdoutHandleをCOLORに代入

int main(void)

{

HANDLE hStdoutHandle = GetStdHandle(STD_OUTPUT_HANDLE);

SET(COLOR, BACKGROUND_BLUE | T_BLACK); printf("背景BLUE文字BLACK\n");

SET(COLOR, BACKGROUND_BLUE | T_DARK_BLUE); printf("背景BLUE文字DARK_BLUE\n");

SET(COLOR, BACKGROUND_BLUE | T_DARK_GREEN); printf("背景BLUE文字DARK_GREEN\n");

SET(COLOR, BACKGROUND_BLUE | T_DARK_RED); printf("背景BLUE文字DARE_RED\n");

SET(COLOR, BACKGROUND_BLUE | T_DARK_VIOLET); printf("背景BLUE文字DARK_VIOLET\n");

SET(COLOR, BACKGROUND_BLUE | T_GRAY); printf("背景BLUE文字GRAY\n");

SET(COLOR, BACKGROUND_BLUE | T_LIGHT_GRAY); printf("背景BLUE文字GRAY\n");

SET(COLOR, BACKGROUND_BLUE | T_BLUE); printf("背景BLUE文字BLUE\n");

SET(COLOR, BACKGROUND_BLUE | T_CYAN); printf("背景BLUE文字CYAN\n");

SET(COLOR, BACKGROUND_BLUE | T_RED); printf("背景BLUE文字RED\n");

SET(COLOR, BACKGROUND_BLUE | T_VIOLET); printf("背景BLUE文字VIOLET\n");

SET(COLOR, BACKGROUND_BLUE | T_GREEN); printf("背景BLUE文字YYLLOW\n");

SET(COLOR, BACKGROUND_BLUE | T_WHITE); printf("背景BLUE文字WHITE\n\n");

SET(COLOR, T_WHITE | T_WHITE);

return 0;

}

2018年5月3日2018年5月3日

C言語で業務系のシステムを作ってみよう！メニュー画面の文字に色を付ける

前回に引き続き、文字に色を付けてみたいと思います。

前回できたのは、下の画面なんですが、これでは白と黒だけでDOS画面そのものの表示でつまらないので、今回はこれに色を付けたいと思います。

文字に色を付ける

VisualStudioでは、色のエスケープシーケンスはサポートされていないようで四苦八苦^^;

WindowsのDOSのみ有効な手段みたいなので、こちらのサイトを参考に追記させてもらいました。

#include <windows.h>
#include <conio.h>

　　	HANDLE h;
　　　	CONSOLE_SCREEN_BUFFER_INFO csbi;
　　　　
　　　　h = GetStdHandle(STD_OUTPUT_HANDLE); // 標準入出力へのハンドルを得る
　　　　GetConsoleScreenBufferInfo(h, &csbi); // コンソールスクリーンバッファ（現在の状態）を得る

　　　　SetConsoleTextAttribute(h, FOREGROUND_BLUE | FOREGROUND_GREEN);//文字色をシアンに変更
　　　　SetConsoleTextAttribute(h, FOREGROUND_BLUE | FOREGROUND_RED | FOREGROUND_GREEN);//文字色を白に変更
　　　　SetConsoleTextAttribute(h, FOREGROUND_RED);//文字色を赤に変更

シンプルなボーダーライン

立体感のあるシンプルでカラフルなライン

パステルカラーの可愛らしいライン

テキストの長さに合ってラインが可変するサンプルあり

◯でアクセントを付けてみました

可愛らしいパステルカラーと濃いアンダーラインでシンプルに

左右に縦ライン&unicodeの絵文字を使ってみました

アクセントの◯やラインが薄く消えていくグラデーション

display:inline-block;でテキストの長さに合わせる

labelに文字を表示する

もっとわかりやすく表示すると

シンプルな囲い枠

可愛くてシンプルなボーダー線

立体的に窪んだ線

立体的に隆起した線

角を丸くした線

角を丸くした破線

角を丸くした点線

角が変形した不思議な線

こんな使い方もできるよ!

アルバムみたいに

枠を横に並べる

画像と吹き出し枠を横に並べる

C言語ではgoto関数は使わない方がいい?

system(cls)で現在の画面をクリアにする

get char関数を使う時の注意点!

VisualStudio2017【C言語】自作マクロで使えた色

VisualStudio2017でエスケープシーケンスを使ってみる

SetConsoleTextAttribute

SET(COLOR,文字色|背景色);で色指定できるように変更

文字に色を付ける

`display:inline-block;`でテキストの長さに合わせる