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ピクセルぼかした、うすい黒の影」——これで、カードがふわっと持ち上がって見えます。

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

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

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

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

このレッスンのまとめ

  1. 影は box-shadow。横のずれ・縦のずれ・ぼかし・色の4つ
  2. 色には rgba() を使うと、透明度つきの色が作れる
  3. 影はうすく——rgba の透明度は低めが上品

:::

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

これまで角丸にしてきた.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カードにも同じ影がついて、画面の下のほうも同じ調子でまとまります。