• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

ー 見出しに使える!水平線のひき方(flexbox編)ー

投稿者アイコン

2018/10/10

書いた人:
rurippa!
カテゴリ:
CSS
164 views

見出しでよく見る、「文字の両側に水平線がある見出し」の作り方です。HTMLは触らず、CSSのみで実装します。

ー 見出しに使える!水平線のひき方(flexbox編)ー


文字の左右に、水平線があるデザインってよくありますよね。
文字をspanで囲んだり、色々なやり方があるのですが…

htmlは触らずにするなら、flexboxを使うのがわかりやすいので紹介しますー!

水平線のひき方(flexboxを使った方法)

サンプル

サンプル

複数行になっても
大丈夫です

ソースコード

  <p class="sample">サンプルです</p>
  <p class="sample">複数行になっても<br>大丈夫です</p>
  
  <style>
    .sample{
      display: flex;  /* 横並びにする */
      align-items: center;  /* 垂直方向に中央 */
      text-align: center;  /* 文字のセンタリング(複数行になったとき用) */
    }


    /* 共通部分はまとめる */
    .sample::before,
    .sample::after{
      content:"";
      flex-grow: 1;  /* 線の伸び率 */
      border-bottom: 1px solid #333;
    }

    /* 左側の線 */
    .sample::before{
      margin-right: 10px;  /* 線と文字の間のスペース */
      padding-left: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
    }

    /* 右側の線 */
    .sample::after{
      margin-left: 10px;  /* 線と文字の間のスペース */
      padding-right: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
    }
  </style>
  

ポイント解説

左右の線の部分(::afterと::before)にflex-grow: 1;を記載する部分がポイントです!
これがないと、左右の線が伸縮してくれないので、忘れずにつけてくださいね。
↓※サンプルです

flex-growがないver

あとは、コード部分にコメントを入れているので、わかりづらいところは読んでみてくださいね。
では、みなさん良いコーディングライフを〜(・ω・)ノ

参考記事

flex-growプロパティの意味と使い方


この記事を読んだ人はこんな記事も読んでいます

<

>