CSSレイアウトを勉強していますか？まだ純粋な CSS レイアウトを完全にマスターできていませんか?通常、学習を妨げる状況は 2 つあります:
最初の可能性は、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 要素を使用してこれらの構造を定義します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
