前回書いたCSS3で直方体作ったときに、今までなんとなくだった擬似要素について勉強し直したのでメモに残しておこうかと…。
擬似要素ってなんでしょう
恥ずかしながら、不勉強で今まで:beforeや:afterって:hoverと同じ擬似クラスかなって思ってました（マテ）。
擬似要素は読んだまんま、擬似的な要素を作るためのものでした。htmlのソースには存在しないけれど、ブラウザ上には見える幽霊のような要素を作る事ができるのが擬似要素です。
:before は指定した要素の手前に、:after は指定した要素の後に要素を追加します。これら追加した擬似要素を活用する事で、ごちゃごちゃしたhtmlを書かなくても影をつけたり重ねたり色々な装飾が出来るというわけです。
ちなみにサポートブラウザは2014年1月現在、下記のようになっています。
Firefox3.5 以上
Chrome
Safari4 以上
Opera6 以上
IE8 以上
ブラウザシェア率を考えても、もう普通に使っても良いような気がしますねー。
擬似要素で何ができるか
アイディア次第で本当にいろいろなことが実装出来ますが、ここでは１枚の画像しか使わずに重ねたように見せるのを紹介しましょう。下記のサイトを参考にしています。
Image Stack
まず画像１枚を用意します。
<p class="test"><img src="photo.jpg" width="200" height="200"></p>
次に、cssです。擬似要素を使う時は、content:;に追加したい要素の中身を記述しますが、画像にしたいときなどは空の指定で記述をします。この記述は必須なので、これを書かないと擬似要素は動いてくれません。追加した空の要素は空divが追加できるようなイメージで良いと思います。
/*一番前になる*/
.test{
border: 6px solid #fff;
float: left;
height: 200px; width: 200px;
margin: 50px;
position: relative;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
/*一番後ろになる*/
.test:before{
content: "";
height: 200px; width: 200px;
background: #eff4de;
border: 6px solid #fff;
position: absolute;
z-index: -1;
margin-left:-10px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
/*真ん中になる*/
.test:after{
content: "";
height: 200px; width: 200px;
background: #768590;
border: 6px solid #fff;
position: absolute;
z-index: -1;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
他にもたくさん使い道はあるので、下記の参考サイト様を見てみるのが良いと思います！ここより断然詳しく載っていますので。
参考サイト様
[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス
CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！*prasm
疑似要素で出来るあれこれ | CSSPRO
