【コピペ可】HTMLとCSSで見出しのコーディング９選

2020年1月12日2022年5月24日

今回は、HTMLとCSSを使ったウェブデザインでよくでてくる見出しの実例集です。汎用的なデザインを集めているのでコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。無駄な装飾は避けシンプルで基本的な見出しのデザイン例のみに厳選しているので、フロントエンド初学者でもカスタマイズしてコードを再利用できます。

共通のHTMLとCSS

共通HTML

見出しはすべて同じHTMLでできています。

<div class="headline headline-skin">
  見出しのデザイン
</div>

共通CSS

全ての見出しは以下のCSSを共通して使用しています。独自CSSと合わせて設定してください。

.headline{
  padding: .5em .75em;
  line-height: 125%;
  font-size: 24px;
  font-weight: bold;
}

独自CSS

定番の見出し

見出しのデザイン

.headline-skin{
  border-bottom: solid 4px #333;
}

中央寄せの見出し

見出しのデザイン

.headline-skin{
  border-top: solid 3px #333;
  border-bottom: solid 3px #333;
  text-align: center;
}

ブログによくあるシンプルな見出し

見出しのデザイン

.headline-skin{
  border-left: solid 6px #333;
}

どこでも使える背景見出し

見出しのデザイン

.headline-skin{
  background: #eee;
}

ステッチのはいったかわいい見出し

見出しのデザイン

.headline-skin{
  border-radius: 4px;
  box-shadow: 0 0 0 6px #333;
  border: dashed 2px #ffffff;
  background: #333;
  color: #ffffff
}

吹き出しの見出し

見出しのデザイン

.headline-skin{
  position: relative;
  border-radius: 4px;
  background: #333;
  color: #ffffff
}
.headline-skin::before{
  content: "";
  position: absolute;
  left: -20px;
  top: .75em;
  display: block;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #333333;
}

マーカーの見出し

見出しのデザイン

.headline-skin{
  padding: .5em .25em;
  background: linear-gradient(to top, transparent .4em, #33333388 .4em, #33333388 1em, transparent 1em);
}

ここに注目の三角見出し

見出しのデザイン

.headline-skin{
  display: inline-flex;
  align-items: center;
}
.headline-skin::before{
  content: "▶︎";
  color: #333;
  font-size: 16px;
  margin-left: -0.75em;
  margin-right: 0.5em;
}

さらっと見やすい見出し

見出しのデザイン

.headline-skin{
  display: flex;
  align-items: center;
}
.headline-skin::before,.headline-skin::after{
  content: "";
  display: block;
  height: 2px;
  flex: auto;
  background: #333333;
  color: #333;
  font-size: 16px;
  margin: 0 .25em;
}