編集(4)角丸をCSSで表現ページ全体の角を丸くして柔らかいイメージにしていこうと思います。↑完成予想図(笑)角を丸くするには「border-radius」というプロパティを使えばOK。6px;}こんな感じで#page全体に太めのボーダーを設定して、そのボーダーを丸くするだけでOK。これだとメニューの左右にすき間が空いてしまい、ちょっと不格好。ちなみに上記の-webkit-や-moz-ってのはブラウザごとの指定らしく、border-radiusなどのプロパティを追加するときはセットで同じように加えてあげるといいらしいー。言ったものの2012年8月現在では、これらの記述がなくても大丈夫になってきているようなので面倒なら書かなくてもいいかもー。うちのような個人ブログの場合は、自分の環境で見えてればいいやとかそんなレベルだと思うので、消しちゃってもいいかも。いうことで以降の記述は省いています。いうことでまずは、ページ全体(ページの土台となるコンテナ)を角丸化し、続けてヘッダー上部の画像を角丸にし、続けてフッターの部分を角丸にしてすき間のない綺麗な角丸にしたいと思います。ページ全体を角丸化まずはページ全体を角丸処理をします。6px;}現状では見た目はまったく変わりません。土台が角丸になっただけです。その角が丸くなった度台の上に、角が丸くなっていないヘッダーやフッターが乗っかってるとイメージすると分かりやすいかも。あっ、あと前回ブラウザ上部にピッタリくっつけていたので「margin-top」ですき間を空けました。イメージ的にはこんな階層。ヘッダー画像を角丸にするこれはCSSではなく画像編集ソフトで直接角丸にしてください。うちではFireworksを使っているけど、大体の画像編集ソフトなら角丸くらいはできるんじゃないかなー。こんな感じで上部だけを丸くする。このとき保存形式はpngにして、角の丸い部分を透過処理するのを忘れずに。あとはダッシュボードでこのヘッダー画像に差し替えればOKです。フッター部分を角丸にするフッター部分は、#site-generatorというコンテナなので、この下の部分だけを角丸にしましょう。6px」のように4つになっているのは下の部分だけを指定したいからです、ちなみに「6px」のようにひとつだけだと4角全部。6px」のようにふたつだけだと、左上と右下は0px、右上と左下は6px。10px」のように3つだと左上は0px、右上と左下は6px、右下は10pxというような分け方ができます。こまかーい設定もできるんだけど、今のところはこれだけ知っていればいい感じなので、これだけでー。(笑)これで全体が角丸になりやわらかーいイメージになりましたー。影を付けて立体的にこれだけだとなんか寂しいので影を付けてちょっと立体的にしました。#666666;}影を付けるのは「box-shadow」です。#pageに指定することで全体的に影が付いた感じになりましたー。これでかなりスッキリした感じになったかなー。ことで次回は中身をもうちょっとだけいじりたいと思いますー。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。検索このサイトについてCSSやHTML5を勉強しつつ、MacやiPad、iPhoneなどの便利なアプリを紹介したり、雑記なんかを書いたりしていこうと思っています。Twitterもやっているのでよかったらフォローお願いしますー。