問題
45
HTML/CSS
テキストボックス内に影をつけよう
テキストボックスの内側に影を付けることによって、窪んだように見える立体感を演出することができます。デザインのレパートリーとして身に着けておきましょう!
HTML/CSSの問題に挑戦しよう！
問題
「テキストボックス内に影をつけよう」
テキストボックス内に影をつけてみましょう!
影を付けることで少しお洒落なテキストボックスになります。
見本画像を参考にしてCSSに記述し実装してください。
あらかじめエディタに書くコード
<input type="text" placeholder="テキストボックスです">
¥HTML¥
期待する画面
解答と解説（テキストボックス内に影をつけよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
input属性やblock要素など、
要素の中に影を付けたいときは
box-shadowの中にinsetを付与します。
box-shadowの使い方は初級39を参考にしましょう。
補足
細かい部分にはなりますが、今回のようにテキストボックスに影を付けて沈んで見せるといった細部にデザインを凝らすことでお洒落なWebページだと認識されやすくなります。
CSSにはこのようなTips(小技)がたくさんあるので、オリジナルサイトでは細部まで拘って作成すると良いでしょう。
