見出しをデザインする
最初から、ここを見てくださっているユーザさん、覚えていますか？
[第００７号] 見出しタグを知るで触れた、見出しタグのこと。
あの、味気ないページね。
それをちょっとオメカシしてみましょう。
<h1>SEO（サーチエンジン最適化）</h1>
<h2>対策１：ソースコードの簡素化</h2>
<div class="text">従来式のレイアウトテクニックにテーブルレイアウトがある。今日では、従来式のレイアウトから脱出しようとする脱テーブルレイアウトの風潮が追い風を受けている。ソースコードの簡素化がSEO対策の一つとして有効だからだ。</div>
<h2>対策２：タグの最適化</h2>
<div class="text">ソースコードを簡素化するだけでなく、適切なタグを使ったコーディングは、SEO対策として威力を発揮する。見出しには見出し用のタグを使い、リストにはリスト用のタグを使う。タグの役割は、見栄えだけの問題では無いのだ。</div>
</body>
追加したのは、赤字の部分のみです。
あとは、前のまんま（参照⇒「見出しタグを知る」）ですよ。
CSSで設定するのは、h1要素とh2要素、付け足した「text」ですね。
margin: 10px;
padding: 2px 2px 2px 5px;
color: black;
font-size: 125%;
font-weight: bold;
border-left: 20px double black;
background-color: silver;
}
h2 {
margin: 20px 50px;
padding: 2px 2px 2px 5px;
color: #cc0000;
font-size: 100%;
font-weight: normal;
border-left: 15px solid #cc0000;
background-color: #eeeeee;
}
.text {
margin: 20px 50px;
color: black;
font-size: 100%;
font-weight: normal;
line-height: 1.5em;
text-align: left;
}
特に難しいところはないでしょうか。
強いて言うならば、行間の設定をする「line-height」ですね。
設定値の「1.5em」は、その行を含む「1.5文字分」の行間という意味です。
0.5文字分の余白を設けているということになりますね。
▼表示例
こんな風に要素を装飾すると、より見やすいページが出来上がってくるんですよね。
見出しの前後にゆとりのある余白を設けることは、視覚的にページを読むことを補助してくれます。
今回と以前の表示例を見比べてみてください。
その差は歴然ですね。
▼[第００７号] 「見出しタグを知る」の表示例
ここまで書いてきたことで、レイアウトに関しては、かなりWeb標準にアプローチできるページ作りができるようになっていることと思います。
管理人も、かなり、自信が付いてきましたよ♪
