CSSでbox-shadowを使って影をつける方法【初心者向け】

初心者向けにCSSでbox-shadowを使って影をつける方法について解説しています。実際にコードを書きながら例をもとに説明しているので、すぐ理解できるはずです。Webデザインで応用できる知識なので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今回はCSSでbox-shadowを使って影をつける方法を説明します。ボタンなどより目立たせたいものがあるときに役立つ知識でしょう。

実際のWebサイトでも利用しているので、知っておくと実際の業務でも役立つはずです。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回はbox-shadowについて解説するよ。

大石ゆかり

田島メンター!!box-shadowはどういったプロパティなんですか~?

田島悠介

これはボックスに影をつけることができるものなんだ。具体的にどのように指定するか見てみよう。

大石ゆかり

了解です!

 

目次

 

box-shadowとは

boxに1つまたは複数の影を付けることのできるプロパティです。

「box-shadowプロパティ」では下記のように影を指定できます。

 

影は、2~4個の長さの値を受け取って定義されますが、これに加えて色や、キーワードを指定できます。指定できるキーワードは「inset」というキーワードです。「inset」というキーワードは影がボックスの外側ではなく、内側につきます。

長さのプロパティの指定を省略すると、長さは0になり、色を省略するとユーザーエージェントが選んだ色になります。

複数の影を指定する場合は「””,””」(カンマ)で区切り、影のリストを複数指定しましょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

box-shadowの書き方

「box-shadow」の書き方は以下の通りです。

box-shadow: 0px 0px 10px 0px #5bc0de inset;

影を定義する指定内容は以下のように解釈されます。

  • 1番目の長さの値は水平方向の影の距離です。正の値を指定すると右へ、負の値だと左へ広がります。
  • 2番目の長さの値は垂直方向の影の距離です。正の値を指定すると下へ、負の値だと上へ広がります。
  • 3番目の長さの値はぼかし距離です。負の値は指定できず、値が0であればはっきりとします。
  • 4番目の長さの値は広がり距離です。正の値を指定すると拡大、負の値だと縮小します。

色を指定すれば、その色の影になります。

また「inset」プロパティが設定されていれば、影がボックスの外側から内側になります。

ちなみに「box-shadowプロパティ」は「first-letter擬似要素」には適用されますが、「first-line擬似要素」には適用されません。

 

田島悠介

insetの値を指定することで、影を内側に表示させたりすることもできるよ。

大石ゆかり

最初の2つの値で影の角度が決まるようになってるんですね。

田島悠介

次は実際に影を設定してみよう。今回は2つの例で見てみるよ。

 

実際に書いてみよう

下にあるHTMLとCSSをコピーしてWebブラウザで確認してみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS box-shadow</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

    <p>box-shadow 外側</p>
    <div class="shadow1"> box-shadow: 10px 20px 5px 0px #5bc0de;</div>
    <br />

    <p>box-shadow 内側</p>
    <div class="shadow2">box-shadow: 0px 0px 10px 0px #5bc0de inset;</div>

  </body>
</html>

 

CSS

.shadow1{
  box-shadow: 10px 20px 5px 0px #5bc0de;
}

.shadow2{
  box-shadow: 0px 0px 10px 0px #5bc0de inset;
}

div{
  width: 400px;
  padding: 20px;
  border: 1px solid #5bc0de;
}

p{
  font-weight: bold;
}

「sample.html」を開いてみて結果を確認してみましょう。

スクリーンショット 2016-08-29 16.40.12

通常の「box-shadowプロパティ」を使用し、下には色や、「insetプロパティ」を追加してみました。

立体的に表現する手段の1つとして、「box-shadowプロパティ」を使うといいでしょう。動的なコーディングもそうですが、立体的に見せることも重要です。

 

田島悠介

右下に影を設定した場合と、insetによって内側に表示した場合の例だよ。

大石ゆかり

ぼかしを使うと自然な印象に見えますね。

田島悠介

影のぼかしや広がりと色、insetの値は任意だけれども横方向と縦方向の2つの値はかならず入力する必要があるので注意しよう。

大石ゆかり

なるほど、分かりました。ありがとうございます!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。