CSSのみで実装する見出しデザインのスタイルまとめ

1.見出しのデザインについて

HTMLでは<h1>〜<h6>タグで実装される見出し。

各セクションのコンテンツに目を引かせるための重要な役割を担っている部分です。

それゆえにわかりやすく受け入れられやすいデザインが必要となりますが、その中でも個性を出して全体のデザインと調和させたいところです。

という事で今回はCSSのみで実装できる見出しの一例をご紹介します。

2.見出しデザイン例 7選

デザイン例と共に実際に記述したコードを掲載します。

下記は全デザイン共通のHTML/CSSです。

HTML

<h2 class="midashi">bliss creative</a>

CSS

h2{
  width: 300px;
  height: 50px;
  line-height: 50px;
  padding: 0.5em;
  margin: 70px;
  color: #494949;
}

シンプルアイコン

見出しテキストの前にアイコンを設置した汎用性の高いシンプルな見出しです。

.midashi {
  position: relative;
  border: 1px solid #142c5b;
  padding: 7px 0 7px 35px;
}

.midashi:after {
  position: absolute;
  top: 25px;
  left: 10px;
  z-index: 2;
  content: '';
  width: 15px;
  height: 15px;
  background-color: #142c5b;
}

フキダシ風

情報系の記事はもちろん、コーポレートサイトなど割と色々なWebサイトで使用されているフキダシ風の見出しです。

.midashi {
  position: relative;
  background: #142c5b;
  color: #FFF;
}

.midashi:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #142c5b;
  width: 0;
  height: 0;
}

ポストイット風

ポストイットっぽいラベル風のデザインです。こちらも汎用性が高そうです。

.midashi {
  background: #FCFCFC;
  border-left: solid 5px #142c5b;
  border-bottom: solid 3px #d7d7d7;
}

ブックマーク風

ブログなどの記事ページに使いやすそうなタグ風の見出しです。

.midashi {
  background: #142c5b;
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;
  color: #FFF;
}

.midashi:before {
  content: '●';
  color: #FFF;
  margin-right: 8px;
}

リボン風

シンプルなリボン風デザインの見出しです。華やかな印象になりますね。

.midashi {
  position: relative;
  background-color: #ccc;
}
.midashi span {
  display: block;
  padding: .75em 1em;
  border: 1px dashed #FFF;
}
.midashi:before,
.midashi:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent;
}
.midashi:before {
  top: 100%;
  left: 0;
  border-width: 0 15px 15px 0;
  border-right-color: #ccc;
}
.midashi:after {
  top: -15px;
  right: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-bottom-color: #ccc;
}

ステッチラベル

ステッチが入ったラベル風のデザインです。左上のドッグイヤーがポイントです。

.midashi {
  position: relative;
  background: #142c5b;
  box-shadow: 0px 0px 0px 5px #142c5b;
  border: dashed 2px white;
  color: #FFF;
}

.midashi:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #FFF #FFF #a8d4ff;
}

小見出し付き

左上に小見出しを付けたデザインです。ブログ記事等の中見出しにちょうど良さそうですね。

.midashi {
	position:relative;
	border:1px solid #142c5b;
}
.midashi:after{
	content: "midashi";
	position: absolute;
	top: -25px;
	left: 10px;
	background: #FFF;
	font-size: 12px;
	color: #142c5b;
	padding: 0 10px;
}

3.まとめ

ここまでで紹介した見出しのスタイルを組み合わせるだけでもかなり表現の幅が広がるかと思います。

今回は比較しやすいように同色ばかり使用して各例を作成しましたが、これらにカラーで変化を加えると文字通り更に色々なデザインの見出しが制作できるかと思います。

もちろんあくまでCSSのみで作るデザインの一例にすぎないので、参考にしつつオリジナルのデザインの見出しを制作してください！