【CSS】要素の幅の指定方法 – 便利な関数 – min() / max()の使い方

2024年2月22日

こんにちは！IWACODEの岩村彰斗です。

今回はCSSで要素の幅の指定で便利な関数である、min関数とmax関数の紹介をさせていただきます！

筆者

レスポンシブ対応で複数行記載していたのが、1行の記載で済むようになるので、ぜひ覚えていってください！

IE（Internet Explorer：インターネットエクスプローラー）に非対応だったのですが、IEが2022年6月にサポートが終了したため、現在では今回ご紹介する関数がよく使用されるようになっております。

min()の記載方法

()の中に値をカンマ区切りで２つ記載します。

width: min(値 , 値);

２つ入れた値のうち、どちらか小さい方が優先されて出力されます。

以下がサンプルコードになります。

  <div class="box1">
    <strong>min関数を使用した場合</strong><br>
    -<br>
    width: min(600px, 100%);
  </div>
  <div class="box2">
    <strong>max-widthを使用した場合</strong><br>
    -<br>
    max-width: 600px;<br>
    width: 100%;
  </div>

  <style>
    .box1 {
      background-color: #ffda96;
      width: min(600px, 100%);
    }

    .box2 {
      background-color: #96bcff;
      width: 100%;
      max-width: 600px;
    }

    div {
      margin-bottom: 50px;
      padding: 50px 0;
      line-height: 2;
    }

    body {
      box-sizing: border-box;
      padding: 32px;
      text-align: center;
    }
  </style>

600pxより小さいときは、100%の値が優先されて、パソコンなど画面が大きい場合は600pxが優先されていますね！

筆者

max-widthプロパティを使用しても同様の動作となりますが、min関数を使用すると1行で済むので、コードが短くなり視認性の向上に繋がりますね。

max()の記載方法

()の中に値をカンマ区切りで２つ記載します。

width: max(値 , 値);

２つ入れた値のうち、どちらか大きい方が優先されて出力されます。

以下がサンプルコードになります。

  <div class="box1">
    <strong>max関数を使用した場合</strong><br>
    -<br>
    width: max(600px, 100%);
  </div>
  <div class="box2">
    <strong>min-widthを使用した場合</strong><br>
    -<br>
    max-width: 600px;<br>
    width: 50%;
  </div>

  <style>
    .box1 {
      background-color: #ffda96;
      width: max(600px, 100%);
    }

    .box2 {
      background-color: #96bcff;
      width: 100%;
      min-width: 600px;
    }

    div {
      margin-bottom: 50px;
      padding: 50px 0;
      line-height: 2;
    }

    body {
      box-sizing: border-box;
      padding: 32px;
      text-align: center;
    }
  </style>