DIV+CSS Web ページレイアウトを実践するための入門ガイド

CSSレイアウトを勉強していますか？まだ純粋な CSS レイアウトを完全にマスターできていませんか?通常、学習を妨げる状況は 2 つあります。

1 つ目の可能性は、CSS によるページ処理の原理を理解していないことです。ページの全体的なパフォーマンスを考慮する前に、まずコンテンツのセマンティクスと構造を検討し、次にセマンティクスと構造用の CSS を追加する必要があります。この記事では、HTML を構造化する方法について説明します。

もう 1 つの理由は、非常によく知られたプレゼンテーション層の属性 (cellpadding、hspace、align="left" など) について戸惑いがあり、それらをどの CSS ステートメントに変換すればよいかわからないことです。 最初の問題を解決し、HTML の構造化方法を理解したら、元のプレゼンテーション属性を置き換えるためにどの CSS を使用するかを詳しく説明したリストを提供します。

構造化HTML

私たちが初めてWebページ制作を学ぶときは、絵やフォント、色、配置図などを考えて、まずデザインをどうするかを考えます。次に、Photoshop または Fireworks を使用してそれを描画し、小さな絵に切り取ります。最後に、HTML を編集して、すべてのデザインをページに復元します。

HTML ページを CSS (CSS フレンドリー) でレイアウトしたい場合は、「外観」を最初に考えるのではなく、ページのコンテンツのセマンティクスと構造を最初に考える必要があります。

外見は最も重要なことではありません。適切に構造化された HTML ページは、どのような外観でも表示できます。CSS Zen Garden はその典型的な例です。 CSS Zen Garden は、CSS の力を最終的に認識するのに役立ちます。

HTML はコンピューター画面上で読むためだけのものではありません。 Photoshop で慎重にデザインした画像は、PDA、携帯電話、スクリーン リーダーでは表示されない場合があります。ただし、適切に構造化された HTML ページは、CSS のさまざまな定義を使用して、どこにでも、どのネットワーク デバイスでも表示できます。

考え始める

最初に学ぶべきことは、「構造」とは何かということです。これを一部の作家は「意味論」とも呼んでいます。この用語が意味するのは、コンテンツ ブロックと各コンテンツが果たす目的を分析し、これらのコンテンツの目的に基づいて対応する HTML 構造を構築する必要があるということです。

じっくりと腰を据えてページ構造を分析して計画すると、次のような結果になる可能性があります。

ロゴとサイト名

メインページのコンテンツ

サイトナビゲーション (メインメニュー)

サブメニュー

検索ボックス

機能エリア (ショッピング カート、チェックアウトなど)

フッター (著作権および関連する法的通知)

通常、次のように DIV 要素を使用してこれらの構造を定義します。