LINEで現役エンジニアに直接質問してみよう!登録無料

CSSでbox-shadowを使い下方向だけに影を付ける方法

この記事では、CSSで下記のサンプルのように、下方向にのみ影を付ける方法を紹介します。

結論から言うと、下記のコードをコピペすれば使うことができます。

<div class="box"></div>
.box {
  box-shadow: 0 10px 4px -4px #333;
}

CSSセレクタが.boxですので、自分の環境に合わせて書き換えてくださいね!

box-shadowの使い方基本

box-shadowとは、要素に影をつける(ドロップシャドウ)をつけるプロパティです。

基本的な使い方は、下記です。

box-shadow: x軸方向ずらす距離 y軸方向にずらす距離;

デフォルトでは、#000を使った影が出来ます。しかし、下記のサンプルのようにぼかしや広がり(影の拡大縮小)もないので、とても単調に見えますよね。

.box {
  box-shadow: 10px 15px;
}

もちろん、影の色やぼかし量も調節できます。透明度も調節できるので、使いこなせるようになるとデザインの幅がグンと広がります。

.box {
  box-shadow: 10px 15px;
}

box-shadowを使うと横方向にはみ出ないようにする

通常、box-shadowを使うとこのように横方向にもはみ出てしまいます。

左右に出たらみっともないですよね?このようにならないため、box-shadowの4番目の値で影の広がり(拡大縮小)を調節して、左右にはみ出さないようにします。

例えば、ぼかし幅は10pxなら、影の広がりが-10pxになるように調節すると、はみ出ないようになります。

おまけ: 下部の影が要素よりも小さい!左右にはみ出ないまま大きく出来ないの?

結論から言うと、box-shadowではできません。ですが、CSSの別のプロパティを駆使すれば下記のサンプルのように下方向のみの影を表現することも出来ますよ!

<div class="box"></div>
.box {
  position: relative;
}
.box: :after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: 0;
  transform: translateY(100%);
  background: linear-gradient(to bottom, #333, #FFF);
}

まとめ

box-shadowで影を作るには、下記のCSSを使いましょう!

.box {
  box-shadow: 0 10px 4px -4px #333;
}

以上、box-shadowを使い下方向だけに影を付ける方法を、アキ(@hackablejp)が解説しました!

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。