CSSリファレンス

実践向けCSSリファレンス

要素の幅の最小値を指定する。 min-width

概要

CSSプロパティ「min-width」は、要素の幅の最小値を設定することができます。設定することでその幅を下回ることがなくなります。最低限の幅を保持したい場合に有用です。一方で、最大値を指定したい場合は max-width を使用し、更に高さの最大、最小値は、min-heightmax-height プロパティを使用します。

また width を同時に指定した場合は、width の値が 「min-width」 の値を下回ることはありません。

<div>
  <p class="width">指定がないので、おりかえされる</p>
  <p class="min-width">min-width指定</p>
</div>
<style>
div {
  background-color: #def;
  width: 280px;
  height: 100px;
}
p {
  font-size: 12px;
  background-color: #fdd;
  width: 25%;
}
.min-width {
  min-width: 150px;
}
</style>

ピンク色の要素はCSSプロパティ width  で25%の値を指定しています。親要素の幅が280pxなので、その25%で70pxがピンク色の幅に指定されています。

そして下段の方は更に 「min-width」 の指定で最低幅を150pxにしました。そうすると 「min-width」 を指定していない方は文字が折り返されたのに対し、指定した方は幅が広がりました。

値の指定方法

{ min-width: キーワード, 値, パーセント }

実数値 + 以下のような単位で指定します。マイナス値は指定できませんので、注意しましょう。

値の単位の詳細は以下の通りです。

単位説明
pxpxとは画面の1画素(ピクセル)のサイズを1とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em親要素を起点とする文字の高さを1とする単位です。1emは1文字分となります。
%親要素の幅を基準に割合を%値で指定した単位です。

使用例

クリックすると動きのでる横棒グラフを作成します。このアニメーションはCSSプロパティ transition[/css] を使います。「min-width」の使い所は、初期値の指定で最低限の幅を持たせています。

そして、ボタンのクリック後の値に、任意の幅を指定することで実現することができます。

<div class="width"></div>

<button>クリックするとバーがのびます</button>
<ul>
  <li class="width-20"></li>
  <li class="width-50"></li>
  <li class="width-100"></li>
</ul>
<style>
* {
  padding: 0;
  margin: 0;
}
button {
  padding: 10px;
  margin-bottom: 10px;
}
li {
  background-color: #ffc0cb;
  list-style: none;
  margin-bottom: 5px;
  height: 40px;
  width: 0%;
  min-width: 10px; /* 最低サイズを指定します */
}
button:active + ul li,
button:focus + ul li {
  transition: 1s;
}

/* クリックされたときのwidthの値を指定 */
button:active + ul .width-20,
button:focus + ul .width-20 {
  width: 20%;
}
button:active + ul .width-50,
button:focus + ul .width-50 {
  width: 50%;
}
button:active + ul .width-100,
button:focus + ul .width-100 {
  width: 100%;
}
</style>

仕様書

関連CSSプロパティ

閉じる