Studioで公開したサイトが「PCより少し狭い画面」だけ崩れるときに疑うこと

パソコンの大きな画面では綺麗に見えるのに、ノートパソコンや、タブレットを横向きにしたときの画面幅だけ崩れる——Studioで作ったサイトを公開したあと、こうした症状に気づくことがあります。

スマートフォンでもタブレットでもない、「パソコンよりちょっと狭い」帯域は見落とされやすい割に、実際に該当する端末は意外と多く存在します。この記事では、この症状が起きる仕組みと、公開前に確認しておきたいポイントを整理します。

Studioの公開ページは「区切りの中では同じ見た目」になる

Studioで作ったサイトは、パソコン向け・タブレット向け・スマートフォン向けという画面幅の区切り（ブレークポイント）ごとに見た目を設定する仕組みになっています。公開されたページでは、それぞれの区切りの中はどの実際の画面幅で開いても同じ見た目に固定されます。

公開されている仕様では、区切りの初期設定はスマートフォンが〜540px、タブレットが541px〜840px、それより広ければパソコン向けの設定が使われる、という3段階です（ブレークポイント自体をカスタマイズしている場合はこの限りではありません）。つまり「パソコン向け」の設定は、841px以上のすべての画面幅——841pxのノートパソコンも、2560pxの大きなモニターも——に同じ見た目で適用されます。

「パソコン向け」で作ったときの幅の指定が、そのまま効いてしまう

パソコン向けのデザインを作るとき、多くの人は横幅1280px前後の画面で作業します。カードを横に並べたり、余白を決めたりする際の数値も、その作業幅を基準に決まります。

この設定は841px以上のすべての画面幅に適用されるため、作業していた1280px前後ではちょうどよく見えていたカードの並びが、841px〜1000px程度の少し狭い画面では、同じ幅のまま並びきらずに折り返してしまったり、窮屈に見えたりすることがあります。パソコン向けの設定を「1280pxちょうどの専用設定」だと思わず、「841px以上すべてに効く設定」だと捉えておくと、この症状を予防しやすくなります。

公開前に確認しておきたい幅

この帯域の崩れは、次の順番で確認すると見つけやすくなります。

• パソコン向けの設定を作った、その作業幅（多くは1280px前後）で見え方を確認する
• そこから少しずつ狭め、900px程度・841px付近まで下げてみる
• 横に並んでいる要素が、途中で窮屈になったりはみ出したりしていないか見る
• 問題があれば、横並びの中身の幅を固定値ではなく画面いっぱいや割合の指定に変える

まとめ

「パソコンでは平気だが、少し狭い画面だけ崩れる」症状は、Studioの区切りの仕組みを知っていれば原因を絞り込みやすい症状です。作業していた画面幅だけでなく、その少し内側の幅まで一度確認してから公開する習慣をつけておくと安心です。生成AIが書いたコード側で同じような症状が起きる原因はAIが生成したサイトが「画面を少し狭くすると崩れる」典型パターンと直し方で扱っているので、あわせてご覧ください。