HTML/CSS

【CSS】影を付けるbox-shadowの使い方

本記事ではCSSを使って影を付けることができるbox-shadowの使い方について解説しています。

影はボタンをホバーした時などに表示させたり、画像の枠に影を表示させたりと使う頻度は割と高めなので頑張って習得しましょう。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

box-shadowの使い方

box-shadowの基本的な使い方について紹介します。

box-shadowは「左右の位置」「上下の位置」「ぼかし」「広がり」「カラー」「内側指定」の6つの値を設定することができます。

box-shadow: 左右の位置px 上下の位置px ぼかしpx 広がりpx カラー 内側指定(inset);

内側に影を作成したい場合はinsetを追加し、外側に影を作成したい場合は何も指定しません。

影を上に表示させる

影を上に表示させるには、2つ目の値に設定する値を負の数にします。

.box{
  box-shadow: 0 -10px 0 0 #000;
}
影を上に表示させた実行結果
影を上に表示させた実行結果

影を下に表示させる

影を下に表示させるには、2つ目の値に設定する値を正の数にします。

.box{
  box-shadow: 0 10px 0 0 #000;
}
影を下に表示させた実行結果
影を下に表示させた実行結果

影を左に表示させる

影を左に表示させるには、1つ目の値に設定する値を負の数にします。

.box{
  box-shadow: -10px 0 0 0 #000;
}
影を左に表示させた実行結果
影を左に表示させた実行結果

影を右に表示させる

影を右に表示させるには、1つ目の値に設定する値を正の数にします。

.box{
  box-shadow: 10px 0 0 0 #000;
}
影を右に表示させた実行結果
影を右に表示させた実行結果

影を左上に表示させる

影を左上に表示させるには、1つ目と2つ目に設定する値を負の数にします。

.box{
  box-shadow: -10px -10px 0 0 #000;
}
影を左上に表示させた実行結果
影を左上に表示させた実行結果

影を右上に表示させる

影を右上に表示させるには、1つ目に設定する値を正の数にし、2つ目に設定する値を負の数にします。

.box{
  box-shadow: 10px -10px 0 0 #000;
}
影を右上に表示させた実行結果
影を右上に表示させた実行結果

影を左下に表示させる

影を左上に表示させるには、1つ目に設定する値を負の数にし、2つ目に設定する値を正の数にします。

.box{
  box-shadow: -10px 10px 0 0 #000;
}
影を左下に表示させた実行結果
影を左下に表示させた実行結果

影を右下に表示させる

影を右下に表示させるには、1つ目と2つ目に設定する値を正の数にします。

.box{
  box-shadow: 10px 10px 0 0 #000;
}
影を右下に表示させた実行結果
影を右下に表示させた実行結果

影をぼかす

影をぼかすには3つ目に設定する値を設定します。

.box{
  box-shadow: 10px 10px 5px 0 #000;
}
影をぼかし表示させた実行結果
影をぼかし表示させた実行結果

影を広げる

影を広げるには4つ目に設定する値を設定します。

.box{
  box-shadow: 10px 10px 0 5px #000;
}
影を広げ表示させた実行結果
影を広げ表示させた実行結果

影の色を変更する

影の色を変更するには、カラー名・rgb・rgbaのいずれかを設定します。

.box{
  box-shadow: 10px 10px 0 5px #00f;
}
影の色を変更して表示させた実行結果
影の色を変更して表示させた実行結果

内側に影を作る

内側に影を作る場合は、設定する値にinsetと記述します。

.box{
  box-shadow: 10px 10px 0 0 #000 inset;
}
影を内側に設定して表示させた実行結果
影を内側に設定して表示させた実行結果

Chromeの開発ツールで視覚的に影を調整する方法

box-shadowを使い慣れていない場合、数値を設定して調整するのに時間がかかってしまい非効率です。そこで、Chromeの開発ツールを使うことで、視覚的に影を調整することができます。

まず始めに開発ツールを開き(F12キー)、box-shadowのスタイルがあたっているHTMLタグを選択します。

box-shadowに設定されている値の左側に四角の箱のようなものが表示されるのでクリックします。マウスカーソルを乗せると「Open shadow editor」と表示されます。

Chrome開発ツール
Chrome開発ツール

shadow editorの設定項目の詳細は以下のとおりです。

shadow editor画面
shadow editor画面
  1. Type:影を外側に作成する場合Outsetを選択、影を内側に設定する場合Insetを選択
  2. X offset:x軸(1つ目の値)を設定
  3. Y offset:y軸(2つ目の値)を設定
  4. Blur:影をぼかす
  5. Spread:影を広げる

値を設定する横にxy座標を表した図が表示されているので、それを引っ張るとX offsetとY offsetの数値も連動して調整することができます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村