CSSもこれで簡単に!テキストの左右に水平線を引くスタイルシートの新テクニック

div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。

HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。

テキストの左右に水平線を引くスタイルシートの新テクニック

div要素ひとつだけで実装する テキスト付きの区切り線

まずは、最終のデモをご覧ください。
テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。

テキスト付きの区切り線

実装のポイント

  • div要素ひとつだけ、spanなど余分な要素は必要なし。
    divに限らずブロック要素、h1で見出しの装飾としても使えます。
  • 画像やSVGなども必要なし。
  • 水平線は、カラー・サイズ・マージンの変更ができる。
  • フォントのサイズを大きくしても自動で調整される。
  • 水平線はレスポンシブ対応。
  • 背景が画像でも水平線は綺麗に描かれる。

このテクニックは、@CodyWebHouseのツイートによるものです。

実装方法

ツイートで紹介されている実装方法を紹介します。
実装は2ステップに分かれています。

Step 1: HTML

HTMLはdiv要素にclassを与えるだけです。

Step 1: CSS

Step 1では、マージン無しの区切り線を実装します。
div要素をFlexコンテナにし、align-itemsでテキストを中央に配置し、疑似要素にcontentプロパティを使用して区切り線を実装します。

Step 1: デモ

Step 1の完成です。

テキスト付きの区切り線

Step 2: CSS

Step 2では、テキストの左右にマージンを加えます。
ベースは同じで、疑似要素にマージンを与えます。

--text-divider-gapは変数です。CSSの変数に非サポートのIE11には、下記のように記述します。

Step 2: デモ

Step 2の完成です。テキストの左右にマージンが加わりました。

テキスト付きの区切り線

水平線のサイズやカラー、マージンは簡単に変更できます。

テキスト付きの区切り線

sponsors

top of page

©2020 coliss