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

Post on:2024年11月21日

sponsorsr

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。

そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。

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

The stretch keyword: a better alternative to width: 100% in CSS?
by Ollie Williams

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに
width: 100%;が便利な例
width: stretch;の使い方
stretchのサポートブラウザ
width: auto;についての補足

はじめに

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をサポートしていません。