CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック
Post on:2020年3月4日
sponsors
div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。
HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。
div要素ひとつだけで実装する テキスト付きの区切り線
まずは、最終のデモをご覧ください。
テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。
実装のポイント
- div要素ひとつだけ、spanなど余分な要素は必要なし。
divに限らずブロック要素、h1で見出しの装飾としても使えます。 - 画像やSVGなども必要なし。
- 水平線は、カラー・サイズ・マージンの変更ができる。
- フォントのサイズを大きくしても自動で調整される。
- 水平線はレスポンシブ対応。
- 背景が画像でも水平線は綺麗に描かれる。
このテクニックは、@CodyWebHouseのツイートによるものです。
💡 Use Flexbox to create a text divider with a single <div>.#codyhousenugget pic.twitter.com/yiaL9XJTFL
— CodyHouse (@CodyWebHouse) February 27, 2020
実装方法
ツイートで紹介されている実装方法を紹介します。
実装は2ステップに分かれています。
Step 1: HTML
HTMLはdiv要素にclassを与えるだけです。
|
1 |
<div class="text-divider">テキスト付きの区切り線</div> |
Step 1: CSS
Step 1では、マージン無しの区切り線を実装します。
div要素をFlexコンテナにし、align-itemsでテキストを中央に配置し、疑似要素にcontentプロパティを使用して区切り線を実装します。
|
1 2 3 4 5 6 7 8 9 10 11 |
.text-divider { display: flex; align-items: center; } .text-divider::before, .text-divider::after { content: ''; height: 1px; background-color: #333; flex-grow: 1; } |
Step 1: デモ
Step 1の完成です。
Step 2: CSS
Step 2では、テキストの左右にマージンを加えます。
ベースは同じで、疑似要素にマージンを与えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.text-divider { display: flex; align-items: center; --text-divider-gap: 1rem; } .text-divider::before, .text-divider::after { content: ''; height: 1px; background-color: #333; flex-grow: 1; } .text-divider::before { margin-right: var(--text-divider-gap); } .text-divider::after { margin-left: var(--text-divider-gap); } |
--text-divider-gapは変数です。CSSの変数に非サポートのIE11には、下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.text-divider { display: flex; align-items: center; } .text-divider::before, .text-divider::after { content: ''; height: 1px; background-color: #333; flex-grow: 1; } .text-divider::before { margin-right: 1rem; } .text-divider::after { margin-left: 1rem; } |
Step 2: デモ
Step 2の完成です。テキストの左右にマージンが加わりました。
水平線のサイズやカラー、マージンは簡単に変更できます。
sponsors
