max-height/最大の高さ

max-heightプロパティは最大の高さを指定出来ます。

説明

 max-heightは最大の高さを固定値や相対値等を使って設定出来ます。記述した文字や画像が設定した高さを越える場合ははみ出して表示されます。

max-height説明(高さを越える場合)

 記述した文字や画像が設定した高さに満たない場合は表示するのに必要な高さだけ確保します。 max-height説明(高さに満たない場合)

構文

 heightプロパティの構文は以下の通りです。

max-height: 最大の高さ;

 最大の高さの指定は以下が出来ます。

【max-heightでの最大の高さの指定】
説明
px ピクセル指定
em 文字の大きさに対する割合
% 親ボックスの幅に対する割合
none 設定なし(デフォルト)

max-height利用例

 heightの利用例は以下の通りです。環境によって表示が変わらないようにline-heightも指定しています。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
max-height: 50px;
line-height:100%;
}

<div>1行目<br>
2行目<br>
3行目<br>
4行目
5行目
</div>

 上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

1行目
2行目
3行目
4行目
5行目

 高さとして50pxを確保し、それを越える分ははみ出して表示されています。

 以下のように必要な高さが50pxに満たない場合は50px以下の高さになります。

1行目

 em指定の例は以下の通りです。分かり易いようにwidthも指定しています。

div {
width: 1em;
max-height: 5em;
line-height:100%;
}

<div>あいうえおかき</div>

 上記を表示すると以下になります。

あいうえおかき

 5文字分の高さが取られ、6、7文字目ははみ出て表示されています。

 %指定の例は以下の通りです。

div {
height: 120%;
line-height:100%;
}

<div>
1行目<br>
2行目<br>
3行目
4行目
5行目
</div>

 上記を表示すると以下になります。

1行目
2行目
3行目
4行目
5行目

 点線の枠で高さを50pxに指定しており、その120%の高さまでを最大値として確保するため高さが枠からはみ出しています。

 noneを指定すると他で指定したmax-heigthを打ち消せます。

div {
max-height: 80%;
}

.t1 {
max-height: none;
}

<div class="t1">max-height例</div>

留意点

 <span>タグ等のインラインボックスは必要な高さしか取らないため、指定しても無視されます。

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)