「崩れない」は設計でつくる｜堅牢なHTML/CSS設計の裏側

はじめに

パソコンではきれいに見えるのに、スマートフォンで開くと文字がはみ出していたり、画像が枠からはみ出して横スクロールが発生したり。こうした「表示崩れ」は、Webサイトを持つ多くの方が一度は経験する悩みです。

そして、ここがいちばん大切なところなのですが、こうした崩れは「偶然」や「運」で起きているのではなく、作り手の設計の差で起きています。きちんと土台を組んで作られたサイトは、画面の大きさが変わっても崩れません。逆に、その場しのぎで作られたサイトは、ある画面幅を境にあっさり破綻します。

この記事では、レスポンシブ対応で崩れない、堅牢なHTML/CSS設計の裏側を、専門知識がない方にもわかるように5つの「土台」に分けて解説します。読み終わるころには、崩れないサイトがどう作られているのか、そして安心して任せられる制作者をどう見極めればよいのかが見えてくるはずです。

そもそも、なぜレスポンシブは「崩れる」のか

レスポンシブデザインとは、パソコン・タブレット・スマートフォンといった画面の大きさに合わせて、レイアウトが自動で変わる仕組みのことです。便利な反面、画面サイズという「変わり続ける条件」に対応し続ける必要があるため、設計が甘いと崩れやすくなります。

崩れは「偶然」ではなく「設計の歪み」

結論からお伝えすると、表示崩れの正体は、特定の画面幅で設計上の前提が破綻している状態です。理由はシンプルで、Webサイトは無数の画面幅で見られるのに、作り手が一部の画面幅しか想定していないと、想定外の幅で必ずどこかに無理が生じるからです。

たとえば、ある制作の現場では「メディアクエリのmax-widthとmin-widthの指定が重なっていて、ブラウザの幅をある地点まで変えると急におかしくなる」という崩れがよく起こります。これは家にたとえるなら、設計図で部屋と部屋の境目をあいまいにしたまま建ててしまい、その境目だけ床が二重になったり隙間ができたりするようなものです。崩れているのは画面ではなく、設計図そのものなのです。

固定値で組むと、画面が変わった瞬間に破綻する

崩れるサイトに共通するのが、すべてをカチッとした固定の数値で組んでしまっていることです。「この箱は幅500ピクセル」と決め打ちで作ると、画面幅が500ピクセルより狭いスマートフォンでは、その箱が画面からはみ出してしまいます。

これは、特定の部屋に合わせて作り付けた大きな家具を、そのまま狭い部屋へ運び込もうとするようなものです。部屋（画面）の大きさが変われば、固定サイズの家具（要素）は入りきりません。崩れない設計の出発点は、「固定で決め打ちしない」という発想の転換にあります。ここから先で、その具体的な土台を5つ見ていきましょう。

崩れないための土台①「箱の数え方」を揃える

最初の土台は、ページを構成するすべての「箱」の幅の数え方を統一することです。地味ですが、ここがずれているとあらゆる場所で小さな崩れが積み重なっていきます。

box-sizingで幅計算を安定させる

Webページは、文章も画像もボタンも、すべて四角い「箱」が集まってできています。この箱には、中身のほかに「余白（パディング）」や「枠線（ボーダー）」がつきます。問題は、初期設定のままだと、指定した幅に余白や枠線の分が上乗せされてしまうことです。「幅100」と指定したのに、余白を足したら実際は120になっていた、ということが起こります。

これを防ぐのが、box-sizing: border-box; という一行です。これを最初に全体へ適用しておくと、余白や枠線を含めて幅を数えてくれるようになります。多くの制作者が、最初に読み込むリセットCSSへ * { box-sizing: border-box; } と書いておくのは、このためです。

定規にたとえると、ある人は「0」から、別の人は「2」から測り始めている状態が初期設定です。border-boxは全員の定規の起点を「0」に揃える作業にあたります。起点を揃えるだけで、予期しないはみ出しが大きく減る、堅牢な設計の隠れた土台です。

崩れないための土台②「柔らかい単位」で組む

2つ目の土台は、サイズを「柔らかい単位」で指定することです。固定の数値ではなく、画面や親要素に応じて伸び縮みする単位を使うことで、画面幅が変わっても自然に追従します。

px・rem・%・vw・dvhの使い分け

サイズを指定する単位にはいくつか種類があり、それぞれ性格が違います。代表的なものを、役割で整理します。

注意したいのが、画面の高さを表す vh という単位です。スマートフォンのブラウザは、上下にアドレスバーなどのUIがあり、100vhはその隠れた部分まで含んだ高さになるため、指定すると画面からはみ出してしまうことがあります。そこで近年は、実際に見えている表示領域を基準にした dvh という単位が使えるようになっており、主要なブラウザはすでに対応しています。

カーテンにたとえるなら、pxは決まった幅のすだれ、相対単位は窓の大きさに合わせて伸び縮みするカーテンです。**「絶対に変えたくない部分だけpx、それ以外は柔らかい単位」**と役割分担するのが、崩れない設計の基本姿勢です。

崩れないための土台③ レイアウトはFlexboxとGridに任せる

3つ目の土台は、要素の並べ方です。ここを古いやり方で組むか、現代的な仕組みに任せるかで、堅牢さが大きく変わります。

自分で位置を決めず、仕組みに並べてもらう

かつては、要素を横に並べるのに「float」や「位置の絶対指定」といった、いわば力ずくの方法が使われていました。しかしこれらは、画面幅が変わったときに要素が重なったり、はみ出したりしやすく、崩れの大きな原因になります。一つひとつの位置を作り手が手作業で決めているため、想定外の幅に弱いのです。

そこで現在の主流が、FlexboxとGridという2つの仕組みです。これらは「ここに要素を並べてください」と方針を伝えるだけで、画面幅に応じて自動で間隔を調整し、入りきらなければ自動で下の段に折り返してくれます。Flexboxは一列の並びを、Gridは縦横の格子状の配置を得意とします。

本棚にたとえると、floatは一冊ずつ手で位置を決めて立てかける方法、Flex/Gridは仕切り付きの棚に本を入れていく方法です。棚（仕組み）が間隔や折り返しを引き受けてくれるので、本の数や棚の幅が変わっても崩れません。位置決めを作り手の手作業から仕組みへ預けることが、堅牢なレイアウトの近道です。

崩れないための土台④ ブレイクポイントは「中身」で決める

4つ目の土台は、レイアウトを切り替える「区切りの幅」、いわゆるブレイクポイントの決め方です。ここを機種任せにすると、かえって崩れやすくなります。

機種ではなくデザインが破綻する幅で切る

ブレイクポイントとは、「この画面幅を境に、レイアウトを2列から1列へ変える」といった切り替えポイントのことです。よくある失敗が、「iPhoneの幅は何ピクセルだから、そこで切ろう」と特定の機種に合わせて決めてしまうことです。機種は次々に新しいものが出るため、追いかけ続けることはできません。

崩れない設計では、機種ではなく「デザインそのものが破綻する幅」で区切ります。たとえば、横に並べた3つの箱が、画面を狭めていったときに窮屈で読みにくくなる幅、そこが切りどころです。理由は、崩れは機種ではなく中身の都合で起きるからです。先ほど触れたように、min-widthとmax-widthの指定が重なっていると境目で崩れるので、境目は重ならないようきっちり決めます。

加えて、まず狭いスマートフォンの表示を基本として設計し、そこから広い画面へ広げていく「モバイルファースト」という進め方が推奨されています。狭いほうから広げるほうが、追加する指定が少なくコードが整理され、結果として崩れにくくなるためです。家を建てるときに、いちばん条件の厳しい区画から設計するのと同じ考え方です。

崩れないための土台⑤ 画像とはみ出しを封じる

5つ目の土台は、崩れの代表格である「画像のはみ出し」と「意図しない横スクロール」を、根本から封じることです。

横スクロールと画像はみ出しを根本から防ぐ

スマートフォンで開いたとき、画面の外まで指で横にスクロールできてしまう。これは典型的な崩れで、たいていは中のどれかの要素が画面幅より大きくはみ出していることが原因です。

画像については、max-width: 100%; という指定が基本の守りになります。これは「親の箱より大きくは表示しない」というルールで、大きな画像でも枠に収まるよう自動で縮みます。額縁より大きな絵を入れようとしても、額縁の大きさに合わせて自動で縮小してくれる、とイメージするとわかりやすいでしょう。

横スクロールが起きたときは、どの要素がはみ出しているのかを一つずつ特定して直すのが王道です。安易に「はみ出しを隠す指定」でフタをすると、本当の原因が残ったままになり、別の画面幅で再発します。さらに、画像にあらかじめ縦横のサイズ情報を持たせておくと、読み込みの途中でレイアウトがガクッとずれる現象（レイアウトシフト）も防げます。崩れは隠すのではなく、原因をふさぐ。これが堅牢な設計の姿勢です。

堅牢な設計は「依頼先選び」にも表れる

ここまで5つの土台を見てきましたが、これらはすべて、表からは見えない「裏側」の設計です。完成したサイトをパッと見ただけでは、堅牢に作られているかどうかはわかりません。だからこそ、制作を誰かに依頼する際の見極めが重要になります。

崩れにくいサイトを作る制作者の見分け方

崩れにくいサイトを作る制作者は、「崩れないために何をしているか」を自分の言葉で説明できます。単位の使い分け、ブレイクポイントの考え方、実機での確認をどうしているか。こうした問いにきちんと答えられるかどうかは、堅牢な設計ができるかの一つの目安になります。

逆に、見た目の華やかさだけを語り、設計の裏側について触れられない場合は、その場限りの作り方になっている可能性があります。家を建てるときに、内装の写真は見せられても基礎工事の話ができない業者には、少し不安が残るのと同じです。サイトは公開してからが本番で、長く使う中で機種もブラウザも変わっていきます。長く崩れずに使えるかどうかは、目に見えない土台で決まるのです。

まとめ

レスポンシブで崩れるか崩れないかは、運ではなく設計で決まります。最後に、堅牢なHTML/CSS設計を支える5つの土台を振り返ります。

この5つが組み合わさってはじめて、どの画面で見ても崩れない、堅牢なサイトが生まれます。これからサイトを作る方、リニューアルを検討している方は、ぜひ「見た目」だけでなく「土台がどう設計されているか」という視点を持ってみてください。その視点こそが、長く安心して使えるサイトと、信頼できる制作者を見極める一番の判断軸になります。