【CSS】見出しなど文字の左右に横線を引く方法【4種類のサンプルで解説】

見出しの左右に横線付けたいけどどうすればいいの？

見出しの装飾には色んな種類がありますが、左右に横線を付けるタイプは非常によくあります。

今回は見出しの左右に横線を付ける4つの方法を解説します。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

CSSで見出しや文字などテキストの左右に横線を入れる4つの方法

今回解説する方法は以下の4つになります。

左右に指定した長さの横線
左右に両端を丸くした横線
左右いっぱいに伸びた横線
左右にグラデーションの横線

HTMLは共通でこちらになります。

<h2 class="heading">文字が入ります</h2>

それでは1つずつ解説していきます。

左右に指定した長さの横線

こちらがサンプルになります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

左右の線は指定しているので、文字の長さが変わっても変わりません。

CSSはこちらです。

/* 左右に横線 */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.heading::before,
.heading::after {
  background-color: #1e90ff; /* 横線の色 */
  content: "";
  height: 5px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
.heading::before {
  margin-right: 15px; /* 文字との余白 */
}
.heading::after {
  margin-left: 15px; /* 文字との余白 */
}

解説は全てコメントアウトで記入していますが、pxで書いている箇所で横線の高さ・幅・文字との余白を調整可能です。

左右に両端を丸くした横線

今度は先ほどの横線の両端を丸くしてみます。

See the Pen
左右に指定した長さの横線（両端を丸くする） by junpei (@junpei-sugiyama)
on CodePen.

先ほどとの違いはborder-radiusだけです（あとは丸みが分かりやすいように高さを倍にしてあります）

/* 左右に横線(両端を丸く) */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.heading::before,
.heading::after {
  background-color: #1e90ff; /* 横線の色 */
  border-radius: 5px; /* 横線の両端を丸く */
  content: "";
  height: 10px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
.heading::before {
  margin-right: 15px; /* 文字との余白 */
}
.heading::after {
  margin-left: 15px; /* 文字との余白 */
}

左右いっぱいに伸びた横線

先ほどまでの横線は指定した長さでしたが、今度は左右いっぱいに伸びた横線です。

画面幅いっぱいだと画面外に飛び出ているか判断しにくいので.containerというclassのdivタグで囲って、divタグ内で左右いっぱいにしてみます。

See the Pen
左右いっぱいに伸びた横線 by junpei (@junpei-sugiyama)
on CodePen.

今回は以下のような仕様です。

文字数と関係なく左右いっぱいの横線
画面幅が狭くなれば横線も合わせて短くなる

CodePen左上のHTML・CSSをクリックすると画面幅が狭くなるので、それで横線も自然に狭くなるのが分かります。

CSSはこちらです。

/* 左右いっぱいに伸びた横線 */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
}
.heading::before,
.heading::after {
  background-color: #1e90ff; /* 横線の色 */
  border-radius: 5px; /* 横線の両端を丸く */
  content: "";
  flex-grow: 1; /* 横幅いっぱい */
  height: 5px; /* 横線の高さ */
}
.heading::before {
  margin-right: 15px; /* 文字との余白 */
}
.heading::after {
  margin-left: 15px; /* 文字との余白 */
}

ほとんど先ほどまでと同じですが、大きく違うのはflex-grow: 1;です。

これが左右の伸び方の比率 (フレックス伸長係数)を設定するプロパティで、これを1にすることで左右いっぱいにしています。

またflex-grow: 1;を設定することで、先ほどまであったjustify-content: center;で中央寄せする必要はなくなります。

左右にグラデーションの横線

最後に左右にグラデーションの横線を付けてみます。

ベースは『左右に両端を丸くした横線』です。

See the Pen
左右にグラデーションの横線 by junpei (@junpei-sugiyama)
on CodePen.

ベースとなる『左右に両端を丸くした横線』との違いはbackground: linear-gradient();でグラデーションを指定しているところです。

/* 左右にグラーデションの横線 */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.heading::before,
.heading::after {
  border-radius: 5px; /* 横線の両端を丸く */
  content: "";
  height: 5px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
.heading::before {
  background: linear-gradient(to right, green, yellow); /* 左のグラデーション */
  margin-right: 15px; /* 文字との余白 */
}
.heading::after {
  background: linear-gradient(to right, yellow, green); /* 右のグラデーション */
  margin-left: 15px; /* 文字との余白 */
}

今回のグラデーションは線形グラデーションのlinear-gradientを使いましたが、円形グラデーションのradial-gradientを使うことも出来ます。

グラデーションについては以下の記事を参照下さい。