HTML の構造化: DIV+CSS を実践するための初心者ガイド Web ページ レイアウト_CSS/HTML

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 要素を使用してこれらの構造を定義します。

＜div id="content">＜/div＞

＜/div>

＜/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 ページには、プレゼンテーション属性タグはほとんどありません。コードは非常にクリーンで簡潔です。たとえば、元のコード は HTML 内に のみを記述できるようになり、パフォーマンスを制御するものはすべて HTML で記述されます。 CSS 構造化 HTML では、テーブルはテーブルであり、他のものではありません (レイアウトや位置決めに使用されるなど)。

自分で構造を練習してください

上記は最も基本的な構造にすぎません。実際のアプリケーションでは、必要に応じてコンテンツ ブロックを調整できます。 DIV は入れ子になっていることがよくあります。「container」レイヤーには他のレイヤーもあり、その構造は次のようになります。

リスト

別のリスト

ネストされた div 要素を使用すると、パフォーマンスを制御するための CSS ルールをさらに定義できます。例: #navcontainer にリストを右にセンタリングするルールを与え、#globalnav にリストを左にセンタリングするルールを与え、#subnav のリストにまったく異なる動作を与えることができます。

従来のメソッドを CSS で置き換える

次のリストは、従来のメソッドを CSS で置き換えるのに役立ちます:

HTML 属性と対応する CSS メソッド

HTML プロパティ

CSS メソッドの説明

align="left"

align="right" float: left;

float: right; : 画像、段落、div、タイトル、表、リストなど。

float 属性を使用する場合は、floating 要素の幅を定義する必要があります。

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; CSS を使用すると、body 要素だけでなく、任意の要素に margin を設定できます。上、右、下、左の要素のマージン値をそれぞれ指定できます。

vlink="#333399" alink="#000000" link="#3333FF" a:リンク #3ff;

a:訪問済み: #339; :hover: #999;

a:active: #00f;

HTMLでは、リンクの色は本文の属性値として定義されます。リンクのスタイルはページ全体で同じです。 CSS セレクターを使用すると、ページのさまざまな部分でリンク スタイルを変えることができます。

bgcolor="#FFFFFF" 背景色: #fff; CSS では、body 要素や table 要素だけでなく、任意の要素に対して背景色を定義できます。

bordercolor="#FFFFFF" border-color: #fff; 任意の要素に境界線 (境界線) を設定でき、それぞれ上、右、下、左を定義できます

border="3 "cellspacing="3" border-width: 3px; CSS を使用すると、表の境界線を統一スタイルとして定義したり、上、右、下、左の境界線の色、サイズ、スタイルを個別に定義したりできます。

table、td、またはこれらのセレクターを使用できます。

ボーダーレス効果を設定する必要がある場合は、CSS 定義を使用できます。

＜ br clear="left">







clear: left; 🎜 >clear: right;

clear: Both;

多くの 2 列または 3 列のレイアウトでは、位置決めに float 属性が使用されます。フローティングレイヤーで背景色または背景画像を定義する場合、clear 属性を使用できます。

vspace="3"

hspace = "3" padding: 3px; CSS を使用すると、任意の要素でパディング属性をそれぞれ上、右、下、左に設定できます。パッドは透明です。

align="center" text-align: center;

margin-right: auto; margin-left: auto;

Text-align はテキストにのみ適用されます。 🎜>
div、p などのブロック レベルは、margin-right: auto; および margin-left: auto; によって水平方向に中央揃えにすることができます。

いくつかの残念なテクニックと作業環境

ブラウザによる CSS のサポートが不完全なため、CSS が従来の方法と同じ効果を達成できるようにするために、いくつかの技術 (ハック) を採用したり、環境 (回避策) を確立したりする必要がある場合があります。たとえば、ブロック レベルの要素では、水平方向のセンタリング手法やボックス モデルのバグ手法などを使用する必要がある場合があります。これらのテクニックはすべて、Molly Holzschlag の記事「Integrated Web Design: Strategies for Long-Term CSS Hack Management」で詳しく説明されています。