視覚的な面だけでWebページのレイアウトを考えた場合、レイアウトの形や構成する要素は一定数のパターンに分類できる。実際、スタイルシートを使ったデザインやレイアウトの作業は、その構成要素を視覚的に伝達するための配置作業と言ってしまってもよい。Web制作の現場においては、ラフデザインをもとにしてHTMLとCSSの双方を同時に進めるやり方、ラフデザインをもとにしながらも先にHTMLの情報構造をつくったうえでCSSでのデザインやレイアウトを行うやり方など、制作会社や個人によって制作ワークフローは異なる。たとえば、従来のテーブルレイアウト的な手法でHTMLとCSSを同時につくりあげる場合、できあがったWebページのHTML文書だけを見てしまうと、情報の重要度や構造が伝わりにくい、情報へのアクセシビリティが悪い、不要なdiv要素が増えてしまっていた、といった問題が起こりやすい。Web ページに含まれるサイトIDやナビゲーション、コンテンツやフッターといった構成要素は、視覚的な配置が同じでも、必ずしもすべてのサイトで同じ文書構造上の順番になるとは限らない。
多くの利用者が視覚的なブラウザを使って閲覧しているとはいえ、そうでない環境や検索エンジンに対しての意味の伝わりやすさなども考慮しなければならない。スタイルシートがない状態で情報にアクセスしやすく、内容が的確に伝わることが重要だ。スタイルシートをマスターすれば、要素の配置はある程度自由にコントロールできるため、適材適所でプロパティをうまく選ぶことが大事になる。2カラムや3カラムなどの典型的なWeb ページのレイアウ トであったとしても、情報を文書構造の面と視覚的な見せ方の面の両方からうまく伝えられる実装を考えたいものだ。
