max-widthプロパティ

TOPページに戻る > CSS

スポンサード リンク

max-widthプロパティ

HTML要素の横幅の最大値を指定できます(paddingを含まない横幅)
指定した幅より横には広がらなくなります
最初は指定した値で表示されますが、ブラウザの幅を小さくすると固定されずに縮小されます
値はpx、emなどの単位、親ブロック要素の割合を%で指定、none(最大値の設定なし)
paddingの幅はmax-widthの幅には含まれません。paddingを指定している場合、max-widthの幅+paddingが要素の横幅になります
min-widthといっしょにmax-widthを使うことができます。その場合、mix-widthが100px、max-widthが200pxに指定すると100px~200pxの範囲に幅を限定できます
※IE6が対応していません IE7から対応しています

使い方(書式)

セレクタ { max-width: 値; }

max-widthプロパティ

対応ブラウザ ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 ブロック要素とtd th input textarea select img
子要素へのスタイルの継承 しない

プロパティの値 説明
単位 px、emなどの単位
% パーセントで指定。親ブロック要素の割合を%で指定
none 最大値の制限なし、初期値

実際の指定方法

.hogeimg {
 max-width: 100px;             /* 横幅に100pxの最大値を設定 */
 }
.hoge { max-width: 300px; }    /* 300pxの横幅に指定 */
.hoge2 { max-width: 50%; }     /* 親ブロック要素の50%の横幅 */
.hoge3 { max-width: none; }    /* 表示できる幅まで広がります */
.hoge { max-width: 100px; border: solid 1px; } .hoge2 { max-width: 50%; border: solid 1px; } .hoge3 { max-width: auto; border: solid 1px; }

html部分

<img class="hogeimg" src="a200.gif" alt="">

<div class="hoge">max-width: 300px;</div>
<br>
<div class="hoge2">max-width: 50%;</div>
<br>
<div class="hoge3">max-width: none;</div>

実際の表示

原寸大の画像です

下がmax-width: 100px;を指定した画像。ほとんどのブラウザは縦横比維持で縮小されます


max-width: 300px;

max-width: 50%;

max-width: none;

widthとの違い

widthプロパティは指定した幅で固定されるのに対して、max-widthは、最初は最大値で表示されますが、ブラウザの幅を小さくすると固定されずに縮小されます

demo
max-widthのデモ


(C)2012 ホームページ作成無料