影を付けるときのサンプルも参考にして学習したいな。
今回の記事では、要素に影を付けるための基本をすべて書いていきます。
前回の記事↓では、CSSのpositionについて解説しました。
CSSのpositionの使い方！absoluteやfixedを使って表現の幅を増やそう！
CSSのpositionの使い方を誰でも分かるように解説した記事になっています。static, relative, absolute, fixedについて、それぞれどのような効果が出るのかを丁寧に解説。
今回は、要素に影を付けるためのbox-shadowというプロパティについて主に解説します。
透明画像に影を付けるときの応用（ドロップシャドウ）や文字に影を付ける方法についても解説していきます。
合わせて読みたいプログラミングスクールの10社比較ランキング【転職、副業、就職の3つの目的別】
この記事の目次
CSSのbox-shadowで何ができる？
box-shadowを使いこなせると、影を付けれるようになりボタンや要素に質感を出すことができるようになります。
例えば以下のボタンには影がついています。(ホバーすると分かりやすいかも)
影がついていないバージョンは以下の通り。
影を付けた場合、ユーザーにとって『ここはクリックできる場所だ』と思わせることができます。
見た目の部分だけでなく、そういう意味でも影を付けることは滅茶苦茶大事になってきます。
maipyon
CSSのbox-shadowの使い方
box-shadowの基本的な使い方は以下の通りです。
○○{
box-shadow: 横の位置 縦の位置 ぼかし度 色;
}
設定しようと思えばより多くの設定ができるのですが、基本的にはこの4つの値を指定することが多いかなと感じています。
また、ぼかし度以降の部分はあってもなくても大丈夫です。
（色を省くと、影の色は真っ黒になります）
その他の設定方法についても後述します！
box-shadowの基本 : ぼかしのない影
まずは影のつけかたの基本から。
.example-box{
background: #ddd;
box-shadow: 3px 3px #3c3c3c;
}
上記のようにCSSを指定すると、以下のようになります。
（不必要なCSSについては省いています。）
#3c3c3cの色の影が右に3px、下に3pxずれて表示されています。
ここのpxをマイナスにすれば、左と上へずれます。
.example-box{
background: #ddd;
box-shadow: -3px -3px #3c3c3c;
}
影は右下へずれるのがいつも見慣れているものなので、使う機会はあまりないと考えていいでしょう。
box-shadowの基本 : 影の色を変える
影の色を変えなければ、ボックスの色が例えばオレンジだった場合に変な感じになってしまいます。
影の色の変え方例は、以下の通りです。
.example-box{
background: #ff9800;
box-shadow: 4px 4px #ffd54f;
}
ボックスの色を#ff9800にし、影の色を#ffd54fに設定しました。
色を変えてみるのもおしゃれかもしれません。
「ボックスの色も影の色も違うものを考えなければならないのか・・・」という方は、以下のような指定方法も簡単でおすすめです。
.example-box{
background: rgb(255,152,0);
box-shadow: 4px 4px rgb(255,152,0,0.5);
}
色合いは先ほどのオレンジ色のものとほぼ変わりません。
ボックスの背景色をrgb形式で指定して、影の色はrgba形式で半透明にすれば1色考えるだけでいいので簡単になります。
0.5の部分が透明度で、50%の透過度にしてね、という意味合いになります。
box-shadowの基本 : 影をぼかす
影をぼかすためのCSSは以下の通りです。
.example-box{
background: #ddd;
box-shadow: 3px 3px 5px #3c3c3c;
}
5px分ぼかすという意味になります。
このようなボックスはよく見かけますね！
影の向き（ずれ）を指定せず、0pxにすると影が全体に広がります。
.example-box{
background: #ddd;
box-shadow: 0 0 5px #3c3c3c;
}
ここまで覚えれば、box-shadowについての基本はバッチリです！
ここから先は、その他の設定方法について解説していきます。
影の広がりを調節（拡大・縮小）する
最初にbox-shadowのCSSについて、以下のように説明しました。
○○{
box-shadow: 横の位置 縦の位置 ぼかし度 色;
}
ぼかし度の後に、影の広がりを調節するための値も書くことができます。
○○{
box-shadow: 横の位置 縦の位置 ぼかし度 影の広がり 色;
}
これは、作った影を拡大・縮小する場合に使います。
要素の大きさと比べて大きめの影や小さめの影が作れるということです。
次のように書けば縮小できます。
.example-box{
background: #ddd;
box-shadow: 10px 10px 15px -10px #3c3c3c;
}
10px縮小してみました。影がボックスの大きさよりも小さくなっています。
次は、拡大させてみます。
.example-box{
background: #ddd;
box-shadow: 5px 5px 5px 10px #6c6c6c;
}
10px拡大させてみました。
ボックスの大きさより10px大きい影が5pxずれて表示されています。
値が4つになり、なにが何を意味しているのか分からなくなる時が出てきますので、意味をしっかり覚えておきましょう！
box-shadowで内側に影をつけるCSS例
影を要素の内側につけることで、くぼんだ感じを表現することもできます。
次のCSSのように、最後にinsetを付け足すことでできます。
○○{
box-shadow: 横の位置 縦の位置 ぼかし度 色 inset;
}
次のCSSを指定して見ます。
.example-box{
background: #ddd;
box-shadow: 5px 5px 5px #6c6c6c inset;
}
すると、以下のように左上の内側に影がでました。
内側にも外側にも影をつける
内側にも外側にも影をつけることができます！
カンマ,で区切ることで影を増やすことができます。
.example-box{
background: #ddd;
box-shadow: 5px 5px 5px #f44336,5px 5px 5px #2196f3 inset;
}
外側の影(赤色）,内側の影(青色)としてみました。
同じようにカンマで区切っていけば、外側に3つ、4つとさらに影を増やすことも可能です。
影はborderの外側・内側にくる【2重線や3重線をCSSで作ることも】
気を付けたいのが、影はborder(枠線)の外側・内側にくるということです。
黒色の枠線を追加してみると、以下のようになります。
枠線が太すぎると気持ち悪く見えるので、注意が必要です。
逆にそれを利用すれば、2重線や3重線なども表現可能です。
.example-box{
background: #ddd;
border: solid 5px #4caf50;
box-shadow: 0 0 0 5px #f44336,0 0 0 5px #2196f3 inset;
}
内側の影が青色、枠線が緑色、外側の影が赤色です。
影はずれやぼかしを無くして、拡大のみ行うことで枠線のように見せることが可能です。
特殊な場合でしか使いませんが、おしゃれなボックスデザインを作りたいときの参考になれば。
CSSのドロップシャドウについて
ドロップシャドウについては少し余談になります。
maipyon
影をつける方法として、filter: drop-shadowというものもあります。
box-shadowとの違いは何か説明するならば、以下の画像を見てもらえばわかりやすいと思います。
どちらも、背景が透明な画像に対してCSSを適用させています。
box-shadowの場合だと画像の枠に影ができてしまうのですが、filter: drop-shadowを使えば透明画像の文字の部分に影を付けることができます。
そんな便利なfilter: drop-shadowの使い方は以下を参考にしてください。
.example-img{
filter: drop-shadow(3px 3px 2px #3c3c3c);
-webkit-filter: drop-shadow(3px 3px 2px #3c3c3c);
}
かっこの中に入るものはbox-shadowと基本的に同じになりますので、なんとなくわかるかと思います。
画像に対して影を付けるのであれば、ドロップシャドウを使えば一発解決しますので、画像の影が上手くいかず悩んでいる方はこれで解決します。
ドロップシャドウの対応ブラウザについて
box-shadowは心配しなくてもいいのですが、filterについては、最新のIE11で使えない他、Android4.4以降でなければ使うことができませんので注意してください。
・・・といっても上記に対応していないくらいなら、使っちゃっても問題ないかと思いますが。
最新情報はfilterの対応ブラウザでご確認ください。
どのブラウザでも対応させたい！という場合は、画像加工で影を付けるのが得策と言えるでしょう。
CSSで文字に影をつけるには？
今回は要素に影を付ける方法について紹介していますが、文字に影を付けたい！と思った場合はtext-shadowというものを使います。
同じような意味で使えて理解しやすいと思いますので、ここで紹介しておきます。
○○{
text-shadow: 横の位置 縦の位置 ぼかし具合 色;
}
このように指定してあげれば使うことができます！
例は以下の通りです。
.example-text{
text-shadow: 2px 2px 2px #ffc107;
}
カンマで区切って影の数を増やすことも可能ですが、内側に影をつけたり、影の拡大・縮小は行えません。
maipyon
CSSでbox-shadowによる影の付け方のまとめ
今回はbox-shadowについて解説しつつ、drop-shadowとの違いや文字に影を付ける方法についても解説しました。
覚えておきたいのは以下の順番。
box-shadow: 横の位置 縦の位置 ぼかし度 影の広がり 色;
ホバーさせたときに要素を浮かせつつ、影を付けるなどすることが非常に多いので、よく覚えておきたいCSS内容ですね！
box-shadowについてはよく使いますので、しっかりと意味を抑えて自分で扱えるようになっておきたいところです！
