ページ全体の角を丸くして柔らかいイメージにしていこうと思います。



↑完成予想図（笑）

　角を丸くするには「border-radius」というプロパティを使えばOK。手っとり早く全体を角丸にしたいなら、

#page {
	border:4px solid #FFF;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}

こんな感じで#page全体に太めのボーダーを設定して、そのボーダーを丸くするだけでOK。ただ、これだとメニューの左右にすき間が空いてしまい、ちょっと不格好。ちなみに上記の-webkit-や-moz-ってのはブラウザごとの指定らしく、border-radiusなどのプロパティを追加するときはセットで同じように加えてあげるといいらしいー。とは言ったものの2012年8月現在では、これらの記述がなくても大丈夫になってきているようなので面倒なら書かなくてもいいかもー。とくにうちのような個人ブログの場合は、自分の環境で見えてればいいやとかそんなレベルだと思うので、消しちゃってもいいかも。（笑）　ということで以降の記述は省いています。




ということでまずは、ページ全体（ページの土台となるコンテナ）を角丸化し、続けてヘッダー上部の画像を角丸にし、続けてフッターの部分を角丸にしてすき間のない綺麗な角丸にしたいと思います。

ページ全体を角丸化

まずはページ全体を角丸処理をします。

#page {
	margin-top:30px;
	width:950px;
	border-radius: 6px;
}

現状では見た目はまったく変わりません。あくまで土台が角丸になっただけです。その角が丸くなった度台の上に、角が丸くなっていないヘッダーやフッターが乗っかってるとイメージすると分かりやすいかも。あっ、あと前回ブラウザ上部にピッタリくっつけていたので「margin-top」ですき間を空けました。



イメージ的にはこんな階層。


ヘッダー画像を角丸にする

これはCSSではなく画像編集ソフトで直接角丸にしてください。（笑）　うちではFireworksを使っているけど、大体の画像編集ソフトなら角丸くらいはできるんじゃないかなー。




こんな感じで上部だけを丸くする。このとき保存形式はpngにして、角の丸い部分を透過処理するのを忘れずに。あとはダッシュボードでこのヘッダー画像に差し替えればOKです。


フッター部分を角丸にする

フッター部分は、#site-generatorというコンテナなので、この下の部分だけを角丸にしましょう。

#site-generator {
	border-radius: 0px 0px 6px 6px;
}

指定が「0px 0px 6px 6px」のように4つになっているのは下の部分だけを指定したいからです、ちなみに「6px」のようにひとつだけだと4角全部。「0px 6px」のようにふたつだけだと、左上と右下は0px、右上と左下は6px。「0px 6px 10px」のように3つだと左上は0px、右上と左下は6px、右下は10pxというような分け方ができます。さらにこまかーい設定もできるんだけど、今のところはこれだけ知っていればいい感じなので、これだけでー。（笑）



これで全体が角丸になりやわらかーいイメージになりましたー。


影を付けて立体的に

これだけだとなんか寂しいので影を付けてちょっと立体的にしました。

#page {
	margin-top:30px;
	width:950px;
	border-radius: 6px;
	box-shadow : 2px 2px 4px #666666;
}

影を付けるのは「box-shadow」です。#pageに指定することで全体的に影が付いた感じになりましたー。




これでかなりスッキリした感じになったかなー。ってことで次回は中身をもうちょっとだけいじりたいと思いますー。