にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi via WordPress.

横幅の範囲を制限(上限・下限を指定)して、広すぎたり狭すぎたりするのを防ぐCSS [ボックス,]

ボックスなどの横幅を指定したいなら、widthプロパティに望みの値や割合を書けば良いだけです。
しかし、横幅の上限(最大幅)や下限(最小幅)を指定して、広さの範囲を制限したいこともあります。
例えば、

  • 横幅の基本は「親要素の80%」にするが、1,200ピクセルは越えないようにしたい。
  • 横幅の基本は「親要素の50%」にするが、300ピクセルよりは狭くならないようにしたい。

などの場合です。
このような上限幅・下限幅を指定するために、max-widthプロパティと、mix-widthプロパティがあります。

横幅の上限を指定して、広くなりすぎるのを防ぐ例

以下のボックスは、横幅80%で表示されますが、最大値を700ピクセルに制限しています。
ブラウザのウインドウを広げてみて下さい。700ピクセルよりは広くはなりません。

← 700pxより広くはなりません →(※枠線のサイズは除きます)

上記のサンプルを作るCSSソースは以下の通りです。横幅の上限(最大値)を指定するために、max-widthプロパティを併記しています。

p {
   width: 80%; /* 横幅 */
   max-width: 700px; /* 横幅の最大値 */
   border: 1px solid #cc0000; /* 枠線 */
   background-color: #ffcccc; /* 背景色 */
}

「width: 80%」を指定しているので、このボックスの横幅は「親要素の横幅」の80%になります。が、同時に「max-width: 700px」を指定しているため、横幅の最大値は700ピクセルになり、それ以上は広がりません。

横幅の下限を指定して、狭くなりすぎるのを防ぐ例

以下のボックスは、横幅50%で表示されますが、最小値を250ピクセルに制限しています。
ブラウザのウインドウを狭めてみて下さい。250ピクセルより狭くはなりません。

← 250pxより狭くはなりません →(※枠線のサイズは除きます)

上記のサンプルを作るCSSソースは以下の通りです。横幅の下限(最小値)を指定するために、min-widthプロパティを併記しています。

p {
   width: 50%; /* 横幅 */
   min-width: 250px; /* 横幅の最小値 */
   border: 1px solid #0000cc; /* 枠線 */
   background-color: #ccccff; /* 背景色 */
}

「width: 50%」を指定しているので、このボックスの横幅は「親要素の横幅」の50%になります。が、同時に「min-width: 250px」を指定しているため、横幅の最小値は250ピクセルになり、それ以上は狭くなりません。

横幅の上限と下限を同時に指定して、表示可能なサイズの範囲を制限することも可能

上限を指定するmax-widthプロパティと、下限を指定するmin-widthプロパティは、同時に記述することも可能です。
例えば以下のように記述しておけば、基本は横幅を描画領域全体に広げる(=width:100%;)ものの、最小幅が400pxを下回らないようにし、最大幅が800pxを上回らないようにできます。

p {
   width: 100%; /* 横幅 */
   max-width: 800px; /* 横幅の最大値 */
   min-width: 400px; /* 横幅の最小値 */
}

ちなみに、横幅ではなく高さの上限を指定するmax-heightプロパティ、下限を指定する、min-heightプロパティもあります。

《2016/03/16 10:07 改訂》
《2014年6月17日 10:21 初版公開》

スタイルシートTipsの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+

関連書籍・関連ソフトなど

--- 当サイト内を検索 ---