Div+CSSの構造
CSSレイアウトを学んでいますか？純粋なCSSレイアウトを完全にマスターできませんか？通常、研究を妨げる2つの状況があります。
最初の可能性は、CSS処理ページの原則をまだ理解していないことです。ページの全体的なパフォーマンスを検討する前に、まずコンテンツのセマンティクスと構造を検討し、次にセマンティクスと構造にCSSを追加する必要があります。この記事では、HTMLを構成する方法について説明します。
もう1つの理由は、非常に馴染みのあるプレゼンテーションレイヤー属性（CellPadding、Hspace、Align = leftなど）について無力であり、CSSステートメントが変換するものがわからないことです。最初の問題を解決し、HTMLを構築する方法を知っている場合、代わりにどのCSSが使用されるかを詳細に詳細に説明します。
構造化HTML
最初にWebページの制作を学んだとき、最初に写真、フォント、色、レイアウト計画の設計と検討方法を常に検討します。次に、Photoshopまたは花火を使用して、小さな写真を描きます。最後に、HTMLを編集することにより、すべてのデザインが復元され、ページに表示されます。
HTMLページをCSS（CSSフレンドリー）でレイアウトする必要がある場合は、最初に外観を考慮せずに最初からやり直す必要があり、最初にページコンテンツのセマンティクスと構造について考えます。
外観は最も重要なことではありません。よく構築されたHTMLページは、あらゆる外観で表現できます。CSSZen Gardenは古典的な例です。 CSS Zen Gardenは、CSSの力を最終的に認識するのに役立ちます。
HTMLは、コンピューター画面で読むだけではありません。 Photoshopで注意深くデザインした写真は、PDA、携帯電話、スクリーンリーダーに表示されない場合があります。ただし、CSSのさまざまな定義を通じて、任意のネットワークデバイスに、適切に構造化されたHTMLページをどこにでも表示できます。
考え始めます
まず第一に、一部の作家もセマンティクスと呼ぶ構造とは何かを学ぶ必要があります。この用語は、コンテンツブロックと各コンテンツサービスの目的を分析し、これらのコンテンツの目的に基づいて対応するHTML構造を確立する必要があることを意味します。
座ってページ構造を慎重に分析して計画すると、次のようないくつかのピースを取得できます。
ロゴとサイト名
メインページコンテンツ
サイトナビゲーション（メインメニュー）
submenu
検索ボックス
機能エリア（ショッピングカート、レジ係など）
フッター（著作権と関連する法的声明）
私たちは通常、div要素を使用してこれらの構造を定義します。
＜div id = header ＞＜/div＞
＜div id = content ＞＜/div＞
＜div id = globalnav ＞＜/div＞
＜div id = subnav ＞＜/div＞
＜div id =検索＞＜/div＞
＜div id = shop ＞＜/div＞
＜div id =フッター＞＜/div＞
これはレイアウトではなく、構造です。これは、コンテンツブロックのセマンティックな説明です。構造を理解したら、対応するIDをDivに追加できます。 Divコンテナには、任意のコンテンツブロックを含むか、別のDivをネストできます。コンテンツブロックには、タイトル、段落、画像、テーブル、リストなど、HTML要素を含めることができます。
上記のことによれば、あなたはすでにHTMLを構築する方法を知っているので、レイアウトとスタイルの定義を行うことができます。各コンテンツブロックは、ページのどこにでも配置でき、ブロックの色、フォント、ボーダー、背景、アライメント属性などが指定されます。
セレクターを使用することは素晴らしいことです
IDの名前は、特定のコンテンツブロックを制御する手段です。このコンテンツブロックにDIVを配置し、一意のIDを追加することにより、CSSセレクターを使用して、タイトル、リスト、画像、リンク、または段落などを含む各ページ要素の外観を正確に定義できます。たとえば、#COSSルールを書く場合、#Contentの画像ルールとはまったく異なる場合があります。
別の例は、さまざまなルールを使用して、さまざまなコンテンツブロックのリンクスタイルを定義できます。これと同様に：#GlobalNav A：リンクまたは#Subnava：リンクまたは#Content A：リンク。また、異なるスタイルの異なるコンテンツブロックで同じ要素を定義することもできます。たとえば、＃Contentと#FooterのPのスタイルは、それぞれ＃Content Pと#FooterPで定義されます。構造的に言えば、あなたのページは写真、リンク、リスト、段落などで構成されています。これらの要素自体は、どのネットワークデバイス（PDA、携帯電話、またはネットワークTV）が表示されているかには影響しません。それらはあらゆる外観として定義できます。
慎重に構造化されたHTMLページは非常にシンプルで、各要素は構造目的に使用されます。段落をインデントしたい場合は、BlockQuoteタグを使用する必要はありません。 Pタグを使用して、CSSマージンルールをPに追加して、インデント目的を達成します。 Pは構造化されたタグで、マージンは表現属性、前者はHTMLに属し、後者はCSSに属します。 （これは構造と式の位相分離です。）
よく構築されたHTMLページに属性を表すタグはほとんどありません。コードは非常にきれいで簡潔です。たとえば、元のコード<TableWidth = 80％CellPadding = 3 Border = 2Align = left>は、HTMLで<table>のみを書き込むことができ、パフォーマンスを制御するすべてのものはCSSに書き込まれます。構造化されたHTMLでは、テーブルはテーブルであり、他のものではありません（レイアウトやポジショニングに使用されるなど）。
自分で構造を練習します
上記のことは、最も基本的な構造です。実際のアプリケーションでは、必要に応じてコンテンツブロックを調整できます。多くの場合、ネスト状の状況がありますが、コンテナ層には他の層があり、これに似た構造があることがわかります。
＜div id = navcontainer＞
＜div id = globalnav＞
＜ul＞リスト/ul＞
＜/div＞
＜div id = subnav＞
＜ul＞別のリスト＜/ul
＜/div＞
＜/div＞
ネストされたDIV要素を使用すると、パフォーマンスを制御するためのより多くのCSSルールを定義することができます。たとえば、#NavContainerにリストを正しくするためのルールを提供し、#GlobalNavにリストを残すルールを提供し、#Subnavに別の完全に異なるパフォーマンスを提供できます。
従来の方法をCSSに置き換えます
次のリストは、従来の方法をCSSに置き換えるのに役立ちます。
HTML属性と対応するCSSメソッド
HTML属性
CSSメソッド説明
align =左
align =右フロート：左;
フロート：そうです; CSSを使用して、任意の要素を浮かびます：画像、段落、Div、タイトル、テーブル、リストなど。
Float属性を使用する場合、フローティング要素の幅を定義する必要があります。
MARGINWIDTH = 0LEFTMARGIN = 0 MARGINHEIGHT = 0 TOPMARGIN = 0マージン：0; CSSを使用すると、マージンはボディ要素だけでなく、あらゆる要素に設定できますが、さらに重要なことに、要素の上部、右、下、左のマージン値をそれぞれ指定できます。
vlink =＃333399 link =＃000000 link =＃3333ff a：link＃3ff;
A：訪問：＃339;
A：ホバー：＃999;
A：アクティブ：＃00F;
HTMLでは、リンクの色はボディの属性値として定義されます。ページ全体のリンクスタイルは同じです。 CSSセレクターを使用すると、ページのさまざまな部分のリンクスタイルが異なる場合があります。
bgcolor =＃ffffff background-color：#fff; CSSでは、任意の要素は、ボディとテーブル要素だけでなく、背景色を定義できます。
bordercolor =＃ffffff border-color：#fff;任意の要素は境界を設定できます（ボーダー）。それぞれ上部、右、下、左を定義できます。
Border = 3cellSpacing = 3 Border-Width：3px; CSSを使用して、テーブルの境界を統一スタイルとして定義するか、それぞれ上部、右、下、左の境界の色、サイズ、スタイルを定義できます。
テーブル、TD、またはTHセレクターを使用できます。
ボーダレス効果を設定する必要がある場合は、CSS定義を使用できます。
＜br clear =左＞
br clear =右＞
＜br clear = all＞
クリア：左;
クリア：右;
クリア：両方;
多くの2列または3列のレイアウトは、Float属性を使用してLocateを使用します。フローティング層の背景色または背景画像を定義する場合、クリア属性を使用できます。
CellPadding = 3
vspace = 3
hspace = 3パディング：3px; CSSを使用すると、任意の要素がパディング属性を設定できます。同様に、パディングはそれぞれ上部、右、下、左に設定できます。パディングは透明です。
align = center text-align：center;
マージン右：自動;マージン左：自動;
テキストアライグはテキストにのみ適用されます。
DivやPのようなブロックレベルは、マージン右：自動を介して水平に中央に配置できます。およびマージン左：自動。
いくつかの残念なヒントと職場環境
ブラウザによるCSSのサポートが不完全であるため、CSSが従来の方法と同じ効果を達成できるようにするために、ハックを取得したり（回避策）環境（回避策）を作成したりする必要があります。たとえば、ブロックレベルの要素には、水平センタリング技術、ボックスモデルバグテクニックなどの使用が必要な場合があります。これらのヒントはすべて、Mollyholzschlagの記事「統合Webデザイン：長期CSSハックマネージメントのための戦略」で詳しく説明されています。
CSSトリックのもう1つのリソースサイトは、ジョンとホリーベルゲビンの立場がすべてです。
浮かぶ動作を理解します
Eric Meyerの「Floatを含む」は、フロート属性レイアウトの使用方法を習得するのに役立ちます。フロート要素をクリアする必要がある場合があり、「構造マークアップなしでフロートをクリアする方法」を読むことは非常に役立ちます。