【CSS Modules】max-widthプロパティの使い方

max-widthプロパティは、要素の最大幅を保持するプロパティです。このプロパティを使用すると、HTML要素の横幅が指定した値を超えることを防ぎ、レイアウトを制御できます。widthプロパティで幅を設定した場合でも、max-widthが設定されていれば、要素の実際の幅はその最大値を超えません。

設定できる値には、px（ピクセル）やem（フォントサイズに基づく単位）のような絶対的な長さ、親要素の幅に対する割合を示すパーセンテージ、そして最大幅の制限を解除するnoneがあります。noneは初期値であり、幅に上限を設定しないことを意味します。

このプロパティは、異なる画面サイズに適応するレスポンシブデザインにおいて非常に重要です。広い画面ではwidthプロパティの指定に従いますが、画面が狭くなった際には、要素が親要素からはみ出すことなく、自動的にmax-widthで指定された値、または利用可能な幅に収まるよう調整されます。これにより、Webサイトのレイアウト崩れを防ぎ、どのデバイスでも最適な表示を提供できます。

画像要素にmax-width: 100%;を設定することは一般的で、どんなサイズの画像でも親要素の幅を超えて表示されることなく、適切に縮小されます。min-widthプロパティと組み合わせることで、要素の幅を下限と上限の範囲内に制限することも可能です。要素の最終的な幅は、width、min-width、max-widthの各プロパティの相互作用によって決定されます。

Copy
1selector {
2  max-width: 500px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません