ボックスを内包する親ボックスの縦幅は、固定値「px」ではなく、「auto」の設定を推奨しています。

「auto」は子ボックスを持つ親ボックスに設定できる単位です。「auto」に設定したボックスは、その中に存在するボックスと同じ縦幅 / 横幅になります。内包する子ボックスのサイズに合わせて可変するため、さまざまな画面サイズに対応でき、レスポンシブなレイアウトを作成するのに役立ちます。

Studioでは、ボックスのサイズ（横幅と縦幅）をドラッグして変更すると、自動的に固定値であるpxが設定されます。この方法は手間がかからず便利ですが、どんな画面サイズでもボックスのサイズが固定されてしまうため、レスポンシブレイアウトに問題を引き起こすことがあります。

その他のサイズ単位について詳しくは、サイズ単位をご覧ください。

親ボックスに設定された縦幅・横幅よりも、内包されるボックスの縦幅・横幅が大きくなると、ない方ボックスがはみ出てしまいます。

これは特に、内包ボックスに長いテキストがある場合に注意が必要です。

エディタでは問題なく見えるかもしれませんが、レスポンシブ時など画面幅が狭まるとテキストの改行により要素がはみ出してしまうことがあります。

はみ出たテキストや画像が別のセクションに被り、レスポンシブ時にテキストや画像が他の要素と重なる原因になります。

親ボックスの幅よりもその中の要素の幅が大きく、はみ出し設定 が「非表示」以外の場合、スクロール時に引っかかる現象が起きます。

エディタ上は問題なくとも、レスポンシブ時に画面幅が狭くなるとテキストの改行などにより状況が変わる可能性があるため、「auto」に設定しておくことを推奨します。

px値で明示的に幅を指定する必要がある場合は、各ボックスのはみ出し設定を検討してください。

この記事で解決しない疑問やがある場合は、エディタ右下の「？」からチャットサポートへお問い合わせください。

高さ hegiht 高さ指定 auto レスポンシブ 崩れる