10月更新・前月(9月)の人気記事トップ10 10/01/2023
- ( 01 – ) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 09 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 02 ↓) 【Mac】MacにGoogle Driveをインストール
- ( 04 ↓) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 05 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 06 ↓) 【Labs】jQueryでモーダルウィンドウに画像を拡大表示
- ( 08 – ) 【2022年7月】Mac画面解像度まとめ
- ( 07 ↓) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 – ) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
【CSSリファレンス】max-height
こんにちは(・∀・)
CSSプロパティをご紹介します。今回ご紹介するCSSプロパティはmax-heightです。
概要
max-heightプロパティを使用して要素の高さの最大値を指定します。親要素の高さより大きな値を設定した場合は親要素で入力した高さが優先されます。入力した文字列が指定した高さ以上の長さになった場合は指定した要素をはみ出して表示されます。高さが確定しておらず可変にしたい場合は100%を指定するかもしくは未指定にします。
.sample {
max-height: 100px;
}
適用要素
すべての要素
置換要素以外のインライン要素とcol要素・colgroup要素を除く
指定できる値
- 実数値+単位
- 要素の最大高さを実数値+単位で設定
- %値
- 要素の最大高さを親要素の幅に対する割合で設定
- none
- 最大値の制限なし
初期値
none
サンプル
HTML
<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.
</p>
CSS
.demo {
max-height: 100px;
}
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.
max-height:100pxと指定してあるのでコンテンツが要素からはみ出してしまいました。