要素の高さに縛りをつけよう

問題46：要素の高さに縛りをつけよう

要素の最高の高さに縛りを付けましょう。

高さからはみ出した文字は隠しましょう。
見本画像を参考にしてCSSに記述し実装してください。

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

                <div class="block">
    <p>テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1</p>
    <p>テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2</p>
</div>
¥HTML¥

                .block p {
    width: 200px;
    display: inline-block;
}
¥CSS¥

期待する画面

解答ソースコード

              <div class="block">
  <p>テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1</p>
  <p>テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2</p>
</div>
¥HTML¥

              .block p {
    width: 200px;
    display: inline-block;
    max-height: 100px;
    overflow: hidden;
}
¥CSS¥

解説

要素のmax値の高さに制限をつけるには
max-heightを定義します。

また、幅のmax値の制御につきましては、max-widthを定義します。

ログインして解答を見る

補足

初級23では最小幅と高さについての問題でしたが、今回は最大の幅と高さを設定する問題でした。
要領は同じなので、minをmaxに変えて記述すればOKです。

一般的には、レスポンシブに対応させる際の設定によく使います。
レスポンシブデザインとは、スマホやタブレット、PCどの端末で見てもちょうどいい大きさで画面表示されるWebデザインのことです。
このようなデザインは高さと幅に可変幅を設定しておくことで、実現することが可能です。
次の問題からレスポンシブについて触れていきます。しっかり覚えていきましょう。

#忍者CODE無料問題集で活動を記録しよう

完了にする！

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

NEXT > 【レスポンシブ】スマホ時の挙動を変えるへ

コース一覧に戻る

1.HTMLの宣言をしてみよう

続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。