wulin.com HTMLチュートリアル列に戻るには、ここをクリックしてください。
上：マークアップ言語 - リストについてもう一度話します
元のソース第9章ライトタグ
以前は、構造化されたコンテンツが構造と設計の詳細を分類し、タグを合理化できることに言及し続けました。私たちは何をすべきですか？テーブルや写真の代わりに標準を満たすXHTMLおよびCSSを使用して、必要なレイアウトを作成できます。
標準テクノロジーを使用してWebサイト（特にCSSに大きく依存するWebサイト）を作成する場合、多くの場合、追加のタグとクラス属性を追加するという悪い習慣を開発します。
CSSで子孫を使用することにより、不必要な<div>、<Span>、および分類プロパティを排除できます。簡素化されたタグは、ページがより速く、メンテナンスがより速く読みやすくなることを意味します。この章では、このタスクを達成するためのいくつかの簡単な方法について説明します。標準テクノロジーを使用してWebサイトを作成するときにタグを合理化する方法は？
簡素化されたタグは、議論する価値のある重要なトピックです。 Webサイトを作成するとき、正当なXHTMLで書いてCSSで表示効果を設定することで得られる大きな利点の1つは、合理化されたタグです。ショートコードは、ダウンロード速度の高速を表します。これは、56Kダイヤルアップを使用してインターネットにアクセスするユーザーにとって間違いなく重要です。また、短いコードはサーバースペースの要件を表し、帯域幅の消費を削減し、ボスとシステムマネージャーを幸せにすることができます。
問題は、ページがW3C標準仕様に準拠していることを単に確認するだけで、コンテンツで使用されるコードが短縮されることを意味しないことです。もちろん、標準を満たすタグコンテンツにさまざまな不要なタグを追加できます。はい、標準を満たしていますが、CSSの設計を容易にするために、不要なコードが多数追加されている可能性があります。
恐れないで！ここには、簡潔に設計して標準のマーキングコンテンツを設計できるが、十分なCSSスタイル制御機能も保持できるヒントがいくつかあります。次に、タグを合理化するためのいくつかの簡単なヒントを学びましょう。継承セレクター
ここでは、個人Webサイトでサイドバー（情報、リンク、その他のものを含む）をマークする2つの方法を見ていきます。 IDを使用してすべての優れたものを<div>に詰めることはサイドバーであるため、後でブラウザウィンドウに配置できます（2番目の部分では、CSSレイアウト/タイプ機能について説明します）。方法A：幸せな分類
<div id = sidebar>
<h3 class = sideheading>このサイトについて</h3>
<p>これは私のサイトです。</p>
<h3 class = sideheading>私のリンク</h3>
<ul class = sidelinks>
<li class = link> <a href = archives.html>アーカイブ</a> </li>
<li class = link> <a href = about.html>私について</a> </li>
</ul>
</div>
多くのWebサイトでメソッドAに似たタグ付けされたコンテンツを見ました。デザイナーが最初にCSSの力を発見したとき、圧倒され、特別なスタイルを作成したい各タグのクラスを指定するのは簡単です。
前の例では、おそらく<h3>は、ページ内の他のタイトルとは異なるスタイルを指定するのに役立つclass = sideheadingを指定していると思います。 <ul>および<li>のクラスを指定することも同じ理由です。分類CSS
スタイルを指定するときは、タイトルをオレンジ色にし、下部に明るい灰色のエッジを備えたセリフフォントを使用すると仮定し、Sidelinksの順序付けリストは小さなドットシンボルを削除し、リスト項目を太字に変更する必要があります。
メソッドAで必要なCSSコンテンツは、次のようになります。
.sideheading {
フォントファミリー：ジョージア、セリフ。
色：＃C63;
ボーダーボトム：1px solid #ccc;
}
.sidelinks {
リストスタイルタイプ：なし;
}
。リンク {
font-weight：bold;
}
タグに確立されたクラス名（クラス）を参照して、これらのタグの特別なスタイルを指定することもできます。また、ページの他の部分がこのように整理されていることを想像できます。ナビゲーションバー、ページの端、コンテンツ領域、各タグはそれらを完全に制御するために乱雑です。
はい、それは機能しますが、これらのクラス属性を保存する簡単な方法があり、CSSを読みやすく、より整理します。次に、方法Bを見てください。方法B：自然な選択
<div id = sidebar>
<h3>このサイトについて</h3>
<p>これは私のサイトです。</p>
<h3>私のリンク</h3>
<ul>
<li> <a href = archives.html> archives </a> </li>
<li> <a href = about.html>私について</a> </li>
</ul>
</div>
方法Bは短く簡潔です！しかし、待ってください、カテゴリはどこに向かっていますか？まあ...あなたはすぐにそれらを本当に必要としないことに気付くでしょう。主に、これらのタグを一意の名前（この場合はサイドバー）と<div>関係に詰めるからです。
これは、継承セレクターが使用される場所です。これらの不要な分類プロパティを削除するには、ラベル名のあるサイドバー内にあるタグを直接指定する必要があります。関係の前後にコンテンツを使用してCSSを指定します。
メソッドAと同じスタイルを見てみましょうが、今回は継承セレクターを使用して、サイドバーにあるタグを指定します。
#sidebar H3 {フォントファミリー：ジョージア、セリフ。
色：＃C63;
ボーダーボトム：1px solid #ccc;
}
#sidebar ul {リストスタイルタイプ：なし;
}
#sidebar li {font-weight：bold;
}
#sidebar IDを参照することにより、そこに含まれるタグの特別なスタイルを指定できます。たとえば、<div id = sidebar>内にある<h3>タグのみが上記のCSSルールを設定します。
コンテンツを短縮するための鍵は、コンテンツの前後の関係に基づいてスタイルを指定するこの方法です。通常、コンテンツのセマンティック構造を設計した後、ラベルに分類属性を追加する必要はありません。サイドバーで使用されるだけではありません
ページの段落（つまり、サイドバー）のみが表示されますが、このアプローチはページ構造全体に適用できます。タグコンテンツをロジック（おそらく#NAV、#Content、#SideBar、#Footer）に従っていくつかの段落に分割し、継承セレクターを使用して、この段落のタグの特別なスタイルを作成します。
たとえば、ページ内の#contentと#sidebarの段落が<h3>タグを使用し、Serifフォントを使用したいとしますが、1つの段落の<h3>を紫に、もう1つの段落をオレンジ色に表示する必要があるとします。
これには、タグの変更と分類プロパティは必要ありません。グローバルスタイルで共有されるすべての<h3>タグのルールを指定し、継承セレクターを使用して、タグの位置に従って色を設定できます。
H3 {
フォントファミリー：ジョージア、セリフ。 / *すべてのh3sがserifになる */
}
#content H3 {
色：紫。
}
#sidebar H3 {
色：オレンジ;
}
すべての<h3>タグがsenifフォントを使用し、コンテンツのコンテキストに従って紫またはオレンジを使用するために色を選択する必要があることを指定します。現時点では、共有ルールを繰り返す必要はありません（この例では、フォントファミリー）。これにより、CSSの内容が短縮され、複数のステートメントで重複するルールが発生するのを防ぐことができます。
クラス属性に必要な余分なマーキングスペースを削減できるだけでなく、CSS構造もより意味のあるものになり、コンテンツを読み取り、ページセグメントに従って整理しやすくなります。また、特定のルールを変更することも非常に簡単になります。これは、大規模で複雑なタイプセッティングで特に明白です。この時点では、同時に数百のCSSルールがある可能性があるためです。
たとえば、この例では、各宣言に共有ルールを追加し、すべての<h3>を後でsans serifフォントに置き換えたい場合、3つの場所を変更する必要があります。一度に行う方法はありません。分類が少ないほど、メンテナンスが向上します
使用する必要があるソースコードスペースを減らすことに加えて、冗長なカテゴリを継承セレクターに置き換えることは、拡張されるコンテンツのマークの将来の容易さも表しています。
たとえば、ページの残りの部分と同じように青を使用するのではなく、サイドバー内のリンクを赤くすることを望んでいると仮定しましょう。そのため、次のようなアンカータグに追加する赤いクラスを作成します。
<div id = sidebar>
<h3>このサイトについて</h3>
<p>これは私のサイトです。</p>
<h3>私のリンク</h3>
<ul>
<li> <a href = archives.html class = red>アーカイブ</a> </li>
<li> <a href = about.html class = red>私について</a> </li>
</ul>
</div>
これらのリンクを赤に変えるには（プリセットリンクの色が赤でないと仮定）、次のようなCSSが必要です。
A：link.red {
色：赤;
}
これらのアクションは問題なく、正常に機能します。しかし、将来心を変えて、これらのリンクをグリーンに変更したい場合はどうでしょうか。より実用的なことに、あなたの上司は時々、今年の赤が時代遅れであると言うので、これらのサイドバーリンクをグリーンに変更してください！問題ありません。CSSの赤いクラスを変更して完了するだけですが、マーキングコンテンツのクラス属性はまだ赤です。明らかに、これは分類名として他の色を使用するように、セマンティクスと完全に一致しているわけではありません。
これは、ディスプレイエフェクトを分類名として使用するのに適した場所ではありませんが、分類をまったく指定しない場合は、分類の処理に多くの努力（およびコード）を節約し、コンテンツセマンティクスをより合理的にすることができます。継承セレクターを使用してこれらのサイドバーへのリンクを選択し、必要に応じてスタイルを指定することもできます。
タグコンテンツはメソッドBとまったく同じであり、サイドバーにリンクを設定するために必要なCSSは次のようになります。
#sidebar li A：link {色：赤;
}
基本的に、これは、<div = sidebar>内の<li>タグにHREF属性を使用するアンカータグのみを赤で表示する必要があることを意味します。
これで、短く柔軟なタグ付けコンテンツを維持しており、将来の更新には、リンクが赤、緑、太字、または斜体に変わるかどうかに関係なく、CSSのみが必要です。
次に、タグを合理化する別の方法を見てみましょう。不要な<div>タグを排除し、既存のブロックレベルタグを直接使用します。
前のページ1 2 3次のページ全文を読む