【CSS】テキスト(見出し,タイトル)に横線をつける方法

公開日:2019年3月6日 最終更新日:2020年04月27日

HTMLのコーディングで必要になり,ちょっと調べたので備忘録.

見出しなどの文字列の両側(両端,左右)に横線(ハイフン)をつけて,中央にもっていきたい場合がある.
– を使うと —— のように切れ切れになってしまう.

テキストの真横に線を入れる

すなわち,以下のようなデザイン.

見出し

CSS の書き方

そこで css を使って行う方法を紹介します.(サンプルコード)
HTML は

CSS は

ポイントは display:flex

ポイントは flex を使って,

  • 線を引くのに border を使い,
  • 上下の真ん中に持ってこれる align-item:center を使い,
  • 左右の真ん中に持ってこれる justify-content: center を使う

ことです.

参考にさせていただいたサイト)
タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
こちらは flex-grow で全体に線を引くようになっている.
ありがとうございます.

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
contact
ノウハウを書籍化!
Pagetop