max-widthプロパティ。
CSSに於ける要素の幅の最大値・max-widthプロパティに関する解説です。
max-widthプロパティとは。
max-widthプロパティは、要素の幅の最大値です。
max-widthプロパティを与えられた場合、ボックスの横幅はこのプロパティで与えられた値より大きい場合はwidthプロパティにこの値が与えられたものと見なして処理されます。
max-widthプロパティの記述例。
例えば、HTMLの<blockquote>要素において、最小幅を20文字分、最大幅を親要素の60％としたい場合は、
blockquote {min-width: 20em;max-width: 60%;}
と記述します。
max-widthプロパティに関する注意事項。
max-widthプロパティの仕様上の注意。
max-widthプロパティとmin-widthプロパティの関係。
max-widthプロパティとmin-widthプロパティとで値の単位が異なる場合などに、min-widthプロパティで指定された最小幅の方がmax-widthプロパティで指定された最大値より大きくなる場合があります。
このような場合には、max-widthプロパティの値はmin-widthプロパティの値に上書きされます。
- 事実上widthプロパティにmin-widthプロパティの値が設定される事になります。
狭過ぎて要素が入り切らなくなった場合。
仕様上、max-widthプロパティを当てた結果、当該要素のボックスが狭くなり過ぎて要素が入り切らなくなっても、適宜ボックスを押し拡げるような事はしません。
- 勝手に押し拡げてしまう実装のユーザエージェントもありますが、不正な実装です。
このため、入り切らなくなった場合の挙動を別途overflowプロパティで指定しておく事をお勧めします。
max-widthプロパティの実装上の注意。
ネットスケープ 4.xでの注意事項。
ネットスケープ 4.xでは、max-widthプロパティを実装しておりません。
インターネットエクスプローラでの注意事項。
インターネットエクスプローラでは、ウィンドウズ版 6.xまでマッキントッシュ版 5.xまでのいずれもmax-widthプロパティを実装しておりません。
WAP 2.0での注意事項。
WAP 2.0では、max-widthプロパティは定義されておりません。