Studioのレスポンシブ設定で崩れにくくする4つの設計——構造・最大幅・サイズ単位・方向

Studioでサイトを作っていて、「どの画面でも絶対に崩れない設定があれば」と考えたことはないでしょうか。ただ、画面の幅も端末も、載せる文章の量も人それぞれ違うため、「絶対に崩れない」とまでは言い切れません。

一方で、崩れの多くは、レイアウトを組む段階での設計によって避けられます。この記事では、Studioの公式ブログ「崩れにくいレスポンシブを設定するコツ」で案内されている考え方を、4つに絞って整理します。

① すべてのブレイクポイントで、ボックスの構造をそろえる

公式ブログによると、ボックスの構造（入れ子の関係）は、ブレイクポイントごとに変えることができません。PC・タブレット・スマホの全部で同じ構造を共有し、見た目の違いは、サイズや並べ方の設定の差分で表現する、という前提で組む必要があります。

PCとスマホで表示する内容そのものを変えたい場合は、それぞれ別のボックスを用意しておくのが基本です。ブレイクポイントごとにボックスの表示・非表示を切り替える設定も、公式ヘルプで案内されています。

② コンテンツの最大幅を決めておく

大きな画面でコンテンツが意図せず横に広がりすぎるのを防ぐには、「最大幅（max-width）」を設定します。最大幅を指定したボックスは、ブラウザの幅が指定した値より狭くなると、幅いっぱい（100%）で表示されます。

公式ブログでは、横幅100%のセクションボックスの中に、最大幅を指定したボックスを置く組み方が例として挙げられています。外側で画面いっぱいに背景を敷きつつ、中身は読みやすい幅に収める、という使い方です。

③ サイズの単位を、役割ごとに使い分ける

レスポンシブで崩れる原因として最も多いのが、幅や高さの単位の選び方です。Studioのレイアウト設定では、幅と高さのそれぞれに単位を選べます。

公式ブログが案内している、単位ごとの性格は次のとおりです。

• %（パーセント）：親ボックスやページの大きさを基準にするので、画面の拡大・縮小に合わせて伸び縮みする
• auto：中に入れた要素の大きさに合わせて自動で調整される。とくに縦幅（高さ）はautoにしておくのが基本
• flex：並んだ複数の要素を、親ボックスの中に収めるために、伸ばす・縮める割合を指定する
• px：固定値。横幅は画面が狭いと自動で縮むが、縦幅は縮まない

崩れやすい組み合わせも具体的に挙げられています。縦幅にpxを指定すると、画面が狭くなったときに中身がはみ出しやすくなります。また、同じ階層にpx指定のボックスとauto指定のボックスが混ざっていると、狭い画面ではみ出す可能性があります。逆に、画像をpx指定・その隣の文字を「1flex」にする組み合わせなら、文字が自動で折り返されるので崩れにくい、と案内されています。

横幅を%で指定しておくと、ブレイクポイントごとに設定を上書きしていくよりも効率的に調整できる、というのも公式ブログのポイントです。

④ 左右の入れ替えは「階層」ではなく「方向」で行う

画像と文章の左右を入れ替えたい、といった場合は、ボックスの階層構造を組み替えるのではなく、ボックスの「方向」の設定を変えるのが公式ブログの案内です。階層を直接いじると、ブレイクポイントごとの管理が複雑になってしまうためです。①で触れたとおり、構造はブレイクポイントごとに変えられないので、方向で表現するのは理にかなっています。

横並びをスマホで縦に落とすには

公式ヘルプでは、横並びのボックスをスマホで縦並びにする方法として、親ボックスの「折り返し」を有効にする方法が案内されています。たとえば、親ボックスの横幅を100%、子ボックスの横幅を50%にして親の折り返しを有効にしておき、スマートフォン幅では子ボックスの横幅を100%にすると、折り返されて縦に並びます。

それでも崩れるときは

設計を整えても、編集画面と公開後で見え方が違ったり、途中の幅だけ崩れたりすることはあります。切り替わりの境目を含めた確認幅の考え方はStudioのブレークポイント入門——PC・タブレット・スマホで崩れにくいサイトの考え方に、「PCより少し狭い画面」だけ崩れるケースはStudioで公開したサイトが「PCより少し狭い画面」だけ崩れるときに疑うことにまとめています。

まとめ

「絶対に崩れない」設定を探すよりも、構造をそろえる・最大幅を決める・単位を役割で使い分ける・左右は方向で切り替える、という4つの設計を積み重ねるほうが、実際の崩れは確実に減らせます。縦幅はauto、横幅は%や最大幅から考える、というところから始めてみてください。