box-shadow と border で立体感を出してみよう
更新日：2026-08-02
前のページでは、
- 背景色
- 文字色
- 配色
を使って、サイトの印象を整えました。
今回は、
- box-shadow
- border
- カードデザイン
を使って、
「立体感」
を出してみます。
現在のWebサイトでは、
カード型デザイン
が非常によく使われています
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
└── css/
└── style.css
box-shadow とは？
box-shadow は、
要素に影を付ける
CSSです。
例えば、
.card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
を書くと、カードの下に影が表示されます。
実際に書いてみよう
.card {
background-color: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
保存してブラウザを確認してください。
カードが少し浮いて見えるはずです。
rgba とは？
今回、
rgba(0, 0, 0, 0.08)
を書いています。
これは、
透明度付きの色
です。
rgba の数字の意味をもう少し詳しく見てみよう
rgba は、色を数字で指定する書き方です。
rgba(0, 0, 0, 0.08)
これは、次の4つの数字でできています。
rgba(赤, 緑, 青, 透明度)
光の3原色
画面の色は、
- 赤
- 緑
- 青
の3つの光を組み合わせて作られています。
これを、
光の3原色
といいます。
CSS の rgba でも、この3つの色を数字で指定します。
RGB の数字は 0〜255
rgba の最初の3つの数字は、
赤、緑、青の強さ
を表しています。
数字は、
0 〜 255
で指定します。
例えば、
rgba(255, 0, 0, 1)
は、赤が最大で、緑と青が0です。
つまり、
赤
になります。
色の例
rgba(255, 0, 0, 1)
赤
rgba(0, 255, 0, 1)
緑
rgba(0, 0, 255, 1)
青
rgba(255, 255, 255, 1)
白
rgba(0, 0, 0, 1)
黒
なぜ 255, 255, 255 が白なの？
光の色では、
赤 + 緑 + 青
をすべて最大にすると、白になります。
そのため、
rgba(255, 255, 255, 1)
は白です。
なぜ 0, 0, 0 が黒なの？
逆に、
赤も緑も青も光っていない状態
が黒です。
そのため、
rgba(0, 0, 0, 1)
は黒になります。
最後の数字は透明度
rgba の最後の数字は、透明度です。
0 〜 1
で指定します。
例えば、
rgba(0, 0, 0, 1)
は、完全に不透明な黒です。
rgba(0, 0, 0, 0.5)
は、50%くらい透けた黒です。
rgba(0, 0, 0, 0)
は、完全に透明です。
box-shadow では薄い黒をよく使う
今回の影では、
rgba(0, 0, 0, 0.08)
を使っています。
これは、
黒い影を、かなり薄く表示する
という意味です。
0.08 はかなり薄い
透明度の数字は、
1 に近いほど濃い0 に近いほど薄い
です。
そのため、
rgba(0, 0, 0, 0.08)
は、とても薄い黒になります。
影としては自然に見えやすいです。
数字を変えて試してみよう
例えば、
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
にすると、かなり濃い影になります。
逆に、
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
にすると、かなり薄い影になります。
なぜ影を薄くするの？
影が強すぎると、
古いデザインっぽく見える
ことがあります。
現在のWebデザインでは、
かなり薄い影
がよく使われます。
border とは？
border は、
枠線
を付けるCSSです。
例えば、
.card {
border: 1px solid #e5e7eb;
}
を書くと、薄い枠線が付きます。
solid ってなに？
solid
は、
実線
を意味しています。
例えば、
border: 1px solid black;
は、
1px の黒い実線
になります。
box-shadow と border の違い
border
線そのもの
を表示します。
box-shadow
影による立体感
を表示します。
両方使うことも多い
実際のWeb制作では、
border + box-shadow
を組み合わせることも非常によくあります。
例えば、
.card {
background-color: white;
padding: 24px;
border-radius: 12px;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
のように書きます。
なぜカードデザインが多いの？
カード型にすると、
- 情報を区切りやすい
- スマホでも見やすい
- UIが整理されて見える
というメリットがあります。
実際によく見る場所
カードデザインは、
- ニュース一覧
- 商品一覧
- ブログ一覧
- YouTube
- SNS
など、さまざまな場所で使われています。
hover と組み合わせることも多い
例えば、
.card:hover {
transform: translateY(-4px);
}
を書くと、
少し浮き上がる
アニメーションになります。
transform とは？
transform は、
要素を動かしたり変形したりする
CSSです。
translateY(-4px)
translateY(-4px)
は、
上へ4px移動
を意味しています。
transition と組み合わせよう
hover を自然にするため、
transition: 0.3s;
も追加してみましょう。
実際にまとめて書いてみよう
.card {
background-color: white;
padding: 24px;
border-radius: 12px;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: 0.3s;
}
.card:hover {
transform: translateY(-4px);
}
かなり「最近のWebサイトっぽい」雰囲気になります
少しだけ動かすのがコツ
現在のWebデザインでは、
「ほんの少し動く」
くらいが好まれることが多いです。
今回学んだこと
今回学んだこと：
box-shadowborderrgbatransformtranslateY- カードデザイン
などです。
次のページでは
次のページでは、
- Flexbox
- 横並びレイアウト
- 要素の中央揃え
などを学んでいきます。
ここから、
「レイアウト」
の知識がかなり重要になってきます