サンプル1 CSS2を使った見出し

まずはCSS2までを使ったオーソドックスなスタイリングです。

.headding01 {
	margin:0 0 30px 0;
	padding:12px 10px;
	border-left:5px solid #1871B8;
	background: #1D8ADE;
	color:#FFF;
	}

非常にシンプルで良く見るスタイルです。CSS2の表現力はこの程度が限界とも言えます。ではCSS3を使うとどういった表現が可能になるのでしょうか？順番に見ていきましょう。

サンプル2 box-shadowで1pxの線を表現した見出し

まずは、以下のサンプルを見て下さい。

.headding02 {
	margin:0 0 30px 0;
	padding:12px 10px;
	border:1px solid #1871B8;
	background: #1D8ADE;
	color:#FFF;
	box-shadow:inset 1px 1px 0 rgba(255,255,255,0.4);
	}

ボックスの左と、上部に1pxの白い線が入っているのが分かると思います。
これまでこのようなデザインを実現する場合には1pxの線の画像を用意し背景画像として適用するか、見出しタグの外側をさらにdivで囲いborderプロパティで実現するなど手間がかかる方法しかありませんでした。

しかし、box-shadowプロパティを使えば画像やdivタグで２重に囲わずとも簡単に実現することができます。ポイントはinsetでboxの内側に影を適用し、x軸とy軸に1pxずらすことです。ぼかしは0に設定します。

box-shadowプロパティは単にボックスに対しドロップシャドウを適用するものと思っている方も多いかと思いますが、使い方次第でこのサンプルのようにボックスの内側に1pxの線を表現することもできます。

サンプル3 CSS3の角丸を使った見出し

border-radiusプロパティを使った角丸の表現です。
border-radiusプロパティはIE9でも対応したので、今後ますます使われる頻度が高くなりそうですね。

