HPのレイアウトが崩れる理由

初心者の方が製作ソフトを使って作っているページでは、レイアウト崩れが起こりにくい。しかし少し分かってきた人が手打ちで修正をかけていくと崩れてくる。
その理由は・・

「各ブラウザに対応したレイアウト設定」
この項目に欠ける場合が大半だと思われます。その中でも多くの方が苦しんでいる内容に、「IEのバグ」があるのではないでしょうか。
またWindows系とMac系で崩れる話も多いですね。これは標準解像度の違いからくるものだと思われます。Winは96dpi、Macは72dpiと言われますが、画像表示ではなくフォント(文字)表示に問題があるようです。改行位置が変わったりする事で、意図したレイアウトになりにくい場合があります。

「IEのバグ」で多い悩みの一つに、余白の解釈の違いがあります。HPレイアウトを考える際に、「margin(外側余白)」と「padding(内側余白)」を使います。
その他「border(線)」を入れた表組み等でも解釈が違います。ここらでレイアウト崩れが起こってしまいます。
レイアウトを考えただけの「table(表組みタグ)」は推奨されていませんので、余白の使い方は頭を悩ます部分ですね。

様々な部分を考慮して作り込む事を「HTMLコーディング」と呼んでいます。ラフデザインされたものをコーディングしていく過程で悩ます所が、これらのレイアウト崩れ対策とCSSやJava scriptでのブラウザ単位での指令です。
その他レイアウトで悩ますタグに「float」や「display」もありますが、回り込みの知識や要素レベルの関連性があり、ここで詳しく解説すると長文になるので省きます。

しかし上記のようなタグをはじめ、CSS装飾を使いこなせるようになると、一昔前に流行った表組みレイアウトではなく、CSS(スタイルシート)で思い通りのレイアウトを操れるようになるでしょう。
また推奨されたタグを使い、W3C勧告に沿った文法でコーディングする事は、少なからずロボットにも好まれやすくなります。
「W3C勧告 = SEO対策」という方程式はありませんが、全く考えないよりは内部SEO対策の一環であると言えます。

Sponsered Link