見栄えと構造をごっちゃにしないCSSカスタマイズ設定

H4～H6タグのCSS設定にいく前に見栄えと構造の話を少し…キョロキョロ

HTMLとCSSの大きな役割分担を考えます。

HTMLは文書の構造を記述することを主眼にしています。
一方でCSSでは文書の見栄え（装飾）を記述することを主目的としています。

ここをごっちゃにしないことが大切。ウインク

見出しはあくまで見出しです。
文字を大きくして目立たせたものが見出しではありません。てへぺろ

<h2>見出しレベル２</h2>

と書くとき、これは文書の中の「見出し」それもトップから2番目の重要度の見出しであるということを伝えています。

一方で、

<div class="h2">見出しじゃないよ</div>

こちらはdivタグですから見出しではありません。

見出しレベル２

見出しじゃないよ

と並べて書くと同じ字の大きさになりますが、その意味するところは全く違います。

見出しはその後に続く段落のサマリーになっていなければいけません。
検索エンジンがここにキーワードがある筈だと判断してくる場所です。グッ

見出しレベル２（H2）と見かけは同じように見せたい、でも見出しにはしたくない、というケースが出てくることもあるかと思います。

そこで先ほどのようにh2というセレクタを作り、これをdivやspanタグの中でクラス指定できるようにしておくと便利です。ニヤリ

やってみましょう。

.skin-entryBody > .h2 {
    margin: 0 0 15px;
    display: block;
    box-sizing: border-box;
    font-size: 2.4rem;
    font-weight: 700
}
.skin-entryBody > .h3 {
    margin: 0 0 12px;
    display: block;
    box-sizing: border-box;
    font-size: 2.0rem;
    font-weight: 700
}

前回設定したCSSとよく似ていて見分けがつかないかもしれませんが、h2とh3の前にドット（ピリオド）を付けています。

これで

<div class="h2">見出しじゃないよ</div>
<div class="h3">これもねー</div>

などと書けるようになります。

見出しじゃないよ
これもねー

この場合は見出しとして使っていません。
単に字を大きく見せるという目的で使っているのであちこち自由に使うことができますね。

逆に見出しを使う場合にはきちんと段落構成を考えることが大切です。

またh2のあとにh3、h3のあとにh4と入れ子構造をきちんと守ること。

これは後で目次（Table Of Contents: TOC）を自動生成したりするときに大変重要になってきますよ。ウインク