すぐに試せる！１分でブログを立体的に。divに影を追加する方法

01 . これだけでOK

まずは元の状態を御覧ください。通常のラインだけのものです。これはこれでスッキリしていて好きなのですが、これにシャドウを加え立体感を出してみます。

追加するCSSはこれだけ。数値や色はサイトに合わせて調整してみてください。

.shadow{
    box-shadow: 0px 0px 18px 3px #999999;
}

これをCSS（ワードプレスの場合はstyle.css）に追加してサーバーにアップロードします。最初のドットはクラス名という意味ですね。idのように１箇所だけでなく複数箇所に使いますのでclassとしています。

あとは使いたい場所のdivにclassを追加してあげれば出来上がり。

<div id="main" class="shadow">
	<p>ほにゃらら</p>
</div>

先の画像がこんな感じに変わります。

02 . box-shadowプロパティ

box-shadowは名前の通りボックスに影をつけるプロパティです。上の例では数値を４つ指定していますが、２つから４つの数値を与えることができます。

最初の２つは、水平方向と垂直方向になります。１つ目が水平方向でプラスの数値を指定すると右方向へ、マイナスの数値を指定すると左方向へ影をつけます。２つ目が垂直方向でプラス値が下方向、マイナス値が上方向になります。

.shadow{
    box-shadow: 3px 3px #999999;
}

右下に向けて3px影を付けますのでこのようになります。

３つ目の数値はぼかしの距離です。数値が大きいほどぼかしが強くなります。４つ目の数値は広がりを意味します。整数値を指定することで全方向へ影が広がることになります。

３つ目、４つ目は省略すると数値は０として扱われます。ですので最初の画像に使ったCSSでは３つ目、４つ目の値を指定したいため、１つ目、２つ目の引数に０を指定し、３つ目のぼかしに18px、４つ目の広がりに3pxと指定しています。

03 . こんなことも出来る

box-shadowプロパティにはinset属性というのもあります。これは内側方向に影をつけることができます。CSSはこんな感じ。

.shadow{
    box-shadow: 0px 0px 18px 3px #999999 inset;
}

こうすると、こんな感じになります。

04 . 立体感が生まれる

ちょっとした指定でブログに立体感が生まれますね。上の写真では説明用に色を濃い目にしていますが、今は実際にブログで見てもらっている状態です。メイン側を濃く、サイドバーを少し薄くしてメインコンテンツを強調してみました。

CSS、HTMLに数行追加するだけで出来ますのでお試しください。