元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

CSS入門(box-shadowプロパティの使い方)

box-shadowプロパティの基本的な使い方について書きます。box-shadowプロパティは、要素に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。

記述の仕方

/* 記述例 */
セレクタ名{ box-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 (inset); }

box-shadowプロパティの基本情報

box-shadowプロパティが取る値について説明します。

  • 水平方向の距離
    • 水平方向の影の距離を指定する
    • 正の値だと右に、負の値だと左に影を付ける
  • 垂直方向の距離
    • 垂直方向の影の距離を指定する
    • 正の値だと下に、負の値だと上に影を付ける
  • ぼかし距離
    • 影をぼかす距離
  • 広がり距離
    • 正の値だと拡大し、負の値だと縮小する
  • 影の色
  • inset
    • 影が要素の内側に付く

サンプルコード

共通のスタイルを.boxにまとめて、box-shadowプロパティの指定を切り出しています。

<p class="boxshadow1 box">box-shadowで要素に影を付ける</p>
<p class="boxshadow2 box">box-shadowで要素に影を付ける</p>
<p class="boxshadow3 box">box-shadowで要素に影を付ける</p>
<p class="boxshadow4 box">box-shadowで要素に影を付ける</p>
/* 共通のスタイル */
.box{
  font-size:24px;
  font-weight:bold;
  background:#f3f3f3;
  padding:10px;
  border: solid 1px #333333;
}

/* ぼかしのないくっきりした影ができる */
.boxshadow1{
  box-shadow:4px 4px #666666;
}
/* ぼかした影ができる */
.boxshadow2{
  box-shadow:4px 4px 4px #666666;
}
/* ぼかした影を拡大する */
.boxshadow3{
  box-shadow:4px 4px 4px 4px #666666;
}
/* 複数の影を要素の内側に付ける */
.boxshadow4{
  box-shadow:10px 10px 10px -4px #666666 inset,
            -10px -10px 10px -4px #666666 inset;
}

表示例

box-shadowで要素に影を付ける

box-shadowで要素に影を付ける

box-shadowで要素に影を付ける

box-shadowで要素に影を付ける

使用例

要素の内側に色付きの影を指定しています。色があるだけで雰囲気が変わります。影を付けることで、ボタンに立体感が出たかと思います。ぼかしがグラデーションのような効果を生んで、ベタ塗りとは違ったデザインになります。

まとめ

box-shadowプロパティの基本的な使い方について書きました。box-shadowプロパティは、「立体感を出したい」ときに使うと良いです。他のプロパティと組み合わせて、新たな見せ方を見つけるのも良いです。