IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > ドロップシャドウ > box-shadowの解説
  カテゴリ別さくいん
  タグ別さくいん

box-shadowの解説

ボックスのドロップシャドウを指定するには?

要素書式

box-shadow: 【ドロップシャドウ指定】 [,【ドロップシャドウ指定】...] ;

対応ブラウザ

  • IE 9:○
  • Firefox 10.0:○
  • Opera 11.61:○
  • Chrome 17.0:○
  • Safari 5.1:○

    ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
    ブラウザWindows 7上で動作確認を行っています。
    ユーザーの設定より、異なる挙動をする場合があります。

値一覧

ドロップシャドウは複数指定することが可能です。

内容
ドロップシャドウ指定none影を表示しません。
【影の凹凸指定】 【影の色】 【影の水平位置】 【影の垂直位置】 【影のぼかし半径】 【影の拡大半径】指定した内容の影をボックスに表示します。
「影の凹凸指定」と「影の色」の順序は、残りの4つの間に割り込まなければ任意です。
位置と半径を示す4つの数値はこの順序である必要があります。

それぞれのドロップシャドウ指定で使用する値の意味は以下の通りです。

内容
影の凹凸指定キーワードinsetを指定すると影がボックスの内側に表示されます。省略した場合は、外側の影になります。
影の色ボックスの影の色を指定します。省略可能です。
省略時にはChromeとSafariでは透明になりますが、IE、Opera、Firefoxではボックスの「color」プロパティと同じ色になります。
影の水平位置指定された長さだけ、ボックスから右にずれた位置に影を表示します。
影の垂直位置指定された長さだけ、ボックスから下にずれた位置に影を表示します。
影のぼかし半径影のぼかし半径を指定します。
この値が大きいほど、影は薄くぼかされ、大きくなります。省略可能です。
影の拡大半径影の拡大縮小を指定します。
正の値であればそれだけ影が拡大し、負の値であればそれだけ影が縮小して表示されます。省略可能です。

解説文

box-shadowプロパティを指定すると、ボックスに効果として影をつけることができます。ボックスに角丸効果を付けた場合は、影の角も丸くなります。

影を指定するには、「影の凹凸指定」、「影の色」に、「影の水平位置」、「影の垂直位置」、「影のぼかし半径」、「影の拡大半径」を指定します。「影の水平位置」と「影の垂直位置」のみ必須です。

「影の凹凸指定」は影がボックスの外側に伸びるか(ボックスが浮き上がって見える効果)、ボックスの内側に伸びるか(ボックスが内側に向けて窪んでみえる効果)を指定します。何も指定しなかった場合は既定で外側の影となり、「inset」を指定すると、内側の影となります。

「影の色」には表示する影の色を指定します。「影の色」は省略可能ですが、ブラウザによって省略時の既定の色が異なるので、複数のブラウザで同一の表示をさせる場合には明示的に指定する必要があります。

「影の水平位置」と「影の垂直位置」には、影をその値の分だけずらす長さを指定します。たとえば「7px 8px」と指定すると、ボックスから右に7px、下に8pxずらした位置に影が表示されます。「影のぼかし半径」は、影のぼかしの程度を指定します。この値が大きいほど影は広く薄くぼかされて表示されます。

「影の拡大半径」は影をボックスの大きさより拡大縮小して表示したいときに指定します。正の値を指定するとそれだけ拡大され、負の値を指定するとそれだけ縮小されます。

以下のように指定すると、緑色の影が、文字列から、右に5px、下に7pxずらした場所に、1pxのぼかし半径、5pxの拡大半径で、外側に表示されます。

box-shadow: green 5px 7px 1px 5px;

同じボックスに複数の影を付けることもできます。その場合には、影の設定をカンマで区切って、続けて指定します。

複数指定した場合、最初に指定した影が一番上になり、次の影がその下に重なり、以下順次、下に重なっていく形になります。

以下の例では緑の影に追加して、赤い影を表示しています。

text-shadow: green 5px 7px 1px, red 10px 10px;

サンプルソース

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <style>
 .box{
     width:100px;
     height:100px;
     border:1px solid silver;
     margin:50px;
     color:white;
     background-color:green;
 }
 #box1 {
     box-shadow: 0.5em 0.5em blue;
 }
 #box2 {
     box-shadow: 0.5em 0.5em blue, red -0.2em 0.7em 5px;
 }
 #box3 {
     box-shadow: 0.5em 0.5em 1em 1em blue ;
 }
 #box4 {
     box-shadow: 0.5em 0.5em 1em blue inset ;
 }
 </style>
 </head>
 <body>
 <p id="box1" class="box">右下に青い影を表示します</p>
 <p id="box2" class="box">上に追加して左下に赤い影を表示します</p>
 <p id="box3" class="box">ぼかしたうえで拡大した青い影を表示します</p>
 <p id="box4" class="box">内側に影を表示します</p>
 </body>
 </html>

関連項目




AQUOS RAQUOS R
シャープのスマートフォン「AQUOS」シリーズのフラグシップモデルの呼称。
LAVIE Note MobileLAVIE Note Mobile
NECが販売するモバイルノートPCのシリーズ。
Galaxy S8 PlusGalaxy S8 Plus
スマートフォン「Galaxy S8」の大画面モデル。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年4月27日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   リーンスタートアップ  (用語辞典)
ランキング4   スワイプ  (用語辞典)
ランキング5   ライトバック  (用語辞典)
ランキング6   コンテキスト  (用語辞典)
ランキング7   バリデーション  (用語辞典)
ランキング8   オムニチャネル  (用語辞典)
ランキング9   フラッグシップモデル  (用語辞典)
ランキング10   アクティビティ  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.