ウェブ制作

見出しの両端に線を入れる

疑似要素やspanなどを使えば見出しの左右に線を入れることはできますが、画面幅によって自動で伸縮させるには少しコツがいります。

今回はそんな所を解説していきます。

見出しの両端に線を入れる方法（コピペ用）

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

.title{
    /* ここには文字のスタイル */
    font-size: 1.5rem;
    font-weight: bold;
}

/* ここからは線のスタイル */
.title--border {
    display: flex;
    align-items: center;
}

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

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

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

表示例は以下のようになっています。

See the Pen Untitled by Makoto Kokubo (@Kokumako) on CodePen.

右上のCODEPENのロゴマークをクリックすると別画面で大きく見えます。

HTMLの解説

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

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

今回はtitleとtitle--borderという2つのクラスをつけて実装しています。別にtitleというクラスだけあてて、全てのスタイルをそこにあてても問題ないのですが、BEMのモディファイアを使って実装しています。

BEMはクラスの命名規則、モディファイアはその中でも要素が変化した状態を表すものです。

クラスを分けた理由は後述しますがBEMについては長くなるので、BEMをキーワードにして色々ググってみてください。

CSSの解説

.title{
    /* ここには文字のスタイル */
    font-size: 1.5rem;
    font-weight: bold;
}

/* ここからは線のスタイル */
.title--border {
    display: flex;
    align-items: center;
}

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

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

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

.titleクラスには文字の大きさと太さだけ指定しています。

続く.title--borderクラスにdisplay :flex;を指定し、疑似要素で作った横線を見出しの左右に横並びにし、上下の位置を中央にしています。

.title--border:before,.title--border:afterでは、線を作っています。重要なのはflex-grow: 1;です。これを指定することでbefore疑似要素で作った線とafter疑似要素で作った線は常な均等にスペースを利用して表示されます。
justify-content: center;を指定しなくてもタイトルが中央になっているのはそのためです。

そしてflex-grow: 1;を指定したことで、タイトルの文字数が変わっても、またインナーのサイズが変わっても、「常な均等にスペースを利用」してくれるために、柔軟に対応してくれているわけです。

クラスを２つに分けた理由

今回あえて.titleクラスと.title--borderクラスに分けてスタイルを記述しました。

こうすることで、横線が必要ない通常にタイトルには.titleクラスをつけ、両端の横線が必要なタイトルのみに.title--borderクラスをつければ、横線が出現します。

いろんなパターンに応用できる考えかたなので、取り入れてみてください。

今回は以上です。

-ウェブ制作