ログイン
問題46

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

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

アイコン画像

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

閉じる