あ~、このコードに見出しをつけたーい。とか、ページごとに見出しを違う色にしたーい。とかいうことありません?
ほんとは、CSSがいじれたら楽なんでしょうけど、そこまでスキルのない場合、考えたのがHTML丸ごと打ち。これだと、まんまテキストページに書いてしまえば事足りちゃう。
そんなんでよければ、どうぞおすすみください。
見出しのCSSデザインとそれをHTMLで書く方法ーリボン風も浮いたのもあるよ。
見出しCSSをHTMLに変換しよう♪
サンプルとして、上↑の見出しを例にとってみよう。
次↓のようなCSSコードを例にとる。
あ、サンプルコードは、たくさん拾えますし、後ほどおすすめをご紹介しますので、ご心配なく。
margin:0 0 10px 0;
padding:2px 8px;
border-width:0 0 5px 0;
border-color: #E5EC87;
border-style:solid;
background:#CBDA10;
color:#666600;
line-height:140%;
font-weight:bold;
}
こんなCSSのサンプルがあるとすれば、大事なのは、{}の中だけである。
なので、pink文字を除いたところだけがあればよい。
少し長く感じるが、間を抜くと下記のようになる。
<h● style=”margin:0 0 10px 0;padding:2px 8px;border-width:0 5px;border-color:#CBDA10;border-style:solid;background:#E5EC87;color:#8A950B;line-height:140%;font-weight:bold;text-align:left;“>ここにテキストをいれる</h●>
書き換え方
- ｈ●のところに、希望する見出し数字（h1～ｈ6)を入れる。
- #ではじまる色番号をお好きな色に変更。
border-color:#CBDA10; ←ボーダーの色
background:#E5EC87; ←背景色
color:#8A950B; ←文字の色
シンプルな見出しのHTML
上記だと、ちょっとコードが長すぎるし、そこまで色を付けなくてもというシンプルな見出し、例えば上↑くらいでよいのなら、この↓のコードをお使いください。
変更するところは、次のマーカーの箇所だけです。
<h3 style=”border-left: #00CCCC 8px solid; border-bottom: #00CCCC 2px solid; padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold;”>テキストが入ります</h3>
書き換えは、最初と同じで次の3つだけ。
- ｈ●の変更
- ＃から始まる色コードの変更
- テキスト挿入。
見出しのHTMLの基本形
それでは、わかりやすいようにおまとめします。
好きな見出しのCSSを拾ってきます。多くのサンプルが拾えるのはこちらのNAVERまとめを。
<h● style=”▲▼▲▼▲▼▲▼”>◆テキスト◆</h●>
●見出しの大きさ
▲CSSから拾ったコード
◆テキスト文字
HTML見出しのシンプル系
プロや得意な人は、CSSで簡単に作っていくのでしょうけど、
ページごとに見出しの色を変えるには、さらなるプログラムが必要でしょうし、
そこまでなくても、HTMLをコピペするくらいなら、該当箇所をテキストモードで書き出せばいいことだから、そんなに敷居は高くないと思いました。
まあ、長いコードが多くなるのは、デメリットですが、
CSSが分かるようになるまでは、こちらでもよいかなと思います。
また、この長いコードですが、色ごとにテキストファイルに作っておいてもいいですし、私は、シンプルな見出しをグーグル日本語入力に登録しておきました。
おれんじ → <h3 style=”border-left: #FF9933 8px solid; border-bottom: #FF9933 2px solid; padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold;”>テキストが入ります</h3>
あお → <h3 style=”border-left: #00CCCC 8px solid; border-bottom: #00CCCC 2px solid; padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold;”>テキストが入ります</h3>
きいろ → <h3 style=”border-left: #FFFF33 8px solid; border-bottom: #FFFF33 2px solid; padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold;”>テキストが入ります</h3>
などです。しかし、Windows10は、グーグル日本語は使えても登録できなくなりました。さらにMicrosoft IMEでは、半分の長さくらいまでしか登録できないので、あきらめてテキストにまとめてあります。
Tips:テキストが入ります
特に見出しのｈ1-ｈ6を書かなくても ｈ●のところを 『a』とすれば、このように文字を強調したりもできます。
それでは、HTMLを使って、いろいろな見出しを楽しんでみてください♪
