CSSのbox-shadowで影の向きを下だけにする方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSのbox-shadowで影の向きを下だけにする方法について解説しています。box-shadowを使うと、ボックスに影をつけることができます。基本の書き方と下だけに影をつける場合の各種値の設定方法、画面上の見え方を確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSのbox-shadowで影の向きを下だけにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
box-shadowで影の向きを下だけにする方法について詳しく説明していくね！
お願いします！
目次
box-shadowについて
box-shadowはCSSだけでPhotoshopのドロップシャドウのような効果を得られる便利なCSSプロパティです。同じようなプロパティにtext-shadowがありますが、こちらはテキストにシャドウをかけられるのに対して、box-shadowはボックス領域に対してシャドウ効果を加えます。
また画像に対してもシャドウ効果を加えることができます。pngやgif画像で透過効果を使っている場合、透過部分にはかかりませんので画像でbox-shadowを使うには注意が必要です。画像の長方形領域に対してかかるイメージです。jpgの写真などの長方形をベースにした画像であればbox-shadowは有効です。
影の方向、広がりなど各種設定方法
具体的にbox-shadowの設定方法について確認していきましょう。基本的にCSSのプロパティにおいて、
box-shadow:水平方向の距離 垂直方向の距離 ぼかし具合 広がり具合（距離） 色指定（任意）;
のように設定します。
色の指定は任意で、指定のない場合は黒色が付きます。また、水平方向の距離と垂直方向の距離はマイナスの値も設定できます。水平方向の距離にプラスの値を設定した場合は右側に影が伸び、マイナスの値を設定した場合は左側に影が付きます。
同じ要領で垂直方向の距離にプラスの値が設定された場合は下方向、マイナスの値が設定された場合は上方向に影が付きます。
例
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.5);
色の指定は16進法でも構いません。
box-shadow: 10px 10px 10px 10px #000000;
また下記のように、値を省略することも可能です。
box-shadow: 10px 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
box-shadowの指定の仕方でどのような効果が得られるか実際に見ていきましょう。
html
<div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div>
css
.box1 {
box-shadow: 10px 10px;
}
.box2 {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
.box3 {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);
}
.box4 {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5)inset;
}
.box1, .box2, .box3, .box4 {
width: 200px;
height: 200px;
background-color: #dddddd;
padding: 10px;
}
box4のように色の設定のあとに、さらに任意でinsetという指定を加えることもできます。insetを指定するとboxの外ではなく内側にシャドウを加えることができます。
下方向だけに影を出してみよう
下方向だけに影を出す方法を確認してみましょう。水平方向の値（右左）は0pxとします。また影の広がり具合も、抑えたいので0pxとします。
box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
いかがでしょう。ぼかし具合を10pxにした場合、若干左右に影が出てますね。もう少し調節して 左右の影を減らしてみましょう。
例えば、広がり具合の値をマイナスの-5pxにしてみましょう。
box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
すると左右の影の広がり具合も減って下だけについているように見えませんか？値を調節しながら自分が思う最適なbox-shadowを付けていきましょう。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| 井川宏樹
フリーランスのデザイナーとして活動中。 主に事業系企業の自社サービスのデザイン、Webサイトなどの制作・構築をしております。 TechAcademyではWebデザインコース、WordPressコースを担当しています。また作曲等の音楽家としても活動中。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
