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

CSSのbox-shadowで影の向きを下だけにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

目次

• box-shadowについて
• 影の方向、広がりなど各種設定方法
• 下方向だけに影を出してみよう

 

box-shadowについて

box-shadowはCSSだけでPhotoshopのドロップシャドウのような効果を得られる便利なCSSプロパティです。同じようなプロパティにtext-shadowがありますが、こちらはテキストにシャドウをかけられるのに対して、box-shadowはボックス領域に対してシャドウ効果を加えます。

また画像に対してもシャドウ効果を加えることができます。pngやgif画像で透過効果を使っている場合、透過部分にはかかりませんので画像でbox-shadowを使うには注意が必要です。画像の長方形領域に対してかかるイメージです。jpgの写真などの長方形をベースにした画像であればbox-shadowは有効です。

 

[PR] Webデザインで副業する方法とは

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

具体的に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を付けていきましょう。

 

監修してくれたメンター

井川宏樹 フリーランスのデザイナーとして活動中。 主に事業系企業の自社サービスのデザイン、Webサイトなどの制作・構築をしております。 TechAcademyではWebデザインコース、WordPressコースを担当しています。また作曲等の音楽家としても活動中。

 

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

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