見出しの両サイドに横棒を配置する方法

2020/3/25

WEBサイトにはhタグを使った「見出し」がつきものです。

見出しには様々なバリエーションがありますが、結構よく見かけるのが見出しのキーワードの両サイドに横棒がある見出しです。

シンプルですが見出しであることが解りやすく、見出しのデザインに良く使われています。

今日は文字を横棒で挟む見出しの作り方について書きたいと思います。

1 作り方
2 手軽にできます

作り方

FlexBoxと疑似要素を使って横棒で挟まれた見出しを作ります。

以下のHTMLにCSSを設定して見出しを作成していきます。

<h1>見出し</h1>

基本的な形

See the Pen titile1 by konpure (@yuntu) on CodePen.

h1 {
  display: flex;
  align-items: center;/* 縦位置の調整 */
}

h1::before,
h1::after {
  content: '';
  flex-grow: 1;/* 余白を分け与える */
  height: 3px;
  background: red;
}

見出しとなる要素（h1要素）にFlexboxを設定し、align-itemsで縦位置を中央揃えにして文字の中央部分に横棒がくるようにしています。

疑似要素に設定している「flex-glow」は、余った余白を指定した割合で分け与える役割をもっています。

この場合で言うと「見出し」という部分以外の余白を1:1の割合で疑似要素のbeforeとafterに分け与えています。

余白を均等に分け与えているので、画面の端から見出しの文字の部分まで左右の横棒が伸びています。

見出しと横棒の間隔を開ける

先ほどの見出しは、見出しと横棒の間に間隔が無くて息苦しいので、少し間隔を開けてあげます。

See the Pen title2 by konpure (@yuntu) on CodePen.

h1 {
  display: flex;
  align-items: center;/* 縦位置の調整 */
/*    justify-content: center;*/
}

h1::before,
h1::after {
  content: '';
  flex-grow: 1;/* 余白を分け与える */
  height: 3px;
  background: red;
}

/* 見出しの文字と横棒の間隔を開ける */
h1::before {
  margin-right: 30px;
}

h1::after {
  margin-left: 30px;
}

間隔をあける場合には疑似要素にmarginを設定すれば良いです。

疑似要素にそれぞれmarginを設定すれば見出しの文字と横棒の間に間隔があいて見やすくなります。

横棒の長さを調節する

見出しの左右の棒を画面の端まで伸ばさずに、ある程度の長さにしたい場合もあると思います。

See the Pen titile3 by konpure (@yuntu) on CodePen.

h1 {
  display: flex;
  align-items: center;/* 縦位置の調整 */
  justify-content: center;/* 横位置の調整 */
}

h1::before,
h1::after {
  content: '';
  flex-grow: 0.05;/* 少数にする */
  height: 3px;
  background: red;
}

/* 見出しの文字と横棒の間隔を開ける */
h1::before {
  margin-right: 20px;
}

h1::after {
  margin-left: 20px;
}

そんな場合はflex-growの値を1よりも小さい少数にすればいいです。

ただし、flex-growを少数にした場合は全体が左寄せになりますので見出しの要素に「justify-content: center」を設定して横位置を中央揃えにしてあげます。

先ほども書きましたが「flex-glow」で余白を疑似要素に分け与えて横棒の長さにしているので、画面のサイズを変更すると余白のサイズが変わり横棒の長さもそれに比例して縮小します。

横棒の長さが固定で決まっている場合はflex-growではなくて、widthを使って長さを設定します。

線の色にグラデーションなどを与える

See the Pen titile4 by konpure (@yuntu) on CodePen.

h1 {
  display: flex;
  align-items: center;/* 縦位置の調整 */
  justify-content: center;/* 横位置の調整 */
}

h1::before,
h1::after {
  content: '';
  flex-grow: 0.2;/* 少数にする */
  height: 3px;
}

/* 線にグラデーションをかける */
h1::before {
  margin-right: 20px;
  background: linear-gradient(-90deg, red , white);
}

h1::after {
  margin-left: 20px;
  background: linear-gradient(90deg, red , white);
}

疑似要素のbackgroundに「linear-gradient」を利用することで両サイドの線にグラデーションを与えることもできます。

「linear-gradient」を利用することで端に向かって色が薄くなるような線も作れますし、赤・青・黄色というような線にすることもできます。

See the Pen ZEGMVpa by konpure (@yuntu) on CodePen.

h1 {
  display: flex;
  align-items: center;/* 縦位置の調整 */
  justify-content: center;/* 横位置の調整 */
}

h1::before,
h1::after {
  content: '';
  flex-grow: 0.2;/* 少数にする */
  height: 3px;
}

/* 線に赤・青・黄色のグラデーションをかける */
h1::before {
  margin-right: 20px;
  background: linear-gradient(-90deg, red 0, red 30%, blue 30%, blue 60%, yellow 60%, yellow 100%);
}

h1::after {
  margin-left: 20px;
  background: linear-gradient(90deg, red 0, red 30%, blue 30%, blue 60%, yellow 60%, yellow 100%);
}