ywork2020.com

Title

ブロック要素とインライン要素のボックスに影をつける

目次 (INDEX)

box shadowとは

box shadow とは次の語句からなるCSSのプロパティです。
box
読み: ボックス
意味: 箱
shadow
読み: シャドウ
意味: 影、暗く見える部分

目次に戻る

box-shadowの概要

このプロパティはブロック要素とインライン要素のボックスに影つけることができます。

shadowとは前述しているとおり、「影」という意味と「暗く見える部分」を指す言葉です。 つまり、この場合、要素のボックス部分に対して暗く見える部分を作り、影に見えるようにデザインするためのプロパティだということです。

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素を使ってbox-shadowプロパティを使ったデザインを試していきたいと思います。

検証に使う要素はdiv要素です。この要素はブロックレベル要素であり、主にコンテンツをまとめておくための 汎用コンテナーとして使われます。本来のマークアップとしては無意味ですが、ページデザインとコンテンツの分離化という目的においては、 現代のSEOにとっては無視できない要素でもあります。

それでは、まず構文から見ていきましょう。

構文

セレクター{box-shadow: 横軸補正値 縦軸補正値 ぼかし半径値 広がり半径値 カラー値;}

初期値: none

このプロパティの初期値はnoneです。 これは「ない」という意味であり、ボックスの影をつけない状態を指します。

div要素

div{box-shadow: none;}

目次に戻る

数値: 値を2つ指定する

box-shadowプロパティを機能させるには最低でも2つの設定値が必要です。 必要とする値は要素の元の表示原点からの、横軸のオフセット値と縦軸のオフセット値です。 1つ目の値がoffset-x(横軸)、2つ目の値がoffset-y(縦軸)となります。

値の単位についてはpxやem、exなどCSSで使用される一般的な単位を使用することができますが、 デザインとして、シビアな調整を要するプロパティなのでpxが使われることが多いようです。

div要素

div{box-shadow: 10px 10px;}

目次に戻る

数値: 値を3つ指定する

このプロパティの3つ目の設定値はblur-radiusです。 blur-radius とは「ぼかし半径」の意味です。 下のサンプルを見比べていただくと、よく分かると思いますが、 影の四方角の半径に違いがあり、それを基準に計算が行われて「ぼかし」が反映されるということです。

この設定値の単位にもpxが使われることが多いようです。

div要素
ぼかし半径5px
div要素
ぼかし半径15px

div{box-shadow: 10px 10px 5px;}
div{box-shadow: 10px 10px 15px;}

目次に戻る

数値: 値を4つ指定する

このプロパティの4つ目の設定値はspread-radiusです。 spread-radius とは「広がり半径」の意味ですが、ここでは半径という言葉は無視していただいた方が良さそうです。 これは、言葉で説明しづらいので申し訳ないのですが、影の領域を拡張するための設定値ということになると表現させていただきます。

下のサンプルを少し極端な例にしてみますので、見比べていただくことで理解していただけると良いのですが、 負の数値を指定した場合、影の部分は元の要素の大きさより縮小されます。 また正の数値を指定した場合には影の部分は元の要素の大きさよりも拡張されます。

div要素
広がり-5px
div要素
広がり5px

div{box-shadow: 10px 10px 0px -5px;}
div{box-shadow: 10px 10px 0px 5px;}

目次に戻る

数値: 値を5つ指定する

このプロパティの5つ目の設定値はcolorです。color とは「色」の意味です。

便宜上、5つ目という表現をしていますが、実際には5つ目に記述する必要はなく、 何番目に記述してもコードとしては成立します。

色の指定方法については、 色見本 (カラーサンプル) のページを参照していただければ幸いです。

div要素
div要素

div{box-shadow: 10px 10px 0px 0px #ccc;}
div{box-shadow: 10px 10px 0px 0px rgba(200,200,100,0.5);}

目次に戻る

キーワード値: inset

このプロパティで使用されるキーワード値は、初期値のnoneと、 このinsetキーワードとなります。

このキーワードを指定することで影の位置を通常の真逆の位置にすることができます。 これにより通常は要素が浮き上がって見えるところを凹んでいるように見せることができます。

div要素

div{box-shadow: inset 3px 3px rgb(200,200,100);}

目次に戻る

グローバル値

box-shadowプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のnoneに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
div{box-shadow: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

box-shadow: none;

box-shadow: 10px 10px;

box-shadow: 10px 10px 5px;

box-shadow: 10px 10px 15px;

box-shadow: 10px 10px 0px -5px;

box-shadow: 10px 10px 0px 5px;

box-shadow: 10px 10px 0px 0px #ccc;

box-shadow: 10px 10px 0px 0px rgba(200,200,100,0.5);

box-shadow: inset 3px 3px rgb(200,200,100);

サンプル: ブロック要素


サンプル: インライン要素

目次に戻る