CSS stretchサイジングジェネレーターとは
CSSのstretchキーワード（Chrome 138+）は、fill-availableサイズ指定のための標準値であり、ベンダープレフィックス付きの-webkit-fill-availableや-moz-availableを置き換えます。width: stretchを設定すると、要素はマージンボックスサイジングを使用して利用可能なスペースを埋めるようにサイズ調整されます。つまり、要素のマージンボックスが包含ブロック内に収まります。これは、コンテンツボックスサイジングを使用するwidth: 100%とは異なり、パディング、ボーダー、マージンがある場合にオーバーフローすることがよくあります。stretchはブロック、フレックス、グリッド、絶対配置のレイアウトコンテキストで動作します。
クイックアンサー
width: stretchまたはheight: stretchを使用して、標準のfill-availableサイズ指定を実現します。width: 100%とは異なり、stretchはマージンボックスサイジングを使用するため、パディングやボーダーがオーバーフローの原因になりません。-webkit-fill-availableや-moz-availableを単一の標準化されたキーワードに置き換えます。Chrome 138+、Firefox 130+、Safari 18.2+。
Last updated: 2026-05-30
制限事項
- stretchはまだすべてのブラウザでサポートされているわけではありません。Chrome 138+、Firefox 130+、Safari 18.2+がサポートしています。古いブラウザ向けに、ベンダープレフィックス付きのフォールバック（-webkit-fill-available、-moz-available）とwidth: 100%のフォールバックを維持してください。
- stretchはブロック、フレックス、グリッド、絶対配置のdisplayを持つ要素でのみ機能します。インライン要素、テーブルセル、置換要素（明示的なサイズ指定のないimg、video、iframe）はstretchサイズ指定をサポートしません。
- フレックスおよびグリッドコンテキストでは、stretchが配置プロパティと予期せぬ相互作用を起こす可能性があります。align-self: stretchとwidth: stretchを持つフレックスアイテムは、競合するサイズ指示を生成する可能性があります。サイズ指定プロパティのstretchキーワードが配置のstretchより優先されます。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- レイアウトコンテキストを選択します。stretchの動作はブロック、フレックス、グリッド、絶対配置要素で若干異なります。
- 伸縮させたい軸（width、height、または絶対配置の場合はinset: 0による両方）を選択します。
- 選択したコンテキストにおいて、stretchがマージン、パディング、包含ブロックとどのように相互作用するかを説明するレイアウト固有の注意事項を確認します。
- 生成されたCSSをコピーし、既存のwidth: 100%パターンやベンダープレフィックス付きのfill-available宣言を置き換えます。
主な用途
- パディングやボーダーが原因で親からはみ出してしまうinputやselect要素のwidth: 100%を置き換えます。stretchはマージンボックスサイジングを使用するため、ボックス全体がコンテナ内に収まります。
- -webkit-fill-availableや-moz-availableを標準のstretchキーワードに置き換えて、クロスブラウザでのfill-availableサイズ指定を標準化します。
- 絶対配置された要素を、明示的なtop/right/bottom/left値なしで位置指定された祖先の端まで引き伸ばします。