Moritabox-shadowの使い方について、解説します。CSS3の登場によって、かつては画像で作っていたボタンなどのパーツをCSSだけで表現できるようになりました。角丸やボーダーに画像を設定するなど色々できるようになりましたが、今回はボックスに影をつけてオブジェクトをかっこ良くする方法を解説します。CSSを覚えていなくても色々な効果を作れるサービスもまとめていますので、参考にしてください。関連ページbox-shadowで実際に作ってみます※モダンブラウザでないと確認できませんので、ご了承ください。#ccc;影の広さにマイナスの値を設定することでボックスがふんわり浮かんだようなエフェクトになります。#ccc;影の広さを-3pxとしたのは0pxと指定した場合より、狭くする為です。inset;内側に影を表示したい場合はinsetを最後につける事で可能となります。inset;Appleのサイトのようなに、マウスオーバーの選択範囲などにも使えそうですね。inset;box-shadowベンダープレッフィックスをつけた場合:ベンダープレッフィックスとは各ブラウザでCSS3の実装を反映させる仕様です。inset;box-shadowはいかがでしたか。今までだと、画像に影をつけたり、backgroundに背景画像をつけるなど、とても面倒でしたが、ずいぶんとやりやすくなりました。box-shadowを使う事でWEBサイトの表現の幅が広がると思います。コンテンツの分類や目立たせたい場所に気軽に適用できるのが便利ですね。制作のヒント上記で掲載した方法は基本的なもので簡単に実現できます。おしゃれなエフェクトを実現したい方、例えば、写真の右下だけにうっすらと影があるとか、影のカーブをなめらかにしたいとか、上下に影を表示したいなどという要望もあると思います。その場合はCSSの擬似要素:afterや:beforeに対してbox-shadowをかけることで可能です。基本以上の効果が欲しい方は検索してみてください。関連ページCSSジェネレーターを使うと覚えておくのが難しいCSS効果を簡単に作れます。こちらのページも時間がある時にご覧ください。