.headding03 {
	margin:0 0 30px 0;
	padding:12px 10px;
	background: #1D8ADE;
	color:#FFF;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

サンプル4 角丸+box-shadowを使った見出し

.headding04 {
	margin:0 0 30px 0;
	padding:12px 10px;
	background: #1D8ADE;
	color:#FFF;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	text-shadow:1px 1px 2px #333;
	box-shadow:inset -1px -1px 2px rgba(0,0,0, 0.6),inset 1px 1px 2px rgba(255,255,255,0.8);
}

今度はborder-radiusプロパティにbox-shadowプロパティを組み合わせてエンボス風なスタイルにしてみました。

ポイントはbox-shadowのinsetで光と影の部分を指定しています。box-shadowプロパティは複数指定することもできます。その場合はカンマ(,)で区切って続けて記述すればOKです。

サンプル5 box-shadowを使ったページカールエフェクト

これも最近多く見かけるようになった紙がめくれたような表現手法です。英語圏では「page curl effect」や「paper curl effect」なんて呼ばれているようです。

.headding05 {
	margin:0 0 30px 0;
	padding:12px 10px;
	background: #1d8ade; /* Old browsers */
	background: -moz-linear-gradient(left, #1d8ade 0%, #53a2e2 50%, #1d8ade 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d8ade), color-stop(50%,#53a2e2), color-stop(100%,#1d8ade)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* IE10+ */
	background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* W3C */
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	box-shadow:0 2px 3px rgba(0, 0, 0, 0.4) , inset 0 0 50px rgba(0, 0, 0, 0.1) ;
	position:relative;
	}
	
.headding05:before,
.headding05:after{
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 40%;
	height: 20px;
	left: 4px;
	bottom:7px;
	-webkit-box-shadow: 0 8px 15px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
	background-color: #F00;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.headding05:after{
	  -webkit-transform: rotate(3deg);
	  -moz-transform: rotate(3deg);
	  -o-transform: rotate(3deg);
	  -ms-transform: rotate(3deg);
	  transform: rotate(3deg);
	  right: 10px;
	  left: auto;
}

ポイントはbefore,afterの疑似要素を使い影の部分のボックスを生成し、それをtransformプロパティで回転させています。疑似要素で生成したボックスは後ろになるようにz-indexプロパティを用い重なり順序を指定する必要があります。

気になるブラウザの対応状況ですが、Chrome, Firefox, Safariなどの最新ブラウザでは問題なく表示されます。IEはIE9以上でないとちゃんと表示出来ません。

サンプル6 角丸とグラデーションを用いた見出し

グラデーションと角丸を用いたサンプルです。文字部分はtext-shadowプロパティも使っています。

.headding06 {
	background: #7db9e8; /* Old browsers */
	background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #207cca 51%, #1e5799 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* W3C */
	margin:0 0 30px 0;
	padding:12px 10px;
	color:#FFF;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	text-shadow:1px 1px 2px #333;
	-webkit-box-shadow:inset 0 0 50px rgba(0,0,0, 0.1);
	}

CSS3のグラデーションはIE9以下では対応していません。(IE10から対応予定)IE9以下でもグラデーションを使いたい場合はIEの独自機能であるfilterを使うか、CSS3 PIEなどを使って対応する必要があります。(上のサンプルではfilterを用いています)

サンプル7 :before,:after疑似要素を使ったCSSリボン

CSS3で表現するリボンのような表現です。
afterとbefore疑似要素を使ってボックスを生成しています。

.headding07 {
	background: #1d8ade; /* Old browsers */
	background: -moz-linear-gradient(left, #1d8ade 0%, #53a2e2 50%, #1d8ade 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d8ade), color-stop(50%,#53a2e2), color-stop(100%,#1d8ade)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* IE10+ */
	background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* W3C */
	margin:0 -36px 30px -36px;
	padding:12px 10px;
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	box-shadow:inset 0 0 50px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.3);
	position:relative;
	}

.headding07:before,
.headding07:after {
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
	right: -14px;
	bottom: -15px;
	background: transparent;
	border-color: transparent  transparent transparent #666;
	border-style:solid;
	border-width:15px;
	}
.headding07:after {
	left: -14px;
	bottom: -15px;
	right:auto;
	border-color: transparent #666 transparent transparent;
	}

このスタイルの最大のポイントは三角形の作り方です。borderプロパティを上手く用いて三角形を作っています。

サンプル8 CSS3で吹き出しスタイル

吹き出しのようなサンプルです。after疑似要素を用い先ほどと同じborderを使って三角形を作ります。それを絶対配置で配置しています。before, after疑似要素が使えるIE8以上なら正しく表示できます。

.headding08 {
	background: #1d8ade; 
	margin:0 0 30px 0;
	padding:12px 10px;
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	position:relative;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-left:1px solid #036;
	border-top:1px solid #036;
	box-shadow:inset 1px 1px 4px #036;
	}

.headding08:before {
	content: ' ';
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	left: 14px;
	bottom: -27px;
	background: transparent;
	border-color: #1d8ade transparent transparent transparent ;
	border-style:solid;
	border-width:15px;
	}

サンプル9 CSS3で吹き出しスタイルその2

先ほどの吹き出しスタイルの応用編です。枠線が付いている点に注目してください。枠線の三角形部分は2つの異なる大きさの三角形を重ね合わせる事で枠線を表現しています。

.headding09 {
	background: #1d8ade; 
	margin:0 0 30px 0;
	padding:12px 10px;
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	position:relative;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border:4px solid #036;
	}

.headding09:before {
	content: ' ';
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	left: 14px;
	bottom: -27px;
	background: transparent;
	border-color: #1d8ade transparent transparent  transparent  ;
	border-style:solid;
	border-width:15px;
	}
.headding09:after {
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
	left: 5px;
	bottom: -43px;
	background: transparent;
	border-color:#036 transparent transparent  transparent  ;
	border-style:solid;
	border-width:24px;
	}

CSS3を使う際には割切る事も大切

いかがだったでしょうか？CSS3の表現力、可能性を少しでも感じて頂けたら嬉しく思います。コピペで是非試してみて下さい。今回は「見出し」に対して適用していましたが、もちろん他のボックスに対しても適用することができます。

IE9でもCSS3のグラデーションや一部プロパティはまだ使えないものが多くあります。だからといってCSS3を使わない(使えない)理由にはなりませんし、プログレッシブエンハンスメントの考えに沿って古いブラウザへの対応は割切って考える事も必要だと思います。

Let’s enjoy CSS3! 🙂