CSSのmin()でボタン幅を可変にする｜メディアクエリなしの実例

1個のボタンをPCでは最大480px、狭い領域では親要素の幅に合わせる例です。

メディアクエリやGridを使わず、CSSのmin()で上限を決めます。

旧例のminmax(250px, 1fr)は250px未満の領域でははみ出すため撤回しました。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

動くサンプル

PCの1280px幅とスマホ相当の390px幅で、Tabで選択すると3pxの青いフォーカス枠が表示されることを確認しました。

以下はスマホ幅での実画面です。

HTMLとCSSの貼付先

HTMLは記事のカスタムHTMLブロック、CSSは追加CSS欄に貼り付けます。

リンク先は自分のページへ変更してください。

この専用クラスを付けたリンクだけに適用されます。

<a class="waza-fluid-button" href="https://motoki-design.co.jp/wordpress/">WAZAのトップページへ</a>

.waza-fluid-button {
  display: block;
  box-sizing: border-box;
  width: min(100%, 480px);
  margin: 3em auto;
  padding: 0.9em 1em;
  border: 1px solid #333;
  border-radius: 5px;
  background: #fff;
  color: #333;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.waza-fluid-button:hover { background: #333; color: #fff; }
.waza-fluid-button:focus-visible { outline: 3px solid #075b9e; outline-offset: 3px; }

幅の決まり方

width: min(100%, 480px)は親要素の幅と480pxの小さい方を選びます。

box-sizing: border-boxにより、内側の余白（padding）と枠線を指定幅に含めます。

外側の余白（margin）は含まれません。

複数ボタンの列数を変える例ではありません。

長い文字は折り返します。

確認と戻し方

PC幅とスマホ幅で横にはみ出さないこと、Tabで枠が表示されEnterでリンク先へ移動できることを確認します。

見た目の変更を解除する場合は、追加したCSSとwaza-fluid-buttonクラスを取り除きます。

a要素とhrefを残すと通常のリンクになるため、リンク自体も不要なら追加したHTMLを削除してください。

min()の仕様も参照してください。

外部GitHubに保存された旧例は同期していません。

よくある質問：CSSのmin()でボタン幅を可変にするとき

この方法では、ボタンの幅がどうなりますか？

記事では、1個のボタンをPCでは最大480px、狭い領域では親要素の幅に合わせる例です。

メディアクエリやGridを使わず、CSSのmin()で上限を決めます。

「width: min(100%, 480px)」は、どういう意味ですか？

記事では、親要素の幅と480pxの小さい方を選びます。

box-sizing: border-boxにより、内側の余白（padding）と枠線を指定幅に含めます。

外側の余白（margin）は含まれません。

以前の「minmax(250px, 1fr)」の例は、どうなりましたか？

記事では、旧例のminmax(250px, 1fr)は250px未満の領域ではみ出すため撤回したとしています。

HTMLとCSSは、どこに貼りますか？

記事では、HTMLは記事のカスタムHTMLブロック、CSSは追加CSS欄に貼り付けます。

リンク先は自分のページへ変更します。

他のリンクにも、幅の指定は効きますか？

効きません。

記事では、この専用クラスを付けたリンクだけに適用されます。

複数のボタンを並べるときにも使えますか？

複数ボタンの列数を変える例ではありません。

記事では、この例は1個のボタンの幅を決めるもので、長い文字は折り返します。

公開前に、何を確認しますか？

記事では、PC幅とスマホ幅で横にはみ出さないこと、Tabで枠が表示されEnterでリンク先へ移動できることを確認します。

PCの1280px幅とスマホ相当の390px幅で、Tabで選択すると3pxの青いフォーカス枠が表示されることを確認しています。

元に戻すには、どうしますか？

記事では、追加したCSSとクラスを取り除きます。

a要素とhrefを残すと通常のリンクになるため、リンク自体も不要なら追加したHTMLを削除します。