[18-2] 要素にシャドウをつけよう(box-shadow)
最終更新日:2017年11月01日 (初回投稿日:2011年07月28日)今回は、要素に「シャドウ」をつける box-shadowプロパティを使ってみましょう。
CSSプロパティ | box-shadow |
---|
●
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 {
box-shadow:5px 10px;
}
このとき、シャドウの色はデフォルトで文字色(colorプロパティの値)です。
マイナスの値も使えます。
オフセットをマイナスにすれば、左側や上へシャドウをつけることができます。
#sample {
box-shadow:-5px -10px;
}
3つ目の値は、シャドウをぼかす半径
box-shadowプロパティの 3つ目の値は、ぼかしの半径です。
単位を付けた数値で「半径」を指定します。
これは、マイナスの数値は使えません。半径だからね。
#sample {
box-shadow:-5px -10px 5px;
}
4つ目の値は、シャドウを拡張させる半径
box-shadowプロパティの 4つ目の値は、拡張の半径です。
単位を付けた数値で「半径」を指定します。
値を 4つとも指定したものはこちら。5pxぶん膨らんでいます。
#sample {
box-shadow:-5px -10px 5px 5px;
}
ぼかしを「0」にすると、シャドウが 5px 拡張しているのがわかります。
(水平オフセットが「-5px」拡張が「5px」なので、右のエッジが要素と揃っています)
#sample {
box-shadow:-5px -10px 0 5px;
}
マイナスの値も使えます。
数値をマイナスにすれば、シャドウを縮小させられます。
#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 {
box-shadow:5px 10px #690;
}
ウェブサイトでの色指定については、
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)をご覧ください。
こちらは、セットの「前」に指定した例。ぼかしや拡張も指定してみました。
#sample {
box-shadow:#690 5px 10px 5px 5px;
}
内側へのシャドウ
ボックスシャドウは内側にも指定できます。
「inset」というキーワードを入れるだけ。
これも、「水平オフセット・垂直オフセット・ぼかし半径・拡張半径」のセットの前か後ろに入れます。
#sample {
box-shadow: 0px 0px 20px 10px #690 inset;
}
前回の border-radiusプロパティで作った正円と、内側シャドウの指定すれば、 円形グラデーションを使わなくても、この程度は表現できます。
#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 {
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 {
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 {
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」(最初の一行)には適用されません。
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だけで勝手に影をつけてくれるなんて便利だなあ。
次回は、テキストにもャドウをつけてみましょう!
- 関連記事
-
- [21] 重要性を示す strong要素 と強調を示す em要素を使い分けよう
- [20] 上付き文字と下付き文字を使おう(sup, sub)
- [19] テキストにルビをつけてみよう(ruby, rt, rb, rp, rtc)
- (ちょっとメモ)CSS の ベンダープレフィックス について
- [18-5] 水玉、ボーダー、チェック柄を作ろう(background-size)
- [18-4] 円形(放射)グラデーションを作ろう (radial-gradient)
- [18-3] テキストにシャドウをつけよう(text-shadow)
- [18-2] 要素にシャドウをつけよう(box-shadow)
- [18-1] 要素を角丸にしよう(border-radius)
- [17-6] メインコンテンツを表す main要素
- [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
- [17-4] ナビゲーションのセクションを表す nav要素
- [17-3] セクショニング要素と見出し要素のルール
- [17-2] セクショニングの article要素、aside要素、section要素
- [17-1] HTML5 の新要素でページ全体を組もう
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク