CSSでbox-shadowを使って影をつける方法【初心者向け】
初心者向けにCSSでbox-shadowを使って影をつける方法について解説しています。実際にコードを書きながら例をもとに説明しているので、すぐ理解できるはずです。Webデザインで応用できる知識なので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はCSSでbox-shadowを使って影をつける方法を説明します。ボタンなどより目立たせたいものがあるときに役立つ知識でしょう。
実際のWebサイトでも利用しているので、知っておくと実際の業務でも役立つはずです。
そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回はbox-shadowについて解説するよ。
田島メンター！！box-shadowはどういったプロパティなんですか～？
これはボックスに影をつけることができるものなんだ。具体的にどのように指定するか見てみよう。
了解です！
目次
box-shadowとは
boxに1つまたは複数の影を付けることのできるプロパティです。
「box-shadowプロパティ」では下記のように影を指定できます。
影は、2～4個の長さの値を受け取って定義されますが、これに加えて色や、キーワードを指定できます。指定できるキーワードは「inset」というキーワードです。「inset」というキーワードは影がボックスの外側ではなく、内側につきます。
長さのプロパティの指定を省略すると、長さは0になり、色を省略するとユーザーエージェントが選んだ色になります。
複数の影を指定する場合は「””,””」(カンマ)で区切り、影のリストを複数指定しましょう。
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」を開いてみて結果を確認してみましょう。
通常の「box-shadowプロパティ」を使用し、下には色や、「insetプロパティ」を追加してみました。
立体的に表現する手段の1つとして、「box-shadowプロパティ」を使うといいでしょう。動的なコーディングもそうですが、立体的に見せることも重要です。
右下に影を設定した場合と、insetによって内側に表示した場合の例だよ。
ぼかしを使うと自然な印象に見えますね。
影のぼかしや広がりと色、insetの値は任意だけれども横方向と縦方向の2つの値はかならず入力する必要があるので注意しよう。
なるほど、分かりました。ありがとうございます！
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
