HTML5 & CSS3 リファレンス - max-width プロパティ（幅の最大値）

CSS3: max-width プロパティ - 幅の最大値

■ 概要

項　　目	説　　明
記述形式	セレクタ {max-width: 値 }
値の形式	数値　（長さ，%） \| none
初期値	none
対応ブラウザー	C2+ / e7+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素	すべての要素　（非置換のインライン要素，テーブルのコラム，コラム・グループを除く）
継　　承	しない

■ 解説

max-widthプロパティ は，幅の最大値 を指定します。

指定できる値の形式は，以下のとおりです。

値	説　　明
数値　（長さ）	幅の最大値を長さの単位を付けて指定します。
数値　（%）	コンテンツのブロックの幅を基準にした百分率（%）で幅の最大値を指定します。
none	幅には最大値として制限はつけません。

■ 使用例（ max-width プロパティの利用）

HTMLソース
CSS <head> ～ </head>	div.sample { display: inline-block; margin: 10px; padding: 0.1em; border: 0.1em solid #8c8c8c; max-width: 16.4em; }
HTML <body> ～ </body>	<div class="sample">テキスト　テキスト</div> <br> <div class="sample">テキスト　テキスト　テキスト</div> <br> <div class="sample">テキスト　テキスト　テキスト　テキスト　テキスト　テキスト</div>

HTMLソース

CSS
<head> ～ </head>

div.sample {
   display: inline-block;
   margin: 10px;
   padding: 0.1em;
   border: 0.1em solid #8c8c8c;
   max-width: 16.4em;
}

HTML
<body> ～ </body>

<div class="sample">テキスト　テキスト</div>
<br>
<div class="sample">テキスト　テキスト　テキスト</div>
<br>
<div class="sample">テキスト　テキスト　テキスト　テキスト　テキスト　テキスト</div>

ブラウザー表示例
テキスト　テキスト ↑ width =（文字列の幅＋ 0.4）em の表示テキスト　テキスト　テキスト ↑ width =（文字列の幅＋ 0.4）em の表示テキスト　テキスト　テキスト　テキスト　テキスト　テキスト ↑ width = max-width = 16.4em の表示

上の例では，sampleクラス の <div> 要素では， padding と border の設定値から，width プロパティの値は，通常，(文字列の幅＋ 0.4) [em] となります。　しかし，このクラスでは，max-width プロパティ の値が 16.4em となっていますので，width プロパティの値は， 16.4em を上限としてそれより大きくはなりません。

■ 備考

【参考ページ】

「とほほの WWW 入門」の「スタイルシート入門」の「max-width プロパティ」のページ
「HTMLクイックリファレンス」の「max-width プロパティ」のページ
「ねこだまのCSSリファレンス&デモ」の「max-width プロパティ」のページ
「W3C」の「max-width プロパティ」のページ