Point：Studioのレスポンシブデザイン
Studioでは、1つのページデザインを基準に、各種画面幅（ブレイクポイント）ごとにスタイルを調整してレスポンシブデザインを実現します。
ボックスやテキストのレイアウト・外観・ポジションなどはブレイクポイントごとに変更できますが、画像やテキスト自体の内容、グルーピング構造は共通です。
レスポンシブデザイン全体の考え方や関連機能については、次の記事も参考にしてください。
レスポンシブ時に要素が崩れる主な原因
レスポンシブ対応で要素が見切れたり、はみ出たり、不要な余白が生じる場合、多くは親ボックスの縦幅・横幅が固定値（px）になっていることが原因です。
Studioでは、ボックスのサイズ（横幅と縦幅）をドラッグして変更すると、自動的に固定値であるpxが設定されます。
固定値（px）は画面サイズにかかわらずボックスの大きさを固定するため、画面幅の変化やテキストの改行に追従しづらく、レイアウト崩れを引き起こしやすくなります。
Tips: サイズ単位を使い分ける
レスポンシブ対応を安定させるには、要素ごとに適したサイズ単位を選ぶことが重要です。
ロゴなど常に同じ大きさで表示したい要素にはpx、カラム分割など比率をそろえたいレイアウトには%、コンテンツ量に応じて高さを変えたい親ボックスにはautoの使用を推奨します。
各サイズ単位の特徴や使いどころは、ボックスのレイアウト：サイズ（幅・高さ）を設定するも参考にしてください。
親ボックスの縦幅をautoに変更する
親ボックスの縦幅には、固定値（px）ではなくautoの設定を推奨します。
autoに設定されたボックスは、内包される子ボックスのコンテンツ量に合わせて縦幅（場合によっては横幅）を自動調整し、さまざまな画面サイズに対応しやすくなります。
親ボックスの縦幅を[auto]に変更する手順
よくあるケース：要素がはみ出す
親ボックスに設定された幅・高さより、内包されるボックスの幅・高さが大きくなると、内包ボックスがはみ出します。
特に長いテキストや画像を含む場合、編集画面では収まっているように見えても、画面幅が狭くなるとテキストの改行や画像の比率により要素がはみ出すことがあります。
はみ出しを防ぐための確認ポイント
よくあるケース：スクロール時に引っかかる
親ボックスの幅よりも内包要素の幅が大きく、かつはみ出し設定が「表示」や「スクロール」になっている場合、レスポンシブ時に横方向のスクロールや画面移動が引っかかるように感じることがあります。
画面幅が狭くなるとテキストの改行や要素の折り返しが変化するため、事前に十分な余裕を持たせたサイズ設定が重要です。
スクロール時の引っかかりを軽減するポイント
右パネルで[ボックス]タブを選択します。パネルが閉じている場合は、右パネルを開いてください。
[レイアウト]で[幅]・[高さ]がpx設定になっていないか確認します。
[高さ]がpx指定の場合はautoに変更し、必要に応じて横幅もpx以外の単位（%やautoなど）を検討します。
同じく[ボックス]タブ内の[ポジション]メニューで[はみ出し設定]（表示／非表示／スクロール）を確認し、意図しないはみ出しがある場合は[非表示]も含めて設定を検討します。
横方向のスクロールが必要なデザインの場合は、スクロールさせたい要素を内包するボックスに対してのみ[スクロール]を設定します。
すでに公開中のサイトを修正している場合には、サイトを更新して公開サイトに変更を反映します。
Tips: 横スクロールはスクロールバーが表示されません
横スクロールを設定しても、ブラウザのスクロールバーは表示されません。
ユーザーはトラックパッドの横スクロールや、マウスホイールのジェスチャー、スワイプ操作などで横方向にスクロールします。
高さ hegiht 高さ指定 auto レスポンシブ 崩れる