CSSで文字の横に線がびよーんと伸びる見出しを作成する

技術

目次

この記事では文字の横に線がびよーんと伸びる見出しスタイルの作成の仕方について説明します。

画像のようなスタイルです。

指定するタグ

html
<h1 class="sideLine">見出し</h1>
css
.sideLine {
  display: flex;
  align-items: center;
}
.sideLine:before,
.sideLine:after {
  content: '';
  height: 1px;
  flex-grow: 1;
  background-color: #000000;
}
.sideLine:before {
  margin-right: 20px;
}
.sideLine:after {
  margin-left: 20px;
}

タグの解説

.sideLine {
  display: flex;
  align-items: center;
}

見出しをdisplay:flexにすることで、要素を横並びにしています。

align-items: center;で縦の位置が中央にそろうように設定。

.sideLine:before,
.sideLine:after {
  content: '';
  height: 1px;
  flex-grow: 1;
  background-color: #000000;
}

見出しの前後に空の要素を作ります。

flex-grow: 1;で自動的に親要素全体に線が伸びるように設定。

heightを変えると線の太さが、background-colorを変えると線の色が変わります。

.sideLine:before {
  margin-right: 20px;
}
.sideLine:after {
  margin-left: 20px;
}

それぞれにmarginを設定して、文字との間の隙間を設定しています。

おまけ：scssでの指定方法

最近はスタイルをscssで作成することが多いので、scssでの指定方法も記載しておきます。

.sideLine {
  display: flex;
  align-items: center;
  &:before,
  &:after {
    content: '';
    height: 1px;
    flex-grow: 1;
    background-color: #000000;
  }
  &:before {
    margin-right: 20px;
  }
  &:after {
    margin-left: 20px;
  }
}