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

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

横幅の範囲を制限(上限・下限を指定)して、広すぎたり狭すぎたりするのを防ぐ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プロパティもあります。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

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

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

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