WEBCRE8.jp > 作る > [CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)

[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)

この記事は約10分ぐらいで読めます

先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★

擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ

今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。

`box-shadow`を使った枠線

box-shadowによる様々な枠線

まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。

デモ：box-shadowによる実線のボーダー

`box-shadow`で実線を作れる

borderで枠線をつけるところ、ドロップシャドウをボケ足をなくして引くことによって実線の様に表現します。

box-shadow: 0 0 0 5px #000 ;

ドロップシャドウはbox-shadow: 影のx座標影のy座標ぼかしの度合いぼかしのサイズ色 ; となっています。

これらの前半の数値はちょうどPhotoshopのレイヤースタイルのドロップシャドウで言う座標(x,y)、スプレッド、サイズと同じ様な効果を持っています。

これと同じようなことをCSSでやる

Photoshopのレイヤースタイルについては以前の[Photoshop]レイヤースタイルの重なり方を研究する – WEBCRE8.jpと言う記事で詳しく説明しています。これと全く同じこと(ドロップシャドウを実線に)をやっているわけです。

`inset`を使うと二本目の線を作れる

そしてbox-shadowは内側にも影をつけることが出来る為、同じようにすることで内側と外側に線を引くことが出来ます。

box-shadow: 0 0 0 5px #000 inset ;

box-shadowで内側に線を引いた場合、ちょうどbox-sizingをborder-boxに設定したときの様になります。この線はあくまで影なので、元々のコンテンツ領域を拡張したりしないのが魅力なわけです。表示されないならされないだけ、と言う感じで非常に便利ですねー。

当然、borderも併用できるので三本の線を作ることもできます。

と言うか無限に出来る

別にborderは使う必要もなく、box-shadowのみでいくらでも枠線を多重につけることが出来ます。

box-shadow: 0 0 0  5px #000,
            0 0 0  5px #333 inset,
            0 0 0 10px #666 inset,
            0 0 0 15px #999 inset,
            0 0 0 20px #ccc inset,
            0 0 0 25px #fff inset;

擬似要素を使ったオブジェクトの追加

次に擬似要素を使ったオブジェクトをデザインに取り入れる方法です。これも以前WEBCRE8.jpでは[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン「orderedList.js」 – WEBCRE8.jpと言う記事でリスト部分に独自のスタイルを設定した通し番号などをつける為のjQueryプラグインを作成、配布しています。

今回はつける飾りに特別な意味などなく、あくまでコンテンツを飾りつけるようなものがメインです。

`::before`と`::after`で形状の違うものを二つまで付け足せる

::before擬似要素等を使えばコンテンツの前に記号などを挿入するし、マーカーなどの装飾をつけることが出来ますが、これを使って色んな装飾が出来ます。この装飾は、一つの要素に対して::beforeと::afterで二つまでつけることが出来ます。

.symbol::before{
    content: "★" ;
}

.symbol::after{
    content: "●" ;
}

重なりの順番はz-indexで変えることが出来ます。両方とも前に持ってくることも出来ます。

空の`content`を`border`や`border-radius`で変形させる

空のcontentを挿入し、それにborderやborder-radiusをつけることで色々な図形を表示させます。これは単純に変わった形のマーカーをつけるほか、吹き出し部分などを作るのに頻繁に使われます。

前回の記事でも紹介しましたが、以下の記事を参考にすれば色んな図形を表示させられますねー。

The Shapes of CSS

また、以下のコンテンツはdivのみで(つまり::beforeと::afterを駆使して)様々なアイコンを再現したものです。

One div - The single element HTML/CSS icon database

http://one-div.com/

`content`に文字を入れることも出来る

挿入するcontentは空でなくても、何らかの記号や文字列を入れることもできます。工夫によってはこれはかなり色んな演出が出来ます！

webフォントを使えば形状の選択は無限

更に、幾何学図形や文字、記号でなくても特別な形状のwebフォントや自作フォントを使えばもっと全く違う装飾をすることも出来るわけです。

`box-shadow`で数も無限に複製できる

そして、contentで挿入した図形は実はbox-shadowによる影を作ることでいくつでも複製できます。複製した影は色とサイズと位置を変更できるので、量産して図形を作ることも出来ます。

以下は参考にしたコード。リラッ○マを作ってます。

1DIV リラックマ（Firefox推奨） – jsdo.it – Share JavaScript, HTML5 and CSS

`span`を使えばいくらでも追加は可能

気付きにくいですが、前述のリ○ックマは実は形を三つしか使っていません。いびつな角丸、丸、三角だけ…つまり、一つの要素だけでこの表示を実現させています。普通にこのような複雑な見た目の要素を作るのであれば要素を追加しないと難しいかなーと思います。まあそこまでする必要ないですけどねｗ

擬似要素による装飾の注意点

なんかなんでも出来そうに見えるんですけど、注意点と言うか、普通にやるとこういう事やろうとするとつまづくよーみたいなことを。

IE対応のことは忘れてください

IEのことが気がかりであれば、最初から画像を使いましょうw 擬似要素はIE8から使用が可能ですが、CSS3で正しい表記にして::beforeと書くと効かないです。:beforeとCSS2形式で書くことには特に現時点ではデメリットはありませんが…擬似要素は所詮装飾的な意味合いの強い(特にこの使い方では)ものです。なくてもコンテンツを読むにはあまり困りません。潔く忘れましょう！！

ただ、フォールバックに少しは気を使った方がいいとは私も思っています。例えば引用かそうでないか、見出しかそうでないか、訂正などの重要なコンテンツの扱いの違いは擬似要素のみでしか判別できないようにするべきではないかなと。

影の位置や拡がりはピクセル指定しかできない

ぱっと見露見しにくい問題ですが、基準となる図形から見た位置しか指定出来ないbox-shadowは、スマートフォン対応のような可変環境では使いにくいですね。後述する四隅に図形を配置するようなデザインを実現したい場合は、全てを単一要素の::beforeと::afterだけではカバーすることは出来ないでしょう。多分。私は諦めてspanで囲んで作りました。