ログイン

問題3 block要素に影をつけよう

HTML_CSSの問題

HTML_CSS

Googleが提唱した「マテリアルデザイン」が今も多くのWebサイトで重視されている。マテリアルデザインとはWebページ上のボタンなどを立体的に見せるなど、ユーザーが感覚的に操作できるデザインのこと。今回はそのひとつである影の付け方をマスターしよう!

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プロパティを使用します。

box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定;のように指定できます。
またpxの指定では、-(マイナス)を使用する事もできるので覚えておきましょう。
ログインして解答を見る
box-shadowと似たプロパティに、text-shadowというプロパティもあります。
text-shadowは、テキストに対して影を付ける役割を持ち見出しなどによく使用されています。

指定する際の構文は、box-shadowと似ていて
text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色;のように指定できます。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!