HTML_CSS
Googleでログイン
ブロック要素の影付けはbox-shadowを使おう
CSSでは、影を付けるためのプロパティがいくつか用意されています。
例を挙げると、drop-shadow、text-shadowなどがあります。
CSSで影付けを行なう事で要素を立体的に表現でき、目立たせたい要素などに使用すると便利です。
box-shadowで値を指定する際は、スペースで区切って複数の値を指定するため少し覚えるのが大変です。
HTML_CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTML_CSSマスターへの第一歩となるでしょう。
問題3：block要素に影をつけよう
block要素に影をつけてみましょう。
実務でも使用する事が多発します。
見本画像を参考に作っていきましょう。
実務でも使用する事が多発します。
見本画像を参考に作っていきましょう。
あらかじめエディタに書くコード
<div class="block__cat"></div>
¥HTML¥
.block__cat {
width: 300px;
height: 300px;
border: 1px solid;
background: red;
}
¥CSS¥
期待する画面
解答ソースコード
<div class="block__cat"></div>
¥HTML¥
.block__cat {
width: 300px;
height: 300px;
border: 1px solid;
background: red;
box-shadow: 10px 10px 15px -10px;
}
¥CSS¥
補足
box-shadowと似たプロパティに、text-shadowというプロパティもあります。
text-shadowは、テキストに対して影を付ける役割を持ち見出しなどによく使用されています。
指定する際の構文は、box-shadowと似ていて
text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色;のように指定できます。
text-shadowは、テキストに対して影を付ける役割を持ち見出しなどによく使用されています。
指定する際の構文は、box-shadowと似ていて
text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色;のように指定できます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定;のように指定できます。
またpxの指定では、-(マイナス)を使用する事もできるので覚えておきましょう。