JP

CSS・見た目をもっと自由に

影をつけて浮かせる

ぺたっと貼りついたカードに、ふわっと影をつけるだけで宙に浮いたように見える。box-shadowで、ページに立体感をたそう。

角丸のカードに、もう一手間。ほんの少し影をつけるだけで、ページからふわっと浮きあがって見えます。紙にペタッと印刷されたような見た目から、手に取れそうな質感へ——それをかなえるのが box-shadow です。

書いてみよう

.card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

box-shadow のうしろに並ぶ4つは、それぞれこういう意味です。

値役割
0影の横へのずれ（0で真下）
2px影の縦へのずれ（下に2ピクセル）
10px影のぼかしの広さ（大きいほどふんわり）
rgba(0, 0, 0, 0.06)影の色（うすい黒）

「真下に2ピクセルずれた、10ピクセルぼかした、うすい黒の影」——これで、カードがふわっと持ち上がって見えます。

影のあり・なしを並べると、浮きあがり方の違いがよくわかります。

同じ白いカードでも、うすい影が1枚つくだけで、紙のように少し浮いて見えます。

rgba()で「透明度つきの色」を作る

影の色によく使われるのが rgba()。これまでの色の名前やコードに、透明度を1つ足せる書き方です。

color: rgba(0, 0, 0, 0.06);

rgba(赤, 緑, 青, 透明度) の順で、最初の3つは色コードの数字版、最後の 0.06 が透明度です。0 で完全に透明、1 で完全に不透明。影は0.05〜0.15くらいのうすい黒にすると、きつすぎずやわらかく見えます。

影を重ねる・内側にへこませる

box-shadowは、カンマで区切ると複数の影を同時につけられます。

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

近くにうすくくっきり、遠くに広くぼんやり——2枚を重ねると、1枚だけよりも自然な奥行きが出ます。

1枚だけよりも、2枚重ねたほうがふちがやわらかく、自然に浮いて見えます。

値の先頭にinsetをつけると、影が内側にできます。

.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

浮き上がる影とは逆に、少しへこんだような見た目になります。入力欄やくぼんだボタンの表現でよく使われる書き方です。

同じ箱でも、insetをつけると外に浮くのではなく、内側にへこんで見えます。

このレッスンのまとめ

  1. 影は box-shadow。横のずれ・縦のずれ・ぼかし・色の4つ
  2. 色には rgba() を使うと、透明度つきの色が作れる
  3. 影はうすく——rgba の透明度は低めが上品
  4. カンマで複数の影を重ねられる。insetで内側の影にもできる

やってみよう：カードとまるい写真に影をつける

これまで角丸にしてきた.card（じこしょうかい・すきなもの・れんらくの3つの箱）と、まるい写真に、影をたしましょう。すきなものの1つ1つのカードには、新しくclass="like"をつけます。

<li class="like">🎨 おえかき</li>
.card {
  background-color: #ffffff;
  border: 1px solid #e9e3d9;
  border-radius: 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 40px;
}

figure img {
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.like {
  background-color: #ffffff;
  border: 1px solid #e9e3d9;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 18px;
  font-weight: bold;
  font-size: 15px;
}

背景色・枠線・角丸・余白はそのまま。.cardと.like、まるい写真に、box-shadow の一行を足しました。.likeは.cardの弟分——同じ考え方の影を、ひとまわり小さいカードにもつけています。

ブラウザ表示。じこしょうかいなどの白いカードと、まるい写真の下に、うすい影がついてふわっと浮いて見える
影がつくだけで、ぺたっとしていたカードが、紙のように少し浮いて見えます。すきなものの.likeカードにも同じ影がついて、画面の下のほうも同じ調子でまとまります。

よくある質問

影を2つ以上つけたいときは？
カンマ区切りで並べると、複数の影を同時につけられます。近くにうすくくっきり、遠くに広くぼんやりの2枚を重ねると、より自然な奥行きが出ます。
内側に影をつけることはできる？
できます。値の先頭にinsetを添えると、box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);のように内側にへこんだ影になります。入力欄やくぼんだボタンの表現によく使われます。
影の向きを変えたいときは？
1つ目の数字（横のずれ）と2つ目の数字（縦のずれ）をマイナスにすると、影の向きが変わります。上や左にずらしたいときは、マイナスの数字を使いましょう。