【HTML・CSS】見出しの左右両端に線を入れる方法

今回は「CSSを使ってテキストの左右に線を入れる方法」をご紹介します。

装飾として見た目はとてもシンプルですが、線の太さや長さを変えたりすると印象も大きく変わるので、覚えておくと良いでしょう。

横幅いっぱいに線を入れる方法

まずは下の画像のような両端の線が横幅いっぱいになるような装飾の作り方をご紹介します。

HTML

横に線を追加したいテキストにhead-borderというクラス名をつけました。このクラスをベースにCSSを設定していきます。

<h2 class="head-border">タイトル</h2>

CSS

CSSを書いていきます。ポイントはflexboxコンテナーのプロパティです。

.head-border {
    display: flex;
    align-items: center;
}

.head-border:before,
.head-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}

.head-border:before {
    margin-right: 1rem;
}

.head-border:after {
    margin-left: 1rem;
}

解説

.head-border

• display:flex;  …「Flexbox」コンテナーとして定義。
• align-items:center; … 垂直方向の揃え方です。今回は真ん中で揃えたいのでcenter;としています。

.head-border:擬似要素

• flex-grow: 1; … フレックスアイテムの伸び率を指定します。1とすると横幅いっぱいまで広がります。
• margin-◯◯:1rem; … 文字と横線の間隔を指定します。数字を増やせば広がります。０だとミッチミチ。

両端に短い線を配置する方法

次にご紹介するのは「横幅いっぱい」ではなく、下の画像のように短い線を配置する方法です。

HTML

HTMLは先ほどと同じhead-borderというクラス名を使って、CSSを設定していきましょう。

※中央揃えにする場合には、divなどで囲ってtext-align:center;を適用してあげましょう。

<h2 class="head-border">タイトル</h2>

CSS

.head-border {
    position: relative;
    display: inline-block;
    padding: 0 55px;
}

.head-border:before,
.head-border:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 50px;
    height: 5px;
    background-color: #666;
}

.head-border:before {
    left: 0;
}

.head-border:after {
    right: 0;
}

解説

.head-border

• position: relative; … ボーダーを擬似要素で作るため、位置の起点にする。
• display: inline-block; … インラインブロックにしてボーダーの位置を調整。
• padding: 0 55px; … 横を0pxにしてしまうとボーダーが文字に被ってしまう。

.head-border:擬似要素

• position: absolute; … 親要素(relative)を起点にする。
• top: 50%; … ボーダーを垂直方向真ん中に指定。
• width: 50px; … ボーダーの横幅。
• height: 5px; … ボーダーの高さ。厚み。
• left:0; / right:0; … 親要素のpaddingで横幅を調整しているので、位置を0に指定。

応用

グラデーションで端を薄くする

擬似要素の箇所に下のCSSを加えれば端に向かって薄くなるボーダーが作れます。

::beforeと::afterで数値が違うので注意しましょう。

/* ::before */
background: linear-gradient(-90deg, #666, transparent);

/* ::after */
background: linear-gradient(90deg, #666, transparent);