2013/11/14

画像いらず!CSS3で作るおしゃれな見出しデザイン

画像いらず!CSS3で作るおしゃれな見出しデザイン

前回の記事で擬似要素「:before」「:after」の使い方を説明しました。

擬似要素を使いこなすことで、CSSだけで画像のようなクォリティの高いデザインもある程度表現できるようになります。
そこで今回は応用テクニックとして、擬似要素「:before」「:after」を使った見出しデザインの方法をご紹介します。

※IE7以下では非対応なのでご注意下さい。

目次

リボン

見出しサンプル

【HTML】

<h4>見出しサンプル</h4>

【CSS】

.heading01 {
	font-weight:bold;
	position: relative;
	padding: 10px;
	background: #b8b8b8;
}
.heading01:before{
	content: " ";
	position: absolute;
	top: 100%;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 0;
	border-color: transparent;
	border-right-color: #a6a6a6;
}
.heading01:after{
	content: " ";
	position: absolute;
	top: 100%;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 0;
	border-color: transparent;
	border-top-color: #a6a6a6;
}

リボン2

見出しサンプル

【HTML】

<h4>見出しサンプル</h4>

【CSS】

.heading02 {
	font-weight:bold;
	position: relative;
	padding: 10px;
	background: #b8b8b8;
	margin-right:20px;
}
.heading02:before {
	content: " ";
	position: absolute;
	top: 100%;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 0;
	border-color: transparent;
	border-right-color: #a6a6a6;
}
.heading02:after {
	content: " ";
	position: absolute;
	top: 0px;
	left: 100%;
	width: 0;
	height: 0;
	border-width: 22px 10px;
	border-style: solid;
	border-color: #b8b8b8;
	border-right-color: transparent;
}

吹き出し

見出しサンプル

【HTML】

<h4>見出しサンプル</h4>

【CSS】

.heading03 {
	font-weight:bold;
	position: relative;
	background: #b8b8b8;
	padding: 10px;
}
.heading03:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 25px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 10px solid #b8b8b8;
}

ボックス

見出しサンプル

【HTML】

<h4>見出しサンプル</h4>

【CSS】

.heading04 {
	font-weight:bold;
	position: relative;
	padding: 10px;
	background: #b8b8b8;
}
.heading04:before {
	content: " ";
	position: absolute;
	top: -20px;
	left: 0;
	width: 632px;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: #ccc;
}

ジェネレータ

指定したデザインのCSSを生成してくれる、ジェネレータをご紹介します。

WEB道 - CSS見出し ジェネレータ

リボンや吹き出しなど、様々なデザインの生成が可能です。
影の設定もできるので、ほとんどのデザインはこれだけで出来てしまいます。

まとめ

今回紹介したCSSは数値を変更するだけで適用できるので、是非ご活用下さい。

擬似要素「:before」「:after」と「border」を使った三角形の作り方は様々なところで役に立つので、是非覚えておきたいテクニックです。