ログイン
問題45

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

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

アイコン画像

問題45:テキストボックス内に影をつけよう

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

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

エディターのアイコンあらかじめエディタに書くコード

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

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <input type="text" placeholder="テキストボックスです">
¥HTML¥
            
              input {
    height: 40px;
    padding: 0px 40px;
    background: #edf0f2;
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.2) inset;
    font-size: 14px;
}
¥CSS¥
            

コメントのアイコン解説

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

コメントのアイコン補足

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

CSSにはこのようなTips(小技)がたくさんあるので、オリジナルサイトでは細部まで拘って作成すると良いでしょう。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる