見出しの装飾には色んな種類がありますが、左右に横線を付けるタイプは非常によくあります。
今回は、見出しの左右に横線を付ける4つの方法を解説します。
（有料になっていたらすいません🙇♂️）
CSSで見出しや文字などテキストの左右に横線を入れる4つの方法
今回解説する方法は、以下の4つになります。
- 左右に指定した長さの横線
- 左右に両端を丸くした横線
- 左右いっぱいに伸びた横線
- 左右にグラデーションの横線
HTMLの書き方は、共通でこちらになります。
<h2 class="heading">文字が入ります</h2>それでは1つずつ解説していきます。
左右に指定した長さの横線
こちらがサンプル（デモ）になります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
左右の線は指定しているので、文字の長さが変わっても変わりません。
CSSのコード
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.
CSSのコード
CSSの書き方はこちら。
先ほどとの違いは、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のコード
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; /* 文字との余白 */
}ほとんど先ほどまでと同じですが、大きく違うのはFlexboxのプロパティである、flex-grow: 1;です。
これが左右の伸び方の比率（フレックス伸長係数）を設定するプロパティで、これを1にすることで左右いっぱいにしています。
またflex-grow: 1;を設定することで、先ほどまであったjustify-content: center;で中央寄せする必要はなくなります。
-
【CSS】Flexboxの基本的な使い方を徹底解説【サンプルコードあり】
続きを見る
左右にグラデーションの横線
最後に、左右にグラデーションの横線を付けてみます。
ベースは『左右に両端を丸くした横線』です。
See the Pen
左右にグラデーションの横線 by junpei (@junpei-sugiyama)
on CodePen.
CSSのコード
CSSの書き方はこちら。
/* 左右にグラーデションの横線 */
.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; /* 文字との余白 */
}ベースとなる『左右に両端を丸くした横線』との違いは、background: linear-gradient();でグラデーションを指定しているところです。
今回のグラデーションは線形グラデーションのlinear-gradientを使いましたが、円形グラデーションのradial-gradientを使うことも出来ます。
グラデーションについては以下の記事を参照下さい。
-
CSSグラデーションの作り方まとめ【コピペOK！】
続きを見る
まとめ
今回は、見出しなど文字（テキスト）の左右に横線を引く方法を4つご紹介しました。
見出しの装飾は実務でも良くある実装なので、できるようにしておきましょう。
以上になります。
-
【CSS】見出しなど文字の左右に斜めの線を引く方法【サンプル付きで解説】
続きを見る
-
【CSS】見出しなど文字の幅より短い下線を引く方法【サンプル付きで解説】
続きを見る
