CSSシャドウテクニック：ボックスとテキストに立体感を加える | 福岡LP(ランディングページ）ホームページ制作

1. はじめに

CSSシャドウとは？

CSSのシャドウプロパティを使用することで、要素に影（シャドウ）を加えることができます。これにより、立体感や深さを表現でき、デザインに視覚的な魅力を加えることができます。
今回は、主にボックスシャドウとテキストシャドウに焦点を当て、さまざまな使い方を紹介します。

🎬 2. ボックスシャドウ（Box Shadow）

① ボックスシャドウの基本構文

ボックスシャドウは、要素に影を付けるためのプロパティです。基本的な構文は以下の通りです：

box-shadow: h-offset v-offset blur spread color;

h-offset: 横方向のオフセット（影がどれだけ右または左にずれるか）
v-offset: 縦方向のオフセット（影がどれだけ上または下にずれるか）
blur: ぼかしの量（影のぼかし度）
spread: 影の広がり具合
color: 影の色

② 例：シンプルなボックスシャドウ

div {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* 横10px、縦10pxの影、ぼかし15px、色は半透明の黒 */
}

解説
- このコードは、青いボックスに対して右下に影が付けられます。影のぼかし度合いが15pxなので、柔らかい影が表示されます。

③ ボックスシャドウの効果を調整する

影の方向やぼかし具合を調整することで、影の強さや印象を変えることができます。

強い影cssコードをコピーするbox-shadow: 5px 5px 0px rgba(0, 0, 0, 0.7);
- 強い影を付けることで、よりシャープで重厚感のあるデザインが可能になります。
柔らかい影cssコードをコピーするbox-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
- ぼかしを大きくすることで、影が柔らかく、浮いているような印象を与えます。
多重影cssコードをコピーするbox-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.1);
- 複数の影を指定することで、深さや立体感を強調できます。

④ 内部の影（inset）

insetキーワードを使うと、要素内側に影を付けることができます。

div {
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 内部に影を追加 */
}

解説
- insetを指定すると、影が要素内側に表示されます。これを使うことで、ボックスが内側にへこんでいるような効果を出せます。

💡 3. テキストシャドウ（Text Shadow）

① テキストシャドウの基本構文

テキストシャドウは、テキストに影を付けるためのプロパティです。構文は以下のようになります：

text-shadow: h-offset v-offset blur color;

h-offset: 横方向のオフセット
v-offset: 縦方向のオフセット
blur: ぼかしの量
color: 影の色

② 例：シンプルなテキストシャドウ

h1 {
  color: #3498db;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 横2px、縦2px、ぼかし5pxの影 */
}

解説
- このコードは、h1タグ内のテキストに軽くぼかした影を追加します。テキストが浮かび上がったような効果を作り出します。

③ テキストシャドウの応用例

ダブルシャドウcssコードをコピーするh2 { color: #9b59b6; text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5), -1px -1px 3px rgba(255, 255, 255, 0.6); }
- 複数の影を重ねることで、立体的で視覚的に印象深いテキストを作り出せます。
グロー効果cssコードをコピーするh3 { color: #2ecc71; text-shadow: 0 0 10px rgba(0, 255, 0, 0.7); }
- 光っているような効果を出すためには、明るい色を使い、ぼかしを大きくします。
ネオン効果cssコードをコピーする.neon-text { font-size: 48px; color: #fff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff; }
- 明るいネオン風のテキストを作るために、複数のシャドウを重ねて強調します。

🎥 4. シャドウを使ったデザインの実践例

① ボタンのデザイン

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #f39c12;
  border: none;
  border-radius: 5px;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

button:hover {
  box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

解説
- ホバー時にボタンの影が強調され、より立体感が増します。text-shadowで文字にも影を加えて、ボタン全体に深みを持たせます。

② インプットフィールド

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

input[type="text"]:focus {
  border-color: #3498db;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.7);
}

解説
- フォーカス時に入力フィールドの影を強調することで、ユーザーが入力しているフィールドを目立たせます。

🧠 5. よくあるエラーと解決策

影が表示されない
- 解決策: 影の色やオフセットが小さい場合、見えにくくなることがあります。影の色やぼかしの量を調整してみましょう。
影が重なって不自然
- 解決策: box-shadowやtext-shadowのオフセットやぼかしを調整して、自然な影の効果を出します。
ブラウザ間で影の表示が異なる
- 解決策: ブラウザの互換性を考慮して、影の色やぼかし度合いを調整したり、プレフィックス（-webkit-など）を使ってみてください。

🚀 6. まとめ

ボックスシャドウを使うことで、要素に立体感を加え、浮かび上がったような印象を作ることができます。
テキストシャドウは、文字に影をつけて、視覚的に強調したり、ネオン効果やグロー効果を作ることができます。
シャドウを適切に使うことで、デザインに深みや動きを与え、ユーザーの目を引きつけることができます。