CSSレイアウトはサイズ決定が命

サイズ決定の原則を理解し、崩れないCSSレイアウトを。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSレイアウトはサイズ決定が命

このカテゴリでは、CSSレイアウトが崩れてしまう原因を主な6つにまとめて説明していますが、この内の4つは「なんらかの理由で予定した通りのサイズにならない」ことによるもの。このことからも、CSSレイアウトの肝は「サイズの指定」にあると言えます。

CSSレイアウトの基本になるのは、外枠と、それに内包されるスペースごとの「幅」になります。これをなんとなく決めてしまうと、うまく段だ組めなかったり、左右の段の間に異様な余白が開いてしまったり、後になって微調整をしなければならなくなります。

[2段組の場合]

外枠=メインスペース+サイドバー+余白の合計

[3段組の場合]

外枠=メインスペース+サイド(A)+サイド(B)+余白の合計

これが幅を決める際の大原則になりますので、CSSでレイアウトを組む際はしっかり計算してそれぞれの幅を決めるようにしてください。

また、しっかり計算して幅を決めても、ブラウザによるCSSプロパティの解釈の違いで幅が変化してしまうこともあります。

この辺がCSSレイアウトの難しいところですが、「paddingの解釈」「画像掲載による幅の拡張」「borderによる幅の拡張」の3点をしっかり認識しておけば、レイアウトが崩れてしまっても、修正すべき点を見つけやすくなります。

  • 各スペースの幅をしっかり計算して決定する。
  • 幅が変わってしまう3つのポイントを把握する。

これができればCSSレイアウトは決して難しいものではありませんので、CSSの指定をよくチェックして、崩れのないレイアウト組みましょう!