[18-2] 要素にシャドウをつけよう(box-shadow)

最終更新日:2017年11月01日  (初回投稿日:2011年07月28日)

今回は、要素に「シャドウ」をつける box-shadowプロパティを使ってみましょう。

CSSプロパティ box-shadow
参考:CSS Backgrounds and Borders Module Level 3 | 7.1. Drop Shadows: the ‘box-shadow’ property
本日のINDEX
  1. box-shadowプロパティの値
    1. box-shadow の値は 最低 2つ必要
    2. 3つ目の値は、シャドウをぼかす半径
    3. 4つ目の値は、シャドウを拡張させる半径
    4. 以上 4つの値は絶対この順番
  2. オプションの値は「シャドウ色」と「内側へのシャドウ」
    1. ボックスシャドウの色
    2. 内側へのシャドウ
  3. 2重のボックスシャドウも指定できます
  4. 疑似要素「::first-letter」にも使えます
  5. デフォルト値「none」で影なしに戻せます

2017年10月:2重のボックスシャドウの構文を追加しました。
● 2017年10月:疑似要素「::first-letter」への適用のサンプルを追加しました。

2015年02月:この記事には ベンダープレフィックス(-webkit- などの接頭辞)を使っていましたが、もう不要と判断し記事から削除しました。

box-shadowプロパティの値

サンプルファイルでは、<section>、<aside>要素に ボックスシャドウを使っています。
(クリックで別ウィンドウでサンプルが開きます)

サンプルファイルの HTML, CSS ソースコードをブラウザで見るには、
[14-1] ブラウザでソースを表示する を参考にしてください。

ここでは、下へ2px の位置に 5pxの幅でぼかした、色は薄いグレー(#eee)のシャドウを指定しています。

article > section, aside {
	border:1px solid #ddd; /*ボーダーの指定*/
	border-radius:12px;    /*角丸の指定*/
	box-shadow:0 2px 5px #eee /*ボックスシャドウの指定*/
	}

3つの値を使っていますね。
これから box-shadowプロパティの値のルールを見ていきましょう。

box-shadow の値は 最低 2つ必要

box-shadowプロパティは、最低限 2つの値が必要です。
1つ目の値は、水平方向のオフセット(ずらす距離)
2つ目の値は、垂直方向のオフセット です。
単位を付けた数値で「距離(長さ)」を指定します。

Sample
#sample {
	box-shadow:5px 10px;
    }

このとき、シャドウの色はデフォルトで文字色(colorプロパティの値)です。

マイナスの値も使えます
オフセットをマイナスにすれば、左側や上へシャドウをつけることができます。

Sample
#sample {
	box-shadow:-5px -10px;
    }

3つ目の値は、シャドウをぼかす半径

box-shadowプロパティ3つ目の値は、ぼかしの半径です。
単位を付けた数値で「半径」を指定します。
これは、マイナスの数値は使えません。半径だからね。

Sample
#sample {
	box-shadow:-5px -10px 5px;
    }

4つ目の値は、シャドウを拡張させる半径

box-shadowプロパティ4つ目の値は、拡張の半径です。
単位を付けた数値で「半径」を指定します。

値を 4つとも指定したものはこちら。5pxぶん膨らんでいます。

Sample
#sample {
	box-shadow:-5px -10px 5px 5px;
    }

ぼかしを「0」にすると、シャドウが 5px 拡張しているのがわかります。
(水平オフセットが「-5px」拡張が「5px」なので、右のエッジが要素と揃っています)

Sample
#sample {
	box-shadow:-5px -10px 0 5px;
    }

マイナスの値も使えます
数値をマイナスにすれば、シャドウを縮小させられます。

Sample
#sample {
	box-shadow:-5px -10px 0 -2px;
    }

以上 4つの値は絶対この順番

ここまでの 4つの並び方は絶対不動。この順番で決まっています。
1水平オフセット 2垂直オフセット 3ぼかし半径 4拡張の半径

このうち必須なのは、1水平オフセット 2垂直オフセット

3ぼかし半径 4拡張の半径 は、無くてもいいけど、入れるなら必ずこの順。

例えば、値を3つにしたら、3番目の値は必ず「ぼかしの半径」です。
「ぼかし半径」は無しで、「拡張の半径」を指定したいのなら、3番目の数値を「0」にして 値を4つ全部書きます。

オプションの値は「シャドウの色」と「内側へのシャドウ」

box-shadowプロパティには、さらに「シャドウの色」と「内側へのシャドウ」の値があります。

ボックスシャドウの色

シャドウの「色指定」もできます。
特に指定しなければ、デフォルト色は「colorプロパティの色(文字色)」です。

色指定の値は、先ほどの「水平オフセット・垂直オフセット・ぼかし半径・拡張半径」のセットの前か後ろに入れます。

Sample
#sample {
	box-shadow:5px 10px #690;
    }

ウェブサイトでの色指定については、
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)をご覧ください。

こちらは、セットの「前」に指定した例。ぼかしや拡張も指定してみました。

Sample
#sample {
	box-shadow:#690 5px 10px 5px 5px;
    }

内側へのシャドウ

ボックスシャドウは内側にも指定できます。
「inset」というキーワードを入れるだけ。
これも、「水平オフセット・垂直オフセット・ぼかし半径・拡張半径」のセットの前か後ろに入れます。

Sample
#sample {
	box-shadow: 0px 0px 20px 10px #690 inset;
    }

前回の border-radiusプロパティで作った正円と、内側シャドウの指定すれば、 円形グラデーションを使わなくても、この程度は表現できます。

Sample
#sample {
	background-color:#ffc;
    margin:1em 0 2em;
    line-height:100px;
    width:100px;
    text-align:center;
	border-radius: 50%;
	box-shadow:inset 0 0 48px #690;
    }

2重のボックスシャドウも指定できます

「水平オフセット・垂直オフセット・ぼかし半径・拡張半径」+「色指定」+「inset」のセットを「,(カンマ)」で区切って 2つ指定することで、2重のボックスシャドウを指定できます。

Sample

#sample {
	background-color:#ffc;
    margin:1em 0 2em;
    line-height:100px;
    width:100px;
    text-align:center;
	border-radius: 50%;
	box-shadow:0 0 0 8px #333 inset,0 0 48px #690 inset;
    }

「,(カンマ)」の先に書いたほうが、上に乗っかります。
こんな2重丸も簡単。

Sample
#sample {
	background-color:#690;
    color:white;
    margin:1em 0 2em;
    line-height:100px;
    width:100px;
    text-align:center;
	border-radius: 50%;
	box-shadow:0 0 0 8px #690 inset,0 0 0 16px #fff inset;
    }

「inset」以外のサンプルも1つ作っておきます。

Sample
#sample {
	background-color:black;
    color:white;
    margin:1em 0 2em;
    line-height:100px;
    width:100px;
    text-align:center;
	border-radius: 50%;
	box-shadow:0 0 5px #fff,12px 12px 5px #690;
    }

疑似要素「::first-letter」にも使えます

box-shadowプロパティは、疑似要素「::first-letter」(最初の一文字)にも使えます。
が、疑似要素「::first-line」(最初の一行)には適用されません。

First-letter

HTMLはこちら。

<div id="smple">First-letter</div>

CSSはこちら。

#smple {
	margin:1em 0;
	font-size:40px;
	font-weight:bold;
	line-height:40px
	}
#smple::first-letter {
	color:pink;
	padding:.1em .4em;
	margin-right:.1em;	
	background:black;
	border-radius:50%;
	box-shadow: 3px 3px 2px pink
	}

デフォルト値「none」で影なしに戻せます

box-shadowのデフォルト値は「none」です。
box-shadowに「none」を指定すればデフォルト(影なし)に戻ります。
ある要素のみ、ボックスにシャドウをつけたくない場合はこの指定をします。

box-shadow: none;

次回予告

いかがでしたか? CSSだけで勝手に影をつけてくれるなんて便利だなあ。
次回は、テキストにもャドウをつけてみましょう!

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
04 | 2018/05 | 06
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.