WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「横幅の最大値、最小値」

max-width,min-width 「幅の最大値、最小値」

要素の幅の制限を指定します。
「max-width」は、要素の幅の最大値を指定します。
「min-width」は、要素の幅の最小値を指定します。

CSS Ver.適用要素継承
2.1全て ※1しない
※1 但し、非置換インライン要素を除く
広告

max-width,min-width の指定方法

構文

max-width : length | none;

min-width : length;

プロパティ/設定値意味
max-width: none;
max-width: 100px;
max-width: 80%;

幅の最大値の制限なし(初期値)
幅の最大値を値で指定。負の値は指定不可。
長さ・大きさの単位参照
デフォルト:「タグ毎のスタイル初期値」を参照
min-width: 100px;
min-width: 80%;

幅の最小値を値で指定。負の値は指定不可。
長さ・大きさの単位参照
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

max-width,min-width のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  width         : 290px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_max-width_none{
  max-width : none;
  white-space: nowrap;
  display: inline-block;
}
.css_max-width_250{
  max-width : 250px;
  white-space: nowrap;
  display: inline-block;
}
.css_max-width_500{
  max-width : 500px;
  white-space: nowrap;
  display: inline-block;
}
.css_min-width_290{
  min-width : 290px;
  white-space: nowrap;
  display: inline-block;
}
.css_min-width_500{
  min-width : 500px;
  white-space: nowrap;
  display: inline-block;
}

<!-- html -->
<div class="common">
  <div class="cssTitle">max-width : none;</div>
  <div class="css_max-width_none">
  幅制限なし。要素にあわせた幅で表示。幅制限なし。要素にあわせた幅で表示。
  </div>
  <div class="cssTitle">max-width : 250px;</div>
  <div class="css_max-width_250">
  幅の最大値を超える部分ははみ出して表示。幅の最大値を超える部分ははみ出して表示。
  </div>
  <div class="cssTitle">max-width : 500px;</div>
  <div class="css_max-width_500">
  幅の最大値内で、要素にあわせた幅で表示。
  </div>
  <div class="cssTitle">min-width : 290px;</div>
  <div class="css_min-width_290">
  最小値の幅を超える部分は、要素にあわせた幅で表示。
  </div>
  <div class="cssTitle">min-width : 500px;</div>
  <div class="css_min-width_500">
  最小値の幅で、要素と余白を表示。
  </div>
</div>
max-width : none;
幅制限なし。要素にあわせた幅で表示。幅制限なし。要素にあわせた幅で表示。
max-width : 250px;
幅の最大値を超える部分ははみ出して表示。幅の最大値を超える部分ははみ出して表示。
max-width : 500px;
幅の最大値内で、要素にあわせた幅で表示。
min-width : 290px;
最小値の幅を超える部分は、要素にあわせた幅で表示。
min-width : 500px;
最小値の幅で、要素と余白を表示。

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン