HTML構造化実装方法

DIV+css構造 CSSレイアウトを学んでいますか?まだ純粋な CSS レイアウトを完全に習得できませんか?通常、学習の妨げになるものが 2 つあります。
最初の可能性は、CSS がページを処理する方法をまだ理解していないことです。ページ全体のプレゼンテーションを検討する前に、まずコンテンツのセマンティクスと構造を検討し、そのセマンティクスと構造に基づいて CSS を追加する必要があります。この記事では、HTML を構造化する方法について説明します。
もう 1 つの理由は、どの CSS ステートメントを非常によく知られているプレゼンテーション属性 (cellpadding、hspace、align="left" など) に変換すればよいか分からなくなることです。最初の問題を解決し、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="検索"＞＜/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 または #subnava:link または #content a:link。異なるコンテンツブロック内の同じ要素に異なるスタイルを定義することもできます。たとえば、#content p と #footerp は、それぞれ #content と #footer の p のスタイルを定義します。構造的には、ページは画像、リンク、リスト、段落などで構成されています。これらの要素自体は、ネットワークデバイス (PDA、携帯電話、ネットワーク TV) に表示される内容には影響しません。これらは、任意のプレゼンテーションの外観として定義できます。
慎重に構造化された HTML ページは非常にシンプルで、すべての要素が構造上の目的で使用されます。段落をインデントしたい場合、blockquote タグを使用する必要はありません。p タグを使用し、p に CSS マージンルールを追加するだけで、インデントの目的を達成できます。 p は構造タグであり、margin はプレゼンテーション属性です。前者は HTML に属し、後者は CSS に属します。（これが構造と表現の相分離です。）
適切に構造化された HTML ページには、プレゼンテーション属性を持つタグがほとんど含まれていません。コードは非常にきれいで簡潔です。たとえば、元のコード <tablewidth="80%" cellpadding="3" border="2"align="left"> は、HTML では <table> として記述でき、パフォーマンスの制御はすべて CSS で記述されます。構造化 HTML では、テーブルはテーブルであり、他の何物でもありません (レイアウトや配置に使用されるなど)。
自分で構造化を練習してください。上記は最も基本的な構造にすぎません。実際のアプリケーションでは、必要に応じてコンテンツブロックを調整できます。多くの場合、DIV はネストされており、「コンテナー」レイヤー内に次のような構造の他のレイヤーが表示されます。
<div id="navcontainer">
<div id="グローバルナビゲーション">
＜ul＞リスト＜/ul＞
＜/div＞
＜div id="サブナビゲーション"＞
<ul>別のリスト</ul>
＜/div＞
＜/div＞
ネストされた div 要素を使用すると、パフォーマンスを制御するための CSS ルールをさらに定義できます。たとえば、#navcontainer にリストを右揃えにするルール、#globalnav にリストを左揃えにする別のルール、#subnav にリストを左揃えにする別のルールを指定できます。
従来の方法を CSS に置き換える次のリストは、従来の方法を CSS に置き換えるのに役立ちます。
HTML 属性と対応する CSS メソッド HTML 属性 CSS メソッド説明 align="left"
align="right" フロート: left;
float: right; CSS を使用すると、画像、段落、div、タイトル、表、リストなどの任意の要素をフロートさせることができます。float 属性を使用する場合は、フローティング要素の幅を定義する必要があります。
marginwidth="0"leftmargin="0" marginheight="0" topmargin="0" margin: 0; CSS を使用すると、body 要素だけでなく、任意の要素に margin を設定できます。さらに重要なのは、要素の上、右、下、左の margin 値を個別に指定できることです。
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:訪問数: #339;
:hover: #999; より
アクティブ: #00f;
HTML では、リンクの色は body 属性の値として定義されます。リンクのスタイルはページ全体で同じです。 CSS セレクターを使用すると、ページのさまざまな部分のリンクに異なるスタイルを設定できます。
bgcolor="#FFFFFF" background-color: #fff; CSS では、body 要素や table 要素だけでなく、任意の要素で背景色を定義できます。
bordercolor="#FFFFFF" border-color: #fff; どの要素にも境界線を設定できます。上、右、下、左を個別に定義できます。
border="3"cellspacing="3" border-width: 3px; CSS を使用すると、テーブルの境界線を統一されたスタイルとして定義することも、上、右、下、左の境界線の色、サイズ、スタイルを個別に定義することもできます。
table、td、または th セレクターを使用できます。
境界のない効果を設定する必要がある場合は、CSS 定義 border-collapse: collapse; を使用できます。
＜br clear="left"＞
＜br clear="right"＞
＜br clear="すべて"＞
クリア：左;
明確：正しい;
クリア: 両方;
多くの 2 列または 3 列のレイアウトでは、配置に float プロパティが使用されます。フロートレイヤーで背景色または背景画像を定義する場合は、clear プロパティを使用できます。
セルパディング="3"
縦スペース="3"
hspace="3" padding: 3px; CSS を使用すると、どの要素にもパディング属性を設定できます。同様に、パディングは上、右、下、左に個別に設定できます。パディングは透明です。
align="center" テキスト配置: center;
右マージン: 自動; 左マージン: 自動;
テキスト配置はテキストにのみ適用されます。
div や p などのブロックレベル要素は、margin-right: auto; および margin-left: auto; を使用して水平方向に中央揃えにできます。残念なテクニックと回避策 CSS に対するブラウザーのサポートが不完全なため、CSS で従来の方法と同じ効果を実現するには、ハックに頼ったり、環境 (回避策) を確立したりする必要がある場合があります。たとえば、ブロックレベル要素では、水平方向の中央揃えテクニックやボックスモデルのバグテクニックなどを使用する必要がある場合があります。これらのテクニックはすべて、Molly Holzschlag 氏の記事「Integrated Web Design: Strategies for Long-Term CSS Hack Management」で詳しく説明されています。
CSS テクニックに関するもう 1 つの優れたリソースは、Big John と Holly Bergevin による「Position is Everything」です。
フロートの動作を理解する Eric Meyer の「Containing Floats」は、レイアウトにフロートプロパティを使用する方法を理解するのに役立ちます。フロート要素は、場合によってはクリアする必要があります。「構造マークアップなしでフロートをクリアする方法」を読むと非常に役立ちます。

<<: MySQL 権限制御の詳細な説明

>>: CSSは、入力ボックスのフローティングテキスト効果を実現するために、placeholder-shown疑似クラスを使用します。