Web ページ制作スキル-----DIV タグに CSS スタイルのデザインを適用する
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 要素を使用してこれらの構造を定義します。
＜div id="header" ＞ ＜/div＞
＜div id="content">＜/div＞
＜div id="globalnav">＜/div＞
＜div id="subnav">＜/div＞
＜ div id="search">＜/div＞
＜div id="shop">＜/div＞
＜div id="footer">＜/div＞
これはレイアウトではなく、構造です。これはコンテンツ ブロックの意味論的な記述です。構造を理解したら、対応する ID を DIV に追加できます。 DIV コンテナ内には任意のコンテンツ ブロックを含めることができ、その中に別の DIV をネストすることができます。コンテンツ ブロックには、タイトル、段落、画像、表、リストなど、あらゆる HTML 要素を含めることができます。
上記によると、HTML の構造化方法はすでにわかったので、レイアウトとスタイルを定義できます。各コンテンツ ブロックはページ上のどこにでも配置でき、ブロックの色、フォント、境界線、背景、配置プロパティなどを指定できます。
セレクターの使用は素晴らしいことです
ID の名前は、特定のコンテンツ ブロックを制御する手段です。このコンテンツ ブロックに DIV を配置し、一意の ID を追加すると、CSS セレクターを使用して各コンテンツ ブロックを正確に定義できます。 . タイトル、リスト、画像、リンク、段落などのページ要素の外観。たとえば、#header の CSS ルールを作成する場合、それは #content の画像ルールとはまったく異なるものになる可能性があります。
もう 1 つの例は、異なるルールを通じて異なるコンテンツ ブロックにリンク スタイルを定義できることです。このようなもの: #globalnav a:link または #subnav a:link または #content a:link異なるコンテンツ ブロック内の同じ要素に異なるスタイルを定義することもできます。たとえば、#content p と #footer p を通じて、それぞれ #content と #footer の p のスタイルを定義します。構造的に言えば、ページは画像、リンク、リスト、段落などで構成されます。これらの要素自体は、どのネットワーク デバイス (PDA、携帯電話、またはインターネット TV) に表示されるかには影響しません。これらは、任意のパフォーマンスの外観として定義できます。
慎重に構造化された HTML ページは非常にシンプルで、すべての要素が構造的な目的で使用されます。段落をインデントする場合は、blockquote タグを使用する必要はありません。p タグを使用し、CSS マージン ルールを p に追加するだけで、インデントの目的を達成できます。 p は構造化タグ、margin はプレゼンテーション属性です。前者は HTML に属し、後者は CSS に属します。 (これが構造と表現の分離です。)
よく構造化された HTML ページには、属性を表すタグはほとんどありません。コードは非常にクリーンで簡潔です。たとえば、元のコード
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
