忍者CODE

ログイン

3
block要素に影をつけよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
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 色 内側指定;のように指定できます。
また、-(マイナス)であるネガティブも使用する事ができるので覚えておきましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET