WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

前回の私の記事では、CSSで作るボタンデザインのご紹介をしました。
今回はよく使う見出しデザインの装飾をFlexboxを使用して表現したいと思います！
ただ、CSSでの記述方法にも色々とあるため、ブラウザによってはCSSハックを使って個別に対応をしないといけない場合がありますよね。
見出しタグの中にspanタグを入れて擬似要素をつけたりと、とにかく記述が多くなるのと、レスポンシブ対応で崩れるといった悩みがありましたが、Flexboxを使った記述方法ではスッキリとした記述で表現ができるので早速ご紹介していきます。

実装方法の紹介

まず、HTMLの準備です。div要素にclassを与えましょう。もちろんdiv要素じゃなく見出しタグでもOKです！

HTMLの記述

<div class="txt_line">見出しに左右の区切り線</div>

CSSの記述

次にCSSで区切り線を表現しましょう。
div要素をFlexboxにし、align-itemsでテキストを中央に配置。疑似要素に区切り線を実装していきます。

.txt_line {
  display: flex;
  align-items: center;
}
.txt_line::before,
.txt_line::after {
  content: '';
  height: 1px;
  background-color: #333;
  flex-grow: 1;
}

下記のような見た目になります。

See the Pen
見出しCSS1 by saki kurita (@saki_0415)
on CodePen.

今のままだと文字と線の左右がぴったりくっついているので左右にマージンを付けていきます。
先程のCSSの記述に、疑似要素へマージンをつけていきましょう。

.txt_line {
  display: flex;
  align-items: center;
  --textline-gap: 1rem;
}
.txt_line::before,
.txt_line::after {
  content: '';
  height: 1px;
  background-color: #333;
  flex-grow: 1;
}
.txt_line::before {
  margin-right: var(--textline-gap);
}
.txt_line::after {
  margin-left: var(--textline-gap);
}

上記で記述している–textline-gapは変数になります。gapプロパティは、アイテム同士の横方向と縦方向の間隔をまとめて指定する際に使用します。
このCSSタグ非常に便利ですがIE11では対応していないので、IE11にも対応した記述も記載しておきます。

.txt_line {
  display: flex;
  align-items: center;
}
.txt_line::before,
.txt_line::after {
  content: '';
  height: 1px;
  background-color: #333;
  flex-grow: 1;
}
.txt_line::before {
  margin-right: 1rem;
}
.txt_line::after {
  margin-left: 1rem;
}

これで左右にアキができて見た目もよくなりましたね。レスポンシブ対応もバッチリな見出し線の完成です！

See the Pen
見出し用CSS by saki kurita (@saki_0415)
on CodePen.

もちろん複数行になっても崩れません。
複数行にする時は、Flexboxを設定しているクラス（.txt_line）に対して、text-align: center;を記述しましょう。

See the Pen
見出し用CSS3 by saki kurita (@saki_0415)
on CodePen.

まとめ

CSSの疑似要素を使うことでレスポンシブ対応時も崩れずに表現ができました。
また新しいプロパティを使用するときは、対応ブラウザのチェックも忘れずにしましょう！