CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

サイト構築 -CSS

Post on:2024年11月21日

はじめに

divやpなど、HTMLのブロック要素はデフォルトで利用可能な幅いっぱいを占めるように伸びます。水平方向にmarginを与えると、水平方向のスクロールバーは発生しません。これは非常に便利なデフォルトの挙動です。

しかし、他の多くの要素はデフォルトで全幅ではありません。幅いっぱいにするには、CSSのwidth: 100%;を使用します。新しい代替案を見る前に、width: 100%;が便利な例をいくつか見てましょう。

width: 100%;が便利な例

画像のデフォルトのサイズは、埋め込まれた画像本来のサイズによって定義されます。オーバーフローを防ぐには、大きな画像にはwidth: 100%;にする必要があります。

buttonやselectなどのインライン要素を全幅にしたい場合は、width: 100%;を設定する必要があります。

width: 100%;に設定されている要素に左または右にmarginを与えると、オーバーフローが発生し、水平スクロールバーが発生します。

この水平スクロールバーは、calc()を使用してmarginの値を全幅から引くことで解決できます。たとえば、左右のmarginが24pxの場合、下記のようにするとうまくいきます。

button {
    width: calc(100% - 48px);
    margin-inline: 24px;
}

button {

width: calc(100% - 48px);

margin-inline: 24px;

}

ただし、デザインが変更され、marginの値も変更することになった場合は、calc()の計算も変更する必要があります。現在ではこれを完全に回避できる簡単な方法があります。それがstretchキーワードです。

width: stretch;の使い方

width: stretch;を使用すると、前述のCSSは下記のようになります。

button {
    width: stretch;
    margin-inline: 24px;
}

button {

width: stretch;

margin-inline: 24px;

}

width: stretch;を設定すると、他の要素がdivやpなどの要素と同様に自動動作を採用できます。つまり、利用可能な幅を占めるように伸縮すると同時に、問題なくマージンを使用できます。

実際の動作は、デモページをご覧ください。
width: 100%;だけだとオーバーフローし、width: calc(100%-48px);は期待通りに動作します。そして、width: stretch;も期待通りに動作します。width: auto;は全幅にはなりません。

See the Pen
width: stretch; by coliss (@coliss)
on CodePen.

stretchのサポートブラウザ

stretchキーワードは、すべてのブラウザで動作します。というか、かなり前からサポートされています。ただし、ベンダープレフィックスが必要です。

width: -webkit-fill-available;
width: -moz-available;
width: stretch;

width: -webkit-fill-available;

width: -moz-available;

width: stretch;

stretchキーワードのサポートブラウザは、下記の通りです。

stretchのブラウザサポート

stretchキーワードは最終的に標準化され、近いうちにベンダープレフィックスなしで使用できるようになるでしょう。
参考: Intent to prototype: CSS 'stretch' sizing keyword

今のところ、すべてのブラウザでサポートされているのはwidthだけです。min-widthやmax-widthに対して-moz-availableや-webkit-fill-availableを使用することは、FirefoxやSafariではサポートされていません。また、Firefoxでは-moz-availableはheightで機能しません。Chromeはflex-basisの値として-webkit-fill-availableをサポートしていません。