ボックスに影を付けるCSS・ボックスを角丸にするCSS

前回、「文字に影を付けるためのCSS」をご紹介しましたが、今回はボックスに影を付けるためのCSSをご紹介します。文字のCSSと同じようにブラウザのバージョンによっては確認することができませんが、画像を使わないので手間がかからずオススメです。

CSSでボックスに影を付ける

box-shadow:1px 2px 3px #000;

これがボックスに影を付けるためのCSSです。1pxが横方向のズレ、2pxが下方向のズレ、3pxがボカシ具合となっています。影の色は好きな色にすることができます。

.box-s {
    box-shadow:1px 2px 3px #000;
    height: 100px;
    width: 200px;
    border: 1px solid #999;
    padding: 10px;
    }

box-sというクラス名のdivに影を付ける設定はこのようになります。

上記の設定で以下のような影が付きます。

このボックスに影を付ける

最新のFirefox、Chrome、Internet Explorerは9以降であれば確認することができるはずです。

古いバージョンのFirefoxやChromeに対応するCSSは以下のようになります。

-moz-box-shadow: 1px 2px 3px #000; /* Firefox用 */
-webkit-box-shadow: 1px 2px 3px #000; /* Safari,Google Chrome用 */ 

IEの8以前のバージョンについては複雑になるので割愛します。

CSSでボックスを角丸にする

border-radius: 10px;

角丸を作るためのCSSはこのようになります。10pxというのは角丸の半径です。

.box-s{
    height: 100px;
    width: 200px;
    border-radius: 10px;
    border: 1px solid #999;
    padding: 20px;
    }   

box-sというクラス名のdivを角丸にする設定はこのようになります。

上記の設定で以下のような角丸ボックスを作ることができます。

このボックスを角丸にする

こちらも最新のFirefoxやChrome、Internet Explorerは9以降であれば確認することができるはずです。

古いバージョンのFirefoxやChromeに対応するCSSは以下のようになります。

-moz-border-radius: 10px;    /* Firefox */
-webkit-border-radius: 10px; /* Safari,Chrome */

IEの8以前のバージョンについては複雑になるので割愛します。

角丸にして影を付ける

影と角丸のCSSは併用することができますので、ボックスを角丸にして影を付けることもできます。

.box-s {
    box-shadow:1px 2px 3px #000;
    height: 100px;
    width: 200px;
    border-radius: 10px;
    border: 1px solid #999;
    padding: 20px;
    }

box-sというクラス名のdivを角丸にして影を付ける設定はこのようになります。

このボックスを角丸にして影を付ける

いずれのCSSも古いブラウザでは確認できない可能性がありますが、最新のブラウザでは対応しています。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2013年2月14日

サブコンテンツ

このページの先頭へ