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

最終更新日: 公開日: 2019年03月

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

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

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

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

見出し

CSS の書き方

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

<div class="catch">
  見出し
</div>

CSS は

.catch {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.catch:before, .catch:after {
  border-top: 1px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
.catch:before {
  margin-right: 1em; /* 文字の右隣 */
}
.catch:after {
  margin-left: 1em; /* 文字の左隣 */
}

ポイントは display:flex

ポイントは flex を使って,

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

ことです.

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

関連ページ

 

Contact

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

 
   
contact
Pagetop