レスポンシブ時に要素が見切れたり、はみ出たり、不要な余白ができる場合の対処法

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

ボックスを内包する親ボックスの縦幅は、固定値pxではなく、できる限り「auto」の設定を推奨しています。ここではその理由と具体的な例をご紹介します。

「auto」は子ボックスを持つ親ボックスに設定できる単位です。「auto」が設定されているボックスは、その中に存在するボックスと同じ縦幅 / 横幅になります。

例えば、縦幅200px、横幅200pxの画像ボックスを内包する親ボックスの縦幅と横幅を「auto」に設定すると、親ボックスは画像ボックスに応じて自動的に縦幅・横幅が決まります。中身のサイズによって可変するため、さまざまな画面サイズに対応でき、レスポンシブなレイアウトを作成するのに役立ちます。

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

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

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

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

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

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

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

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

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

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