« jQueryでページネーションを実現するプラグイン | トップページ | テーブルの数値をグラフ化してくれるjQueryプラグイン »

2010年12月13日 (月)

3方向を囲まれた箱をCSS3を利用して記述する方法

Tommy02
図のような箱を記述する際に、どういった方法で記述しているでしょうか?
色々な方法があるかと思いますが、CSS3を利用して記述してみます


普通に記述をすると

{
border-top: 1px solid #F00;
border-right: 1px solid #F00;
border-bottom: 1px solid #F00;
}

あるいは

{
border: 1px solid #F00;
border-left:0;
}

このどちらかの書き方をする方が多いのではないのでしょうか

CSS3を利用して、同じ外見の物を作ろうと思った時に、box-shadowを利用するという方法があります。
記述は以下の通りです。

{
box-shadow:
inset -1px 0 0 #F00,
inset 0 -1px 0 #F00,
inset 0 1px 0 #F00;
}

box-shadowプロパティについての説明を簡単にすると、ボックスに影をつけるプロパティなのですが、
左から、水平方向の位置、垂直方向の位置、ぼかし具合、影の色という指定をしています。
insetをつけることで、箱の内側に影を作成することができます。

水平方向左に1pxの影をつけ、垂直方向の上下それぞれに1pxの影をつけることで、
擬似的なborderを設定しています。

この記述方法の利点としては、ボックスの内側にborder(の様な物)を作りますので、
ボックスの大きさの調整などが容易にできることです。
逆に、不便な点をあげるとすると、CSS3に対応していないブラウザでは表示できないこと、
-moz-と-webkit-の記述を考慮すると冗長になりがちなところでしょうか。

CSS3では今までにない記述ができるので、可能性を探る楽しさがありますね。

|

« jQueryでページネーションを実現するプラグイン | トップページ | テーブルの数値をグラフ化してくれるjQueryプラグイン »

css」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/38059565

この記事へのトラックバック一覧です: 3方向を囲まれた箱をCSS3を利用して記述する方法:

« jQueryでページネーションを実現するプラグイン | トップページ | テーブルの数値をグラフ化してくれるjQueryプラグイン »