目次
CodePenで表示を確認
この記事では、見出しの両側に上下中央に水平ライン（センターライン）を書く方法を紹介します。
まずは下のCodePenで表示をご確認下さい。
See the Pen 見出しにセンターライン｜Centerline in headline by s sim (@s-sim) on CodePen.
見出しに両側にセンターラインをつくる方法
見出し両側に水平ラインを書くHTML
見出し両側に水平ラインを書くHTMLの構造は、特筆すべき点はゼロです。下のように最もシンプルな見出しタグだけで十分です。
<h2 class="line_h2">両側線</h2>見出し両側に水平ラインを書くCSS
見出し両側に水平ラインを書くCSSは下記のとおりで、少々複雑です。
.line_h2 {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
line-height: 1.5;
text-align: center;
}
/* 両側センターライン */
.line_h2::before,
.line_h2::after {
content: "";
height: 1px;
border-top: 1.5px dotted #000;
flex-grow: 1;
}
/* 余白 */
.line_h2::before{
margin-right: 30px;
}
.line_h2::after{
margin-left: 30px;
}コード説明：水平ラインを書くCSS
- 見出しタグの上下中央設定：flexboxで’align-items: center’
- 見出しタグの左右中央設定：’text-align: center’
- 両側のセンターラインの疑似要素：’::before’と’::after’を両方使用
- 両側のセンターラインの描画：’height’と’border-top’で描画するが、’flex-grow’も同時に設定しないと表示されないので注意
- 見出しと線の余白：疑似要素にそれぞれ’margin’を設定
見出しの右側のみにセンターラインをつくる方法
HTMLは上記の両側センターラインと全く同じです。
見出し右側に水平ラインを書くCSS
.line_h2--right{
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
line-height: 1.5;
text-align: center;
}
/* 右側線 */
.line_h2--right::after {
content: "";
height: 1px;
border-top: 1.5px dotted #000;
flex-grow: 1;
}
.line_h2--right::after{
margin-left: 30px;
}コード説明：水平ラインを書くCSS
- 見出しタグ本体の設定：両側センターラインと同じ
- 右側線を擬似要素で描画：’::after’のみで両側センターラインと同様に設定
- 見出しと右側線の余白：’margin-left’で設定
