CSSのmin-widthとmax-widthで可変幅に下限と上限を設ける

百分率で幅を指定した要素が狭くなりすぎる場合はmin-width、広がりすぎる場合はmax-widthで制限します。widthを可変幅にしたまま、読みやすさや部品の寸法に必要な下限と上限を設ける方法です。

ただし、min-widthは親要素に収める指定ではありません。親要素より大きな最小幅を指定すれば、子要素は親要素からはみ出します。最初にwidthで求まる幅を計算し、下限と上限のどちらに触れるかを確認します。

min-widthとmax-widthはwidthで求めた幅を挟む

次の指定では、内容領域を親要素の80％にしながら、320pxより狭く、960pxより広くならないようにします。

.content {
  width: 80%;
  min-width: 320px;
  max-width: 960px;
  margin: 0 auto;
}

widthの百分率は、包含ブロックの幅を基準に計算します。通常のブロック要素について、paddingとborderを除いた内容幅だけを簡略化して比べると、次のようになります。

最初の行では、計算結果がmax-widthを超えるため960pxになります。二行目は範囲内なので640pxのままです。三行目はmin-widthより小さいため320pxになります。

この順序は、min-widthとmax-widthの計算規則で定められています。まず両方の制限を使わずに幅を求めます。その幅が上限を超えればmax-widthで計算し直し、下限を下回ればmin-widthで計算し直します。

min-widthは狭い親要素からはみ出すことがある

親要素の内容幅が300pxでも、min-width: 320pxは320pxを維持します。上の例では、子要素の内容領域だけで親要素より20px広くなります。左右のpaddingとborderがあれば、その分も外側へ加わります。

下限を決める前に、サイトを表示する最も狭い幅で、その下限が本当に必要かを確かめます。文字やボタンを収めるために下限が必要なら、横にはみ出すことを放置せず、内側の余白、文字量、列数も一緒に見直します。

一方、本文の一行が広がりすぎる場合は、max-widthで上限を設け、左右のmarginをautoにして中央へ置けます。親要素が上限より狭く、百分率で求めた幅が下限以上なら、その百分率の幅が使われます。

widthが効かないインライン要素では表示形式を確認する

CSS 2.1では、width、min-width、max-widthは、置換されないインライン要素へ適用されません。たとえば、通常のspanへ下限と上限を指定しても、その指定だけでは意図した幅になりません。

幅を持つ部品として扱うなら、要素の意味と周囲の配置を確認したうえで、display: blockまたはdisplay: inline-blockを選びます。表示形式を変えると改行や行ボックスとの関係も変わるため、幅だけで判断しません。

プロパティのmin-widthとメディアクエリーの条件を分ける

次の二つは、同じmin-widthという名前でも役割が違います。

.content {
  min-width: 320px;
}

@media (min-width: 768px) {
  .content {
    width: 80%;
  }
}

一つ目は、.contentという要素の使用幅に下限を設けます。二つ目は、表示領域の幅が768px以上の場合に、中のCSS規則を適用する条件です。Media Queriesのwidthメディア特性は連続媒体の表示領域を参照します。要素の幅を制限するプロパティではありません。

要素を何pxより狭くしないかを決めるならプロパティを使い、表示領域に応じて配置や寸法の指定そのものを変えるならメディアクエリーを使います。

下限が上限を超える指定ではmin-widthが優先される

min-widthをmax-widthより大きく指定すると、二つの条件を同時には満たせません。この場合はmin-widthが優先されます。

.content {
  min-width: 700px;
  max-width: 600px;
}

この指定では、使用幅の下限は700pxです。矛盾した値をブラウザー任せにせず、下限が上限以下になっているかを確認します。

まず、幅を調整したい要素を一つ選んでください。親要素の内容幅、widthで求まる幅、min-width、max-widthを同じ単位へ直して並べます。その後でpaddingとborderを足し、実際のブラウザー幅を狭めたり広げたりして、下限と上限が切り替わる位置を確認します。