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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| 井川宏樹
フリーランスのデザイナーとして活動中。 主に事業系企業の自社サービスのデザイン、Webサイトなどの制作・構築をしております。 TechAcademyではWebデザインコース、WordPressコースを担当しています。また作曲等の音楽家としても活動中。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
