[HTML/CSS]テキストの左右に均等に直線を引く方法

今日はテキストの左右に均等に直線を引く方法について解説します。
タイトルとかで下記の画像のようなデザインってよくありますよね。

ポイントはテキストの長さが変わっても、左右均等で自動調整すること。

実装としてはすごく簡単なので解説します。

実装例

さて早速下記が実装例です。
Resutタブから確認できます。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

この実装では下記の仕様を満たしています。
・左右均等に直線が引かれている。
・テキストの文字数が変化しても左右均等に自動調整される。

次の章でコードの解説をします。

コード解説

①HTML

  <div class="title-container">
    <div class="line"></div>
    <h2 class="title">タイトル</h2>
    <div class="line"></div>
  </div>

HTMLはシンプルで、タイトルの横にライン用のdivを2つ作ります。

②CSSでflex: 1;を指定する。

.line {
  flex: 1; /* 直線を均等に伸ばす */
  height: 2px;
  background-color: #333;
}

cssのポイントは、左右に配置した直線にflex:1;をつけること。
flex:1;で横幅の余りを均等に分割できます。

簡単ですね。これで均等に配置された直線を実装できました。

まとめ

今日は今日はテキストの左右に均等に直線を引く方法について解説しました。

flex;1:を左右の直線につけることで均等な幅を設定できます。

もしも質問などあれば、コメント欄かXのDMよりお気軽にご連絡ください。

Tweets by yuhi1321