週末WEBデザイン 第1回 見出しを作ろう

最近はCSSで色々凝ったことが出来るようになりました。特にgridは使えるようになると、大きなものから小さなものまでかなり役に立ちますね。gridは大きなレイアウトを作る為にあると思われがちですが、小さな所だって使えばとても便利!例えばタイトル等にも使用すると、見出しのデザインのあしらいがさらに増えます。

HTMLはシンプルに、でも凝った見出しを作りたい。そこで見出しに文字や画像を横に並べてみることにした場合、HTMLに余計なタグや画像を入れたりして見づらくなりがちです。h1タグの中にspanやimg等を入れたりするのはなんだか嫌だなぁって思う時もあります。そういう時には「::before」と「::after」の疑似要素を使うとHTMLをすっきりさせることが出来ます。

そうです、「::before」「::after」はgridの対象になるのです。つまり、h1タグの中にテキストを入れるだけで、「前・テキスト・後」の3列のグリッドが出来上がるのです。あとはgridのプロパティを調整することで、よりふくざつなあしらいの見出しを作成することが出来るようになります。
手始めに、タイトルの左右にラインを引いてみましょう。

    HTML
    <h1>タイトル</h1>
    
    CSS
    h1 {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      gap:30px;
      align-items: center;
    }
    h1::before,
    h1::after {
      content:"";
      display:block;
      width:100%;
      height:1px;
      border-top:1px solid #ccc;
    }

まずはdisplay:gridでgridを指定します。gridのカラムは左右は1fr、そして中央はテキスト部分で長さが可変になるのでautoを指定します。これでテキストの左右にあるものは画面の端からテキストの横まで自由に伸びます。そしてalign-items:centerをセットすると縦に中央揃えになります。(ちなみに必ず真ん中揃えになるので、text-align:center等は必要ありません)

後は、beforeとafterにborderを指定してあげることで、そのborderが縦中央揃えでテキストの左右から伸びているのが確認出来ると思います。

ちなみにこの方法ですと、テキストが折り返すほど長い時は左右の線がなくなってしまいます。出来れば複数行になってもある程度線が残って欲しいと思う時は、残したい線の長さを指定してあげる必要があります。

grid-template-columns:minmax(20px,1fr) auto minmax(20px,1fr);

gridのminmaxで線を残したい最小の幅を指定しておけば、長いタイトルでも線が残るようになります。このような感じでgridを利用していけば、細かい所もしっかり作れますね。