[CSS]見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ

h1やh2などの見出し要素をシンプルなHTMLで実装し、美しいスタイルを適用するスタイルシートを紹介します。

Cool headings with pseudo-elements

[ad#ad-2]

• デモ
• 実装

デモ

デモは擬似要素だけでなく、background-clipなどのCSS3を使用しているため、Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+ でご覧ください。

デモページ

実装

HTML

HTMLは非常にシンプルで、h1要素にclassを与えるだけです。

<h1 class="headline1">I took lessons</h1>

※デモは4つあり、classを変更するだけです。

CSS: 各デモ共通のベース

body要素をメインのラッパーとして使用します。
h1要素にはfont-familyとsizeのみ共通で指定します。

body{
	width: 60%;
	margin: 50px auto;
	padding: 15px;
	position: relative; /*needed for heading4 rule*/
	z-index: 0; /* again, just for heading4 rule*/
	border: 7px solid #cecece;
	border: 7px solid rgba(0,0,0,.05);
	background: #fff;
	background-clip: padding-box;
	box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}

h1{
	font-family: 'Droid Sans', sans-serif;
	font-size: 22px;
}

[ad#ad-2]

以下、各デモごとにCSSを紹介します。

デモページ: Headline 1

最初のデモはシンプルで、borderのプロパティのみでスタイルしています。

.headline1 {
	border-bottom: 1px dashed #aaa;
	border-left: 7px solid #aaa;
	border-left: 7px solid rgba(0,0,0,.2);
	margin: 0 -15px 15px -22px;
	padding: 5px 15px;
}

デモページ: Headline 2

2番目のデモは、CSSで作成した三角を擬似要素で実装しています。

.headline2 {
	border-bottom: 1px solid #aaa;
	margin: 15px 0;
	padding: 5px 0;
	position: relative;
}

.headline2:before,
.headline2:after{
	content: '';
	border-right: 20px solid #fff;
	border-top: 15px solid #aaa;
	bottom: -15px;
	position: absolute;
	left: 25px;
}

.headline2:after{
	border-top-color: #fff;
	border-right-color: transparent;
	bottom: -13px;
	left: 26px;
}

デモページ: Headline 3

3番目のデモは三角を更に応用し、リボン風のエフェクトを実装しています。

.headline3{
  position: relative;
  margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/
  margin-right: -22px;
  padding: 15px;
  background: #e5e5e5;
  background: -moz-linear-gradient(#f5f5f5, #e5e5e5);
  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background: -webkit-linear-gradient(#f5f5f5, #e5e5e5);
  background: -o-linear-gradient(#f5f5f5, #e5e5e5);
  background: -ms-linear-gradient(#f5f5f5, #e5e5e5);
  background: linear-gradient(#f5f5f5, #e5e5e5);
  -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  text-shadow: 0 1px 0 #fff;
}

.headline3:before, .headline3:after{
  position: absolute;
  left: 0;
  bottom: -6px;
  content:'';
  border-top: 6px solid #555;
  border-left: 6px solid transparent;
}

.headline3:before{
  border-top: 6px solid #555;
  border-right: 6px solid transparent;
  border-left: none;
  left: auto;
  right: 0;
  bottom: -6px;
}

デモページ: Headline 4

最後の4番目のデモはbox-shadowを使用し、紙がめくれたスタイル（右端）を実装しています。

右端のキャプチャ

.headline4{
	position: relative;
	border-color: #eee;
	border-style: solid;
	border-width: 5px 5px 5px 0;
	background: #fff;
	margin: 0 0 15px -15px;
	padding: 5px 15px;
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
	box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.headline4:after
{
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 15px;
	right: 15px;
	width: 70%;
	height: 10px;
	background: rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
	box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}