スライドショー

CSSのbox-shadowで要素に影をつける方法を徹底解説

こんにちは!ライターのナナミです。

WEBサイトを作っていて、ボタンとかに影をつけたいなぁと思ったことはありませんか?

box_shadow-first1

こんな感じでちょっと浮いて見えると、ボタンの質感が出てリッチなデザインになりますね。

今回はこんなボタンもさくっと作れちゃう、box-shadowについてまとめました!

・box-shadowとは何か
・box-shadowの使い方
・box-shadowの実用例
・ジェネレーターの紹介

という流れで、基礎から実践的な内容まで紹介していきます。

要素に影をつけられるようになると、WEBサイト上で奥行きのあるレイアウトも作れちゃいます
ぜひ覚えていってください!

box-shadowとは?

box-shadow要素の輪郭に影をつけるプロパティです。

box_shadow1

要素にbackgroundで色を指定すると、その要素の範囲に背景色がつきますよね。
色がついた範囲の輪郭、そこに影をつけるような感じになります。

要素の角を丸くしたりしても、それに合わせて影を作ってくれる、とても便利なプロパティです。

box-shadowの使い方

box-shadowの使い方はとっても簡単です。

CSSは下記のように書きます。

CSS

セレクタ {
    box-shadow: 横の位置 縦の位置 影のぼかし度 影の広さ 色;
}

横の位置、縦の位置は、影が表示される位置をpxで指定します

プラスの値だと、横は右、縦は下にずれます。
マイナスの値だと、横は左、縦は上にずれます。

影のぼかし度と影の広さは、影の見た目を決める数値です。

ぼかし度が大きくなればぼかしが強くなり、影の広さを大きくすれば影自体が大きくなります。
これもpxで指定します。

では、細かい使い方を見ていきましょう!

基本の使い方

まずは基本、よく見るような影の指定方法です。

box_shadow1

HTML

<div class="shadow_test">
    周りに影をつけます!
</div>

CSS

.shadow_test {
    padding: 20px;                      /* 余白指定 */
    background-color:  #eee;            /* 背景色指定 */
    box-shadow: 2px 2px 2px 2px #bbb;   /* 影指定 */
    width: 440px;                       /* 幅指定 */
    height: 200px;                      /* 高さ指定 */
}

影の位置をそれぞれ2pxにしているので、右に2px、下に2pxずれた影になります。
光源が左上にある感じですね。

影をシャープにする

影といえばふんわりぼやけているイメージですが、デザインによってはシャープな影の方が合うこともありますね。

ぼかし具合の値を0にすると、シャープな影を作ることができます。

box_shadow2

HTML

<div class="shadow_test">
    周りに影をつけます!
</div>

CSS

.shadow_test {
    padding: 20px;                      /* 余白指定 */
    background-color:  #eee;            /* 背景色指定 */
    box-shadow: 6px 6px 0px 0px #bbb;   /* 影指定 */
    width: 440px;                       /* 幅指定 */
    height: 200px;                      /* 高さ指定 */
}

内側に影をつける

box-shadowは、要素の内側に影をつけることもできます。

指定方法は簡単、記述の最後にinsetと入れるだけです。

box_shadow3

HTML

<div class="shadow_test">
    内側に影をつけます!
</div>

CSS

.shadow_test {
    padding: 20px;                          /* 余白指定 */
    background-color:  #eee;                /* 背景色指定 */
    box-shadow: 0px 0px 5px 5px #bbb inset; /* 影指定 */
    width: 440px;                           /* 幅指定 */
    height: 200px;                          /* 高さ指定 */
}

要素自体がちょっとへこんでいるような感じにできますね!

複数の影をつける

box-shadowは、一つの要素に複数指定することができます
下記のように「,(カンマ)」で区切って記述するだけです。

box_shadow4

HTML

<div class="shadow_test">
    内側と外側に影をつけます!
</div>

CSS

.shadow_test {
    padding: 20px;              /* 余白指定 */
    background-color:  #eee;    /* 背景色指定 */
    box-shadow: 2px 2px 2px 2px #000,0px 0px 5px 5px #bbb inset;    /* 影指定 */
    width: 440px;               /* 幅指定 */
    height: 200px;              /* 高さ指定 */
}

外側の影も内側の影も両方つけたいときでも、これなら大丈夫ですね!

box-shadowの実用例

使い方で色々説明したように、box-shadowは色々な設定を行なうことができます。
組み合わせるといろんな表現ができそうですね!

今回その一例を挙げてみたので、参考にしてみてください。

ポラロイド写真風

box_shadow-ex1

HTML

<div class="shadow_test">
    <div class="shadow_test-img">
        <img src="test_img.jpg" alt="">
    </div>
</div>

CSS

.shadow_test {
    width:  400px;                          /* 幅指定 */
    box-shadow: 0px 3px 6px 0px #9E9E9E;    /* 影指定 */
    padding: 10px;                          /* 余白指定 */
}

.shadow_test-img img {
    width:  100%;               /* 幅指定 */
    vertical-align:  middle;    /* 画像の下の余白消し */
    position:  relative;        /* 要素の位置調整 */
    z-index:  -1;               /* 要素の重なり順調整 */
}

.shadow_test-img {
    margin-bottom: 50px;        /* 下の空白 */
    box-shadow: 0px 0px 4px 2px rgba(148, 148, 148, 0.5) inset; /* 影指定 */
}

写真に内側の影をつけて、周りの要素に外側の影をつけました。
こういう写真の見せ方も可愛いですね!

ボタンが浮いているように見せる

box_shadow-ex2-1

HTML

<a class="shadow_test" href="">click!</a>

CSS

.shadow_test {
    background-color: #00BCD4;          /* 背景色指定 */
    text-decoration:  none;             /* デフォルトCSS打ち消し */
    color:  #fff;                       /* 文字色指定 */
    padding: 28px 20px;                 /* 余白指定 */
    display:  inline-block;             /* インラインブロックにする */
    border-radius:  50%;                /* 角丸指定 */
    box-shadow: 0px 2px 7px 0px #ccc;   /* 影指定 */
}

定番中の定番、ボタンがちょっと浮いている感じです。

シンプルですが、ユーザーが「ボタンだな」とすぐわかるデザインにできるのはかなり魅力です。

下記のように、マウスオーバーしたときに影の大きさやボタンの位置を調整してあげると、よりボタン感が増すと思います。

box_shadow-ex2-2

HTML

<a class="shadow_test" href="">click!</a>

CSS

.shadow_test {
    background-color: #00BCD4;          /* 背景色指定 */
    text-decoration:  none;             /* デフォルトCSS打ち消し */
    color:  #fff;                       /* 文字色指定 */
    padding: 28px 20px;                 /* 余白指定 */
    display:  inline-block;             /* インラインブロックにする */
    border-radius:  50%;                /* 角丸指定 */
    box-shadow: 0px 2px 7px 0px #ccc;   /* 影指定 */
    transition: 0.2s;                   /* アニメーション指定 */
    position:  relative;                /* 要素の位置調整 */
    top: 0;                             /* 要素の位置調整 */
}

.shadow_test:hover {
    top: 2px;
    box-shadow: 0px 1px 5px 0px #ccc;   /* 影指定 */
}

CSSだけでもこれだけできちゃうなんて、素敵ですね!

マテリアルデザイン

box-shadowを最大限活用している例の一つに、マテリアルデザインというものがあります。

マテリアルデザインとは、Googleが発表したデザインのフレームワーク(決まりごと)です。

画面内で「ものが重なっていたら影ができる」というような、現実世界っぽい見せ方などを取り入れています。

そうすることで、ユーザーがどのように操作すればいいのかを直感で理解できるようなデザインにするのが目的です。

マテリアルデザインについての詳細は、こちらの記事が詳しく解説してくれています。
https://saruwakakun.com/html-css/material

では、実際にマテリアルデザインを取り入れてみましょう。

box_shadow-ex3

HTML

<div class="shadow_test">
    <div class="shadow_test-img">
        <img src="test_img.jpg" alt="">
    </div>
    <div class="shadow_test-text">
    テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
    </div>
</div>

CSS

.shadow_test {
    width:  400px;                                  /* 幅指定 */
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);   /* 影指定 */
    border-radius: 3px;                             /* 角丸指定 */
}

.shadow_test-img img {
    width:  100%;                   /* 幅指定 */
    vertical-align:  middle;        /* 画像の下の余白消し */
    border-radius: 3px 3px 0 0;     /* 角丸指定 */
}

.shadow_test-text {
    padding:  10px;     /* 余白指定 */
    font-size:  14px;   /* 文字サイズ指定 */
    line-height: 2;     /* 文字行空き調整 */
}

マテリアルデザインで使われている、Cardという見せ方です。
ただのコンテンツではなく、クリックなどの動きが期待できる見た目になりますね。

このように、box-shadowは単純に影という見栄えを加えるだけでなく、ユーザーの利便性向上にも一役買ってくれるのです。

対応ブラウザ

とっても便利なbox-shadow、さらに嬉しい点があります。

カレントブラウザだけでなく、オールドブラウザでも使うことができるのです。

厳密にはIE8以前は使えないのですが、一般的なユーザーでIE8以前を使っている人はまずいないでしょう。

つまり、基本的に何も気にせず使って大丈夫です、やったぁ!

コピペするだけ! ジェネレーター紹介

イメージしている影があるんだけど、数値をどうすればいいのかわからない…
実装方法はわかったけど、影の色とか色々試しながらやりたい…

そんな方でも大丈夫、ジェネレーターという強い味方がいます!

ジェネレーターとは、数値や色を選んだりするだけでCSSコードを生成してくれる超便利なものです。

検索するといろんな種類がでてきます。

そんな中から、オススメのジェネレーターを二つご紹介します。

box-shadowとborder-radiusジェネレーター

box_shadow-generator1
http://www.bad-company.jp/box-shadow/

影と角丸を両方指定できるジェネレーターです。
数値も色も感覚的に指定できます、色々試せますね!

影の複数指定にも対応しているので、とりあえず困ったらこれでOKです。

box-shadow | css-generator.net - border-image

box_shadow-generator2
https://css-generator.net/box-shadow/

上記のものよりすっきりとした感じのジェネレーターです。
色の複数指定はできませんが、影の色の透過度を指定することができます。

一つの影だけでいいから、色にこだわって作りたい方はこちらがおすすめです。

文字や画像に影をつけたい場合

box-shadowは要素そのものに影をつけるので、文字や絵に沿った影をつけることはできません。
文字や絵に影をつけるときには、text-shadowdrop-shadowを使います。

文字に影をつけるtext-shadow

textshadow2
文字に沿った影をつけたい場合は、text-shadowを使います。

text-shadowの詳細や使い方はこちらの記事をチェック!

画像にそった影をつけるdrop-shadow

drop_ shadow1
画像の絵柄に沿った影をつけたい場合は、drop-shadowを使います。

drop-shadowの詳細や使い方はこちらの記事をチェック!

まとめ

いかがでしたか?

たかが影、されど影。
影ながらWEBサイトをリッチに仕上げてくれるbox-shadowは、もはや必須スキルと言っても過言ではないでしょう。

マテリアルデザインなども活用しながら、ユーザーにとって使いやすいWEBサイトをばんばん作っちゃってください!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説