問題

45
HTML_CSS

テキストボックス内に影をつけよう

テキストボックスの内側に影を付けることによって、窪んだように見える立体感を演出することができます。デザインのレパートリーとして身に着けておきましょう!

HTML_CSSの問題に挑戦しよう!

問題

テキストボックス内に影をつけよう

テキストボックス内に影をつけてみましょう!
影を付けることで少しお洒落なテキストボックスになります。

見本画像を参考にしてCSSに記述し実装してください。

あらかじめエディタに書くコード

                    <input type="text" placeholder="テキストボックスです">
¥HTML¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

input属性やblock要素など、
要素の中に影を付けたいときは
box-shadowの中にinsetを付与します。
box-shadowの使い方は初級39を参考にしましょう。

補足

細かい部分にはなりますが、今回のようにテキストボックスに影を付けて沈んで見せるといった細部にデザインを凝らすことでお洒落なWebページだと認識されやすくなります。

CSSにはこのようなTips(小技)がたくさんあるので、オリジナルサイトでは細部まで拘って作成すると良いでしょう。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET