ホームページ制作する上で結構よく聞く「崩れ」とは何でしょう？
業界用語かもしれませんが、主にコーディングの段階でよく使われる言葉です。ホームページを制作する上で恐らく一度は耳にするかもしれません。現に、デザイナー、コーダー間では結構よく使われたりします。
今回はホームページ制作における「崩れ」とはなんなのか、「崩れ」たらどうしたらいいのか、色々考えていきましょう。
崩れとは
ホームページにおける「崩れ」とは、ウェブページが制作者の意図しない見た目になってしまう現象のことを指します。そもそもホームページ制作の流れとして、ページのデザインを作ってから（デザイン工程）、そのデザインをプログラミング言語で再現しながらWebページに落とし込んでいく（コーディング工程）があります。
デザインに関しては、マウスで引っ張るだけでどこにでも図形や線が引けてしまうため、言ってしまえば何でもありなのです。
デザインに対してコーディングは、Webページ内の座標を割り出し、こちらも一応自由に線を引いたり簡単な図形を描いたりすることは可能です。
しかし、ホームページの「デザイン」は、利用者数の多い横幅1920pxで作られることが主流です。それを見たままホームページに落とし込んでしまえばどうでしょう。
実際にホームページが閲覧される環境は、もちろん横幅1920pxの画面だけではありません。小さな画面、画素数の荒い画面を使っていたり、画面は1920でもブラウザのウィンドウ幅を縮めて閲覧する人も多いです。ひいてはスマホで閲覧するときにも同じこと。PCでは読める文字や画像を、そのままスマホまで縮めていったらどうなるでしょうか。
改行が入りまくってレイアウトは滅茶苦茶、画像は小さくなってしまって見えない、横幅が画面からはみ出している…。
混沌、いわゆるぐちゃぐちゃです。極端な話ですが、このぐちゃぐちゃが「崩れ」です。
崩れの原因は上記のようなレスポンシブ対応だけではありません。
崩れの種類、原因
・ブラウザの互換性
ブラウザとは、皆さんもいずれかはよく使われているであろう、GoogleChromeやSafari（Apple製品専用）、Microsoft Edge、FireFox、先日サポート終了したInternetExplorer通称IE。他にもいろいろですが、これらのブラウザによってホームページの認識方法というか、プログラミング言語の解釈がちょっとずつ違ったりするのです。
ですので、開発段階でPCのGoogleChromeだけを見て「崩れてない！完璧！」となっても、iPhoneのSafariで開いてみれば「あれ？」となることはしばしば。
ブラウザの互換性による表示崩れは、大体原因がどこかにあるので崩れを見つけることさえできれば対応は難関と言えるほど難しくはありません。
・記述ミス
シンプルです。「間違えるなよ」と思われるかもしれませんが、ここでいう記述ミスは誤字脱字や書き間違いだけのことではありません。
HTMLとCSSの記述が微妙に嚙み合っていない、ルート指定がうまくいっていない、データをコピーしてきたことでリンク先が外れてしまう。制作ツールの不具合、または仕様上の欠陥などなど…。
現段階で崩れを起こしていない記述ミスも、今後更新時に何かしらの表示に影響を及ぼしてくる可能性があるので、極力細部までチェックできればしたほうが安全です。
崩れの解決方法
上がってきたホームページをしっかり見ましょう。パソコンでもスマホでも。もし崩れを発見したら報告してみると、案外簡単に解決したりします。
HTML、CSSの崩れの原因はプログラミング言語の中では特定が簡単な部類なので、何か見かけたら遠慮せず相談することにしましょう。崩れは制作者にとって結構不本意なものなので、こちらでももちろんチェックはしていますが見つけてもらえると結構ありがたかったりします。
「デザインと改行位置が違う」とかは崩れじゃなくて制作上の仕様なのであまり気にし過ぎないよう…。