コーディング案件獲得を目標に、現在ロードマップに沿って勉強しています。
ということで、
についてを解説していきます。
コーディングを学び始めた方々へ少しでも参考になればと思います。
今回の解説内容はこちら！
忍者CODE［HTML_CSS］初級3問目より解説
- 苦戦した部分
- 攻略した方法
- 参考ページ紹介
今回の問題は比較的簡単なっぷる✨
- 正確な答えについては、忍者CODEの出題ページにて確認してください。
- 回答を開くと説明も付いてますので、大変勉強になります。
では、解説を始める❗️
【挑戦】忍者CODE HTML_CSS 初級3問目
問題の内容
出典：忍者CODE HTML_CSS 初級3
コードを入力してみた
See the Pen 忍者初3 by りんこ (@rinco-pero) on CodePen.
問題文下のHTMLコードとCSSコードを入力すると、赤いボックスが作成されます。そのボックスに影をつけるという問題です。
プロパティーはすぐに思いついたけど……そのあとが💧
▶︎ 参考サイト：セレクタやプロパティーについて ◀︎
苦戦した部分
ボックスに影をつけるから…と考えると、プロパティーは簡単に思いつきました。
ただ、英語のスペルと、使い方を覚えてなかったんだよねw
攻略した方法
ググったら簡単に答えがでてきました。
検索ワード
- ボックスシャドウ css
- ボックス 影 css
問題の解説と参考サイト
ボックスシャドウの使い方を理解できていれば、簡単にクリアできると思います。
注意点としては、見本の影の大きさに注視したほうがいいと思います。
影の大きさや範囲は、プロパティーの使い方さえ理解できてれば問題なさそうだ♪
まとめ
忍者CODE HTML_CSS：初級3問目に挑戦したことについて解説しました。
解説内容
問題の内容
問題文下のコードを入力すると赤いボックスが作成される。
そのボックスに影をつける。
苦戦した部分
- プロパティーのつづり（スペル）
- プロパティー値の書き方（使い方）
攻略した方法
ググった
検索ワード
- ボックスシャドウ css
- ボックス 影 css
問題の解説
ボックスシャドウの使い方が理解できていれば、クリアは簡単。
参考サイト
単純に影をつけるだけなら簡単だと思いますが、
- ぼかしたり、
- サイズを変えたり、
- 色を変えたり、
いろいろなことをしようと思うと奥が深いです。
詳しく学びたい方は、参考サイトを見てみてくださいね。
りんこ（@Rinko_2_Pero）でした！
