CSSのbox-shadowで影の向きを下だけにする方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSのbox-shadowで影の向きを下だけにする方法について解説しています。box-shadowを使うと、ボックスに影をつけることができます。基本の書き方と下だけに影をつける場合の各種値の設定方法、画面上の見え方を確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,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は有効です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

影の方向、広がりなど各種設定方法

具体的に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;
}

box-shadowの説明
box4のように色の設定のあとに、さらに任意でinsetという指定を加えることもできます。insetを指定するとboxの外ではなく内側にシャドウを加えることができます。

 

下方向だけに影を出してみよう

下方向だけに影を出す方法を確認してみましょう。水平方向の値(右左)は0pxとします。また影の広がり具合も、抑えたいので0pxとします。

box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);

box-shadow下方向だけに影の説明1

いかがでしょう。ぼかし具合を10pxにした場合、若干左右に影が出てますね。もう少し調節して 左右の影を減らしてみましょう。

例えば、広がり具合の値をマイナスの-5pxにしてみましょう。

box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);

box-shadow下方向だけに影の説明2

すると左右の影の広がり具合も減って下だけについているように見えませんか?値を調節しながら自分が思う最適なbox-shadowを付けていきましょう。

 

監修してくれたメンター

井川宏樹

フリーランスのデザイナーとして活動中。

主に事業系企業の自社サービスのデザイン、Webサイトなどの制作・構築をしております。

TechAcademyではWebデザインコース、WordPressコースを担当しています。また作曲等の音楽家としても活動中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。