問題

11
CSSアニメーション

コードを修正して正しく表示しよう2

CSSアニメーションの問題に挑戦しよう!

問題

コードを修正して正しく表示しよう2

今回はよく使うinputタグについての問題です。
初心者の方がほとんどつまずくポイントかと思います。
inputのheightをinheritにより親要素と同じ高さにしたつもりが、親要素を飛び出してしまっています。

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

                    <div class="box">
  <input type="text" placeholder="キーワード">
</div>
¥HTML¥
                
                    .box{
  background-color: #dddddd;
  width: 300px;
  height: 40px;
}
.box input{
  height: inherit;
}
¥CSS¥
                

期待する画面

解答と解説(コードを修正して正しく表示しよう2)

解説

LINE登録して解答を見る

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

cssは初期値ではheightにpaddingとborderの分の幅を含みません。そのためbox-sizingにborder-boxを適用して、heightにpaddingとborderの両方を幅に含ませる必要があります。

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

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら