ログイン

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

HTML_CSSの問題

HTML_CSS

要素の高さを制限する方法は初級23を通して少しで理解できているかと思います。 高さを設定し、はみ出す部分を隠してみましょう。

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

問題

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

高さからはみ出した文字は隠しましょう。
見本画像を参考にして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デザインのことです。
このようなデザインは高さと幅に可変幅を設定しておくことで、実現することが可能です。
次の問題からレスポンシブについて触れていきます。しっかり覚えていきましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!