かっこいい見出し（h1～h5）を複数使いたいときは、子孫セレクタを使ってみよう。

おすすめ記事ピックアップ

見出しのh1～h5のデザイン（CSS）は、いろいろあってどのデザインを使うか、とても迷います。多くの場合、1つの見出しデザインを使います。いろんな種類の見出しが使えたらいいのにって思いませんか。そんなとき子孫セレクタです。いろんな種類の見出しを簡単に使うことができます。

ブログというより、ランディングページなど作るときに役に立つかもしれません。

Blogger以外でも使えるテクニックです。子孫セレクタを理解しておくとCSSデザインが楽になります。今回はhタグとdivクラスの子孫セレクタの説明だけします。いろんな組み合わせができますので、興味ある人は、ググって勉強しましょう。

Bloggerの場合は投稿画面から「見出し（h2）、小見出し(h3)、順見出し(h4)」の名称で、hタグを選ぶことができます。h1はタイトルに使われています。h5は普段でもほとんど使いません。h4も使用頻度は低いです。もちろん人にもよります。

記事内の見出しとしては、h2～h3を使うことが多いです。h2見出しと、h2見出しの中のh3小見出しという位置づけです。

通常は、下記のように設定しているでしょう。CSSの記述は適当です。

通常の設定
h2{
  border-left: 10px solid #F15252;
  padding-left: 15px;
  font-weight: bold;
}

これにを子孫クラスタにしてみましょう。simple-aとsimple-bというdivで設定してみます。

タイプA
h2.simple-a{
  border-left: 7px solid #F15252;
  padding-left: 10px;
}

タイプB
h2.simple-b{
  border-left: 5px solid #F15252;
  padding-left: 5px;
}

以上のようにCSSを設定します。それで使うときは下記のように、h2タグ内にclassを指定してあげれば、タイプAとタイプBの切り分けができます。

<h2 class="simple-a">タイプA見出し</h2> 
<h2 class="simple-b">タイプB見出し</h2> 

つまりカッコいい見出しがあれば、子孫クラスタでhタグにdivクラスを設定してゆけば、たくさん使い分けることができます。

さらにこのようにカンマで区切ることで、h2やh3でも同じdiｖクラスを設定することもできます。

タイプA h2 h3両用
h2.simple-a,h3.simple-a{
  border-left: 5px solid #F15252;
  padding-left: 5px;
}

h2でもh3でも使いたいdivクラスを設定することができます。

<h2 class="simple-a">タイプA見出し</h2>
<h3 class="simple-a">タイプA見出し</h3>

ただ子孫クラスタは、h2の設定を、h2.simple-aでも引き継ぐため（h2.simple-aのcss設定が上書きされる）、h2の設定がh2.simple-aにも影響します。使いこなすには子孫セレクタの勉強がちょっと必要になるかもしれませんが、覚えておくと便利です。