box-shadowとは？初心者が押さえる基本と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

box-shadowとは何か

box-shadowはCSSのプロパティの一つで、要素の外側に影を描く機能を持っています。ボタンやカードに深みを出すために使われ、デザインの印象を大きく変えることができます。影には光の方向や厚みを感じさせる効果があり、アクセントとして活用できます。

影を使うと、ページが平坦に見えるのを防げます。視覚的な階層を作れるため、重要な部分を目立たせるのにも役立ちます。

基本の書き方

box-shadowの基本は「オフセット（横方向・縦方向）」「ぼかしの半径」「広がりの半径」「色」です。さらに要素の内側に影を描くための insetというキーワードがあります。書き方の例をいくつか紹介します。

例1: box-shadow: 8px 6px 12px rgba(0,0,0,0.25); これは右下方向へ少し大きめの影をつけ、ぼかしをかけつつ、色は黒い半透明です。

例2: box-shadow: -4px 2px 6px rgba(0,0,255,0.3); これは左へ少し寄せつつ、青みがかった影を作ります。

例3: box-shadow: 0 0 0 2px rgba(0,0,0,0.1); このように広がりだけを作る使い方もあり、フチを際立たせたいときに有効です。

基本的な構成要素を詳しく見る

<th>要素

説明
offset-x	影の水平方向の移動量。正の値は右、負の値は左へ移動します。
offset-y	影の垂直方向の移動量。正の値は下、負の値は上へ移動します。
blur-radius	影のぼかしの大きさ。値が大きいほど影の端がぼやけます。
spread-radius	影の広がり具合。正の値で影が広がり、負の値で縮みます。
color	影の色。RGBAなどを使うと透明度も調整できます。
inset	影を要素の内側に描画します。通常は外側の影ですが、insetを付けると内側に影が発生します。

影の色を透明にして背景と馴染ませたり、複数の影を重ねると複雑で美しい表現ができます。実務ではボタンやカードのデザイン、ホバー時のアクション性の演出に多く使われます。初心者はまず基本の形をマスターし、徐々に色や形を変えて練習しましょう。

実践のコツと注意点

コツの一つは、影を一つだけでなく、複数の影を「,」で区切って重ねる方法です。例えば次のような書き方があります。

box-shadow: 4px 4px 6px rgba(0,0,0,0.2), -2px -2px 4px rgba(0,0,0,0.15);

もうひとつのコツは、 inset を使って影の向きを変える練習をすることです。デザイン全体の雰囲気を見て、影の強さを少しずつ変えると良いでしょう。

最後に、box-shadowは視認性にも影響します。背景色や文字色とのコントラストが低いと影が見えにくく、デザインがくずれてしまいます。普段は薄い背景には薄い影、濃い背景には濃い影を選ぶなど、実用的な判断が必要です。

box-shadowの関連サジェスト解説

css box-shadow とは: css box-shadow とは、ウェブページの要素の周りに影をつける CSS の機能のことです。影を使うとカードやボタンが浮いて見え、デザインが引き締まります。基本的な書き方は box-shadow: offset-x offset-y blur-radius spread-radius color; ここで offset-x は横方向のずれ、offset-y は縦方向のずれ、blur-radius はぼかしの程度、spread-radius は影の広がり、color は影の色を指定します。inset を付けると影が要素の内側に現れ、くぼんだような見え方になります。影は複数指定も可能で、カンマで区切って重ね合わせることができます。例として次のように書きます。 .card { box-shadow: 4px 6px 10px rgba(0,0,0,0.3); } ボタンのホバーに使うと、マウスを乗せたときに影が大きくなる演出が作れます。別の例として inset を使う場合は .panel { box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); } さらに影は複数設定もできます。 .card { box-shadow: 3px 3px 0 rgba(0,0,0,0.15), 0 6px 12px rgba(0,0,0,0.1); } 影の色は rgba や hsla、カラーコードなどで自由に選べ、offset-x が横方向のずれ、offset-y が縦方向のずれ、blur-radius がぼかし具合、spread-radius が広がり具合を決めます。現代のほとんどのブラウザでサポートされ、デザインの深さや焦点の強調、アクセシビリティの改善にも役立ちます。初めは小さな値から試し、背景色や他の要素とのコントラストを見ながら徐々に調整すると良いでしょう。

box-shadowの同意語

ボックスシャドウ: CSSのbox-shadowプロパティの日本語表記。要素の周囲に影をつける装飾効果を指す用語。
ボックス影: ボックスの周囲に影を描くデザイン手法を指す言い方。box-shadowと同義。
ボックスの影: 要素のボックス領域の外側に影を描くスタイルの総称。box-shadowに対応する表現。
影（ボックス）: ボックスの影を表す表現。文脈次第でbox-shadowを指すことがある言い回し。
陰影: 影の総称。デザイン文脈でbox-shadowの効果を指す際に使われることがある表現。
影効果: 視覚的な影を付けるデザイン効果の総称。具体的なCSS値としてbox-shadowを示す場合がある。
シャドウ: 影の英語名の略称。CSSの影表現を指す際に使われることがあるが、文脈依存。
影付きボックス: 影がついたボックスという意味。box-shadowの描画結果を説明する表現。
影のスタイル: 影の見た目を定義するスタイルという意味で、box-shadowの機能を説明する言い換えとして使われることがある。

box-shadowの対義語・反対語

陰影なし: box-shadowを使わず、影を表示しない状態。平坦でクリーンな印象を与えるデザインを指します。
シャドウなし: 影効果を適用していない状態。box-shadowがnoneまたは0の値で無効化された状態。
影なしデザイン: デザイン全体で影を使わない方針・スタイルのこと。
平坦デザイン: 陰影を排除し、平面的な見た目を重視するデザイン手法。
フラットデザイン: 立体感を避け、影やグラデーションを使わないシンプルなデザイン様式。
影ゼロ: 要素に影を全くつけないこと。
ボックス影なし: box-shadowを適用していない、影がない状態。
シャドウレス: 影がない状態を表す造語的表現。

box-shadowの共起語

offset-x: 水平オフセット。影が水平方向にどれだけずれるかを決める値。正の値は右、負の値は左へずれる。
offset-y: 垂直オフセット。影が垂直方向にどれだけずれるかを決める値。正の値は下、負の値は上へずれる。
blur-radius: ぼかし半径。値が大きいほど影がぼやけて広く見える。
spread-radius: 広がり半径。影の大きさを前後に広げる。正の値で拡大、負の値で縮小。
color: 影の色。rgb、rgba、hex、カラー名などで指定できる。
inset: 内側に影を描くキーワード。boxの内側に影を表示する。
rgba: 赤・緑・青にアルファ値を組み合わせた色指定。透過度を設定できる。
rgb: 赤・緑・青を指定する色指定形式。
hex: 16進カラーコードで色を指定。例: #000000
複数の影: box-shadowはカンマで区切ると複数の影を重ねて描くことができる。順序によって手前/奥の表示が変わることがある。
-webkit-box-shadow: 旧ブラウザのためのベンダーレスプレフィックス。現在は不要なことが多いが、古い環境対応で使われることがある。
ベンダープレフィックス: 接頭辞（例: -webkit-、-moz-）を使い、古いブラウザの互換性を確保する手法。

box-shadowの関連用語

box-shadow: CSS の影を描くプロパティ。水平・垂直のオフセット、ぼかしの半径、広がりの半径、影の色、さらに inset 指定で内側の影を作ることができる。複数の影をカンマで区切って重ねることも可能です。
offset-x: 影の水平オフセット。正の値は右へ、負の値は左へずらします。
offset-y: 影の垂直オフセット。正の値は下へ、負の値は上へずらします。
blur-radius: 影のぼかし具合を決める半径。大きくすると影がぼやけて広がります。
spread-radius: 影の広がりの半径。正の値で影を大きく、負の値で小さくします。
inset: このキーワードを使うと影が要素の内側に描かれる内側の影になります。
color: 影の色。RGBA, RGB, HEX, HSL/HSLA など、さまざまな色表現が使えます。
rgba: rgba() で色と透明度を同時に指定する表現。例: rgba(0,0,0,0.5)。
rgb: rgb() で色を指定する表現。透明度は含まれず、不透明寄りの色を指定します。
hex-color: 16進カラー表現。例: #000000, #ffffff。
hsla: hsla() で色相・彩度・輝度・透明度を指定する表現。
multiple-shadows: box-shadow は複数の影をカンマ区切りで重ねて描くことができます。
comma-separator: 複数の影を区切るためのカンマ記号。
negative-offsets: offset-x または offset-y に負の値を指定すると、影を反対方向へ動かせます。
layout-impact: box-shadow は視覚効果であり、要素のレイアウトには影響を与えません。