問題
3block要素に影をつけよう
Googleが提唱した「マテリアルデザイン」が今も多くのWebサイトで重視されている。マテリアルデザインとはWebページ上のボタンなどを立体的に見せるなど、ユーザーが感覚的に操作できるデザインのこと。今回はそのひとつである影の付け方をマスターしよう!
HTML/CSSの問題に挑戦しよう！
問題
「block要素に影をつけよう」
block要素に影をつけてみましょう。
実務でも使用する事が多発します。
見本画像を参考に作っていきましょう。
あらかじめエディタに書くコード
<div class="block__cat"></div>
¥HTML¥
.block__cat {
width: 300px;
height: 300px;
border: 1px solid;
background: red;
}
¥CSS¥
期待する画面
解答と解説（block要素に影をつけよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
要素に影つける際には、box-shadowプロパティを使用します。
box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定;のように指定できます。
またpxの指定では、-(マイナス)を使用する事もできるので覚えておきましょう。
補足
box-shadowと似たプロパティに、text-shadowというプロパティもあります。
text-shadowは、テキストに対して影を付ける役割を持ち見出しなどによく使用されています。
指定する際の構文は、box-shadowと似ていて
text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色;のように指定できます。
ポイント
ブロック要素の影付けはbox-shadowを使おう
CSSでは、影を付けるためのプロパティがいくつか用意されています。
例を挙げると、drop-shadow、text-shadowなどがあります。
CSSで影付けを行なう事で要素を立体的に表現でき、目立たせたい要素などに使用すると便利です。
box-shadowで値を指定する際は、スペースで区切って複数の値を指定するため少し覚えるのが大変です。
