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

div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモをご覧ください。 テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。 実装のポイント div要素ひとつだけ、spanなど余分な要素は必要なし。 divに限らずブロック要素、h1で見出しの装飾としても使えます。 画像やSVGなども必要なし。 水平線は、カラー・サイズ・マージンの変更ができる。 フォントのサイズを大きくしても自動で調整される。 水平線はレスポンシブ対応。 背景が画像でも水

[coliss]

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

[tatuya954]

ｰｰｰｰｰｰここまで読んだｰｰｰｰｰｰ

[primedesignworks]

もうほんと flex には感謝しかない。なのに flex でバグを出す IE、お前はダメだ。

[lifeisadog]

「新テクニック」ではないので……。あと別にdivである必然性はない

[nismit]

これちょいちょい使う。Flexboxまじで良いよ

[buhoho]

いいですね〜

[fai_fx]

　　好き。

[kappa_live]

切り取り線？

[mohritaroh]

高さ1ピクセルで横幅いっぱいの領域に背景色を敷くと罫線に見える。たしかに……