ホームページ作成/レイアウトの作成・調整 (HTML,CSS)

ボックス横幅の最大値・最小値を指定する

可変幅のボックスを作る際、範囲を制限したいことがあります。「80%の横幅で表示するが、200pxより小さくはしたくなく、800pxより大きくはしたくない」というような場合です。スタイルシートで簡単に指定できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

リキッドレイアウト(サイズが可変なレイアウト)を作る際、デザインが崩れないよう「最大幅」や「最小幅」を指定したいことがあります。
例えば、「原則として80%の横幅で表示したいが、200ピクセルより小さくはしたくなく、800ピクセルよりは大きくしたくない」というような場合です。 (=200~800ピクセルの範囲内だけで横幅を可変にする)

これらの指定は、すべてスタイルシートを使うことで簡単に実現できます。横幅はもちろん、横幅の最大値・最小値も指定可能です。
以下にサンプルページを用意しましたので、試しに表示させてみて下さい。 ウインドウ幅を変化させるとボックスの幅も連動して変化しますが、ボックスの幅は最小値より小さくなることはなく、最大値より大きくなることもありません。
※IE6.0以下では最大値・最小値の指定は無効です。(後述)

横幅の最大値と最小値を指定したボックスのサンプルページ

今回は、上記のサンプルにあるような、横幅の最大値と最小値を指定する方法をご紹介いたします。

ボックスの横幅の指定方法

ボックスの横幅は、スタイルシートの「width」プロパティを使って指定できます。 例えば下記のように、値に「80%」を指定すれば親要素の80%のサイズで表示できます。

width: 80%;

これに、最大値と最小値を加えるには、以下のように記述します。

max-width: 810px;
min-width: 240px;

上記のように記述すると、最大幅が810ピクセルになり、最小幅が240ピクセルになります。 このボックスは、240ピクセルより小さくはならず、810ピクセルよりも大きくはなりません。

もし表示領域が240ピクセルを下回れば、横方向のスクロールバーが表示されます。 表示領域が810ピクセルを上回れば、残りのスペースは余白になります。

これらを全部まとめて以下のように記述すると、「原則として80%の横幅で表示するが、200ピクセルより小さくはしたくなく、800ピクセルよりは大きくしたくない」という制限付きのリキッドレイアウトが実現できます。

width: 80%;
max-width: 800px;
min-width: 200px;

注:IEは7以降から有効

この max-width と min-widthプロパティは、Firefox、Opera、Safariなどの代表的なブラウザでも利用可能です。 Internet Explorer 7 でも利用可能ですが、Internet Explorer 6 以下では利用できません。 IE6.0以下では、widthプロパティは有効ですが、max-width と min-width 各プロパティの指定は無視されてしまいます。

おわりに

今回は、範囲を制限したリキッドレイアウトなどに活用できる「最大幅」・「最小幅」の指定方法をご紹介いたしました。 なお、同様に「max-height」(最大の高さ)・「min-height」(最小の高さ)を指定する各プロパティもあります。
ぜひ活用してみて下さい。
※max-height・min-heightも、横幅の場合と同様に IE6.0以下では無効です。

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます