コーディング学習

HTML & CSS|Progate修了したけど『あれっ?』【忍者CODE-初級問3】

コーディング案件獲得を目標に、現在ロードマップに沿って勉強しています。

ということで、

  • Progate[HTML & CSS]修了したけど
  • 忍者CODEではこんなところに苦戦した

についてを解説していきます。
コーディングを学び始めた方々へ少しでも参考になればと思います。

今回の解説内容はこちら!

忍者CODE[HTML_CSS]初級3問目より解説
  1. 苦戦した部分
  2. 攻略した方法
  3. 参考ページ紹介
グラナッポー

今回の問題は比較的簡単なっぷる✨

  • 正確な答えについては、忍者CODEの出題ページにて確認してください。
  • 回答を開くと説明も付いてますので、大変勉強になります。
トマト男爵

では、解説を始める❗️

【挑戦】忍者CODE HTML_CSS 初級3問目

問題の内容

出典:忍者CODE HTML_CSS 初級3

コードを入力してみた

See the Pen 忍者初3 by りんこ (@rinco-pero) on CodePen.

問題文下のHTMLコードとCSSコードを入力すると、赤いボックスが作成されます。そのボックスに影をつけるという問題です。

グラナッポー

プロパティーはすぐに思いついたけど……そのあとが💧

▶︎ 参考サイト:セレクタやプロパティーについて ◀︎

苦戦した部分

  • プロパティーのつづり(スペル)
  • プロパティー値の書き方(使い方)

ボックスに影をつけるから…と考えると、プロパティーは簡単に思いつきました。

ナッスングラス

ただ、英語のスペルと、使い方を覚えてなかったんだよねw

攻略した方法

ググったら簡単に答えがでてきました。

検索ワード
  • ボックスシャドウ css
  • ボックス 影 css

問題の解説と参考サイト

ボックスシャドウの使い方を理解できていれば、簡単にクリアできると思います。
注意点としては、見本の影の大きさに注視したほうがいいと思います。

参考サイト
【CSS】box-shadowで影をつける方法とサンプル集 – サルワカ
グラナッポー

影の大きさや範囲は、プロパティーの使い方さえ理解できてれば問題なさそうだ♪

まとめ

忍者CODE HTML_CSS:初級3問目に挑戦したことについて解説しました。

解説内容

問題の内容

問題文下のコードを入力すると赤いボックスが作成される。
そのボックスに影をつける。

苦戦した部分

  • プロパティーのつづり(スペル)
  • プロパティー値の書き方(使い方)

攻略した方法

ググった

検索ワード
  • ボックスシャドウ css
  • ボックス 影 css

問題の解説

ボックスシャドウの使い方が理解できていれば、クリアは簡単。

参考サイト

単純に影をつけるだけなら簡単だと思いますが、

  • ぼかしたり、
  • サイズを変えたり、
  • 色を変えたり、

いろいろなことをしようと思うと奥が深いです。

詳しく学びたい方は、参考サイトを見てみてくださいね。

りんこ(@Rinko_2_Pero)でした!

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA