CSS3を使ってレイアウト変更

かなり前に書きかけていたのですが、放置でした…。

デザイン少々いじくってみました。
記事を囲っているエリア、丸くなって、影ができていると思います。
どうでしょう？
CSS３の
border-radius（BOXの角を丸める）
box-shadow（BOXに影をつくる）
を利用しているのですが、CSS３は、すべてのブラウザで使えません。
そこで、いろいろと細工を施しました。
まず、そのソースから

.post{
	border:0;
	padding:15px 20px;
	background-color: #f5deb3;
	box-shadow: 10px 5px 10px #E1E1E1;
	-moz-box-shadow: 10px 5px 10px #E1E1E1;
	-webkit-box-shadow: 10px 5px 10px #E1E1E1;
	-o-box-shadow: 10px 5px 10px #E1E1E1;
	-ms-box-shadow: 10px 5px 10px #E1E1E1;
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
/* ２０１１年４月６日修正（ショートハンド） */
	/* -webkit-border-radius: 15px 15px 15px 15px;  */
	-webkit-border-radius: 15px;
/* あえてショートハンドで書くのなら  */
/* 	-webkit-border-top-left-radius:15px;　  */
/* 	-webkit-border-top-right-radius:15px;　  */
/* 	-webkit-border-bottom-left-radius:15px;　  */
/* 	-webkit-border-bottom-right-radius:15px;　  */
	-o-border-radius: 15px 15px 15px 15px;
	-ms-border-radius: 15px 15px 15px 15px;
	behavior: url(http://matai.main.jp/htc/ie-css3.htc);
	position:relative;
	z-index:1;
}

「box-shadow」は、影をつけます。
続く数値は、横方向のずれ、下方向のずれ、ぼかし具合、影の色を指定しています。
「border-radius」は、BOXを丸めます。
続く数値は、上、右、下、左すみの丸めるサイズを指定しています。
それに続く、指定は、「ベンダープレフィックス」といい、各ブラウザに対応するように
つけています。
-moz-　　…… Firefox向け
-webkit-　…… Google Chrome、Safari向け
-o-　　　　…… Opera向け
-ms-　　　…… Internet Explorer向け
詳しくは、
ベンダープレフィックス－CSSの基本
HTMLクイックリファレンスさん
のページです。

ただし、現在のＩＥ（７，８）は、対応しておりません。
ＩＥには、いつも困らせられます。…が、ＩＥユーザーが大多数を占めるなか、無視するわけにはいきません。
そこで、代理手段が
「ie-css3.htc」
です。
これを使うには、使用しているＷＥＢサーバが、「behavior」を使えなくてはいけません。
私が使用しているロリポップでは、初期設定では、拡張子「.htc」が認識されないため使えませんでした。
「.htaccess」に下記を追記します。

AddType text/x-component .htc

あとは、「ie-css3.htc」をダウンロードして、
behavior: url(【パス】/ie-css3.htc);
と一行追加するだけ。
詳しくは、
コリスさんのページで。

ただ、バグがあります。
ダリさんのページを参考にしました。
修正できるものはして、あきらめるところはあきらめ（ＩＥで違う表示）としました。

２０１１年４月６日追記
raigaさんのコメントにありますが、safariやchromeでは、border-radiusの
ショートハンドが使えませんでした。（現在のヴァージョンでは）

調べたら、詳しく書かれている記事がありました。
乱雑モックアップさんの記事

面倒なので
記事のエリア（.post）は、４すみすべて同じアールなので、ショートハンドを
使わないようにしました。

サイドバーのタイトル（右上、左上を丸）

/* -webkit-border-radius: 10px 10px 0px 0px; */
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;

サイドバーの内容エリア（右下、左下を丸）

/* -webkit-border-radius: 0px 0px 10px 10px;  */
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;

このように変更しました。

raigaさんありがとうごさいました。勉強になりました。