ゆるくはじめるWordPress.

コピペで使える!CSSでシンプルな見出しデザイン

heading-top

ブログの記事でとても重要な見出しのデザイン。見出しの内容を目立たせると同時に見やすく伝えることも大切です。
今回はアレンジしやすいシンプルな見出しデザインをCSSとあわせていくつか載せてみました。HTMLもhタグで囲んだだけの単純な形を利用しています。ちょっとした工夫でブログの記事がかっこよくなるのでCSSを組み合わせたり、色を変えたりして使ってみてください。

HTML

<h2>見出しデザインサンプル</h2>

下ボーダータイプ

超シンプルに下線のみ。実線、点線、ボーダーの色を途中で変えた2色タイプの3種。

下線付き見出しデザイン

実線

CSS

h2 {
  border-bottom: 2px solid #ccc;
  padding: 0.5em;
}

点線

CSS

h2 {
  border-bottom: 1px dotted #ccc;
  padding: 0.5em;
}

2色の線

CSS

h2 {
  position: relative;
  border-bottom: 2px solid #ccc;
  padding: 0.5em;
}
h2::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 20%;
  border-bottom: 2px solid #777;
}

上下ボーダータイプ

ボーダーを上にも付けました。上下で色を変えたり、線種をかえたりもできます。実線、2本線の2種。

上下線付き見出しデザイン

実線

CSS

h2 {
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  padding: 0.5em;
}

2本線

CSS

h2 {
  border-top: 3px double #ccc;
  border-bottom: 3px double #ccc;
  padding: 0.5em;
}

左ボーダータイプ

見出しの左側に太めのボーダー。シンプルに左ボーダーのみのものと、下線と合わせたものの2種。

左線付き見出しデザイン

左ボーダーのみ

CSS

h2 {
  border-left: 5px solid #999;
  padding: 0.5em;
}

左ボーダー+下ボーダー

CSS

h2 {
  border-left: 5px solid #ccc;
  border-bottom: 1px dotted #ccc;
  padding: 0.5em;
}

背景色タイプ

背景に色を敷いたもの。これまでの各種ボーダーと組み合わせても使える。左ボーダーと合わせたもの、角を丸くしたものの2種。

背景色付き見出しデザイン

背景色+左ボーダー

CSS

h2 {
  background-color: #eee;
  border-left: 5px solid #888;
  padding: 0.5em;
}

背景色+角丸

CSS

h2 {
  background-color: #ccc;
  border-radius: 4px;
  padding: 0.5em;
}

ふきだしタイプ

使いやすい吹き出し型の見出し。ちょっと遊びごごろをプラスしたい時に。

吹き出し型見出しデザイン

背景色+ふきだし

CSS

h2 {
  position: relative;
  background-color: #ccc;
  padding: 0.5em;
  border-radius: 4px;
}
h2::after {
  position: absolute;
  top: 100%;
  left: 2em;
  content: '';
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top: 10px solid #ccc;
}

ストライプタイプ

画像を使わずにCSSだけで作ったストライプ。ちょっと凝った感じを出したい場所に。背景に敷いたもの、下線に使ったもの2種。

ストライプ柄見出しデザイン

背景斜めストライプ

CSS

h2 {
  background: repeating-linear-gradient(-45deg, #eee, #eee 5px, #fff 5px, #fff 10px);
  padding: 0.5em;
}

斜めストライプ下ボーダー

CSS

h2 {
  position: relative;
  padding: 0.5em;
}
h2::after {
  width: 100%;
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  height: 5px;
  background: repeating-linear-gradient(-45deg, #ccc, #ccc 3px, #fff 3px, #fff 6px);
}

スポンサーリンク

公開日: