マークアップ言語 - 簡略化されたタグ

123WORDPRESS.COM HTML チュートリアルセクションに戻るには、ここをクリックしてください。
前:マークアップ言語 - リストについてもう一度話しましょう<br />元のソース第 9 章タグの合理化これまで、構造化コンテンツでは構造とデザインの詳細を分類し、タグを合理化できることを繰り返し説明しました。どうすればよいでしょうか。必要なレイアウトを作成するには、表や画像の代わりに標準の XHTML と CSS を使用できます。
標準テクノロジーを使用して Web サイト (特に CSS に大きく依存するもの) を作成する場合、テクノロジーにまったく必要のない不要なタグやクラス属性を追加するという悪い習慣が身に付くことがよくあります。
CSS で子孫セレクターを使用すると、冗長な <div>、<span>、および class 属性を排除できます。タグを合理化すると、ページの読み取りが速くなり、メンテナンスが容易になります。この章では、このタスクを達成するためのいくつかの簡単な方法について説明します。標準技術を使用して Web サイトを作成するときに、タグを合理化するにはどうすればよいでしょうか。
簡素化されたタグは、議論する価値のある重要なトピックです。Web サイトを作成するときに、表示効果を設定するために合法的な XHTML と CSS を使用することの大きな利点の 1 つは、タグを簡素化できることです。コードが短いということは、ダウンロード速度が速くなることを意味します。これは、56k ダイヤルアップを使用してインターネットを閲覧するユーザーにとって非常に重要です。コードが短いということは、サーバースペース要件と帯域幅消費が少なくなるということでもあり、上司やシステム管理者を喜ばせることができます。
問題は、ページが W3C 標準に準拠していることを確認しただけでは、コンテンツに使用されるコードが短くなるわけではないということです。もちろん、標準に準拠しているコンテンツにあらゆる種類の不要なタグを追加できます。確かに標準に準拠していますが、CSS の設計を容易にするために、不要なコードが大量に追加される可能性があります。
心配しないでください。ここでは、CSS スタイルコントロールを十分に保持しながら、クリーンで標準に準拠したマークアップを設計するためのヒントをいくつか紹介します。マークアップをシンプルに保つための簡単なテクニックをいくつか学びましょう。セレクタの継承ここでは、個人の Web サイトでサイドバー (情報、リンク、その他の要素を含む) をマークアップするための 2 つのアプローチについて説明します。すべての重要な要素を、id が "sidebar" である <div> に詰め込んで、後でブラウザービューポートのどこかに移動できるようにします (パート 2 では、CSS レイアウト/タイポグラフィ機能について説明します)。方法 A: 幸せな分類

<div id="サイドバー">
<h3 class="sideheading">このサイトについて</h3>
<p>これは私のサイトです。</p>
<h3 class="sideheading">私のリンク</h3>
<ul class="サイドリンク">
<li class="link"><a href="archives.html">アーカイブ</a></li>
<li class="link"><a href="about.html">自己紹介</a></li>
</ul>
</div>

私は多くのウェブサイトで方法 A に似たマークアップを見てきました。デザイナーが初めて CSS の威力を発見したとき、やり過ぎてしまい、異なるスタイルにしたいすべてのタグにクラスを割り当ててしまいがちです。
前の例では、<h3> に class=sideheading を割り当てる目的は、ページ上の他の見出しと区別できるようにするためだと考えられるかもしれません。同じ理由が、<ul> と <li> に class を割り当てる場合にも当てはまります。
スタイルを指定するときに、タイトルをオレンジ色、セリフフォント、下部に薄い灰色の境界線を付け、「サイドリンク」の順序なしリストではドットを削除し、リスト項目を太字にするとします。
方法 A に必要な CSS は次のようになります。

.サイドヘッディング {
フォントファミリー: Georgia、セリフ;
色: #c63;
下境界線: 1px 実線 #ccc;
}
.サイドリンク {
リストスタイルタイプ: なし;
}
。リンク {
フォントの太さ: 太字;
}

マークアップで指定されたカテゴリ名 (クラス) を参照することで、これらのタグに特別なスタイルを指定できます。ナビゲーションバー、フッター、コンテンツ領域など、ページの他の部分もこのように整理できます。各タグには、完全な制御ができるように、乱雑なカテゴリが追加されます。
はい、確かに機能しますが、これらのクラスを保存して、CSS を読みやすく整理する簡単な方法があります。方法 B に進みましょう。方法 B: 自然な選択

<div id="サイドバー">
<h3>このサイトについて</h3>
<p>これは私のサイトです。</p>
<h3>私のリンク</h3>
<ul>
<li><a href="archives.html">アーカイブ</a></li>
<li><a href="about.html">私について</a></li>
</ul>
</div>

方法 B はすばらしいです。でも、待ってください。カテゴリはどこにあるのでしょうか。そうですね... これらすべてのタグを一意の名前 (この場合はサイドバー) を持つ <div> に詰め込んでいるため、カテゴリは実際には必要ないことがすぐにわかります。
ここで継承セレクターが役立ちます。サイドバーのタグをタグ名で直接指定するだけで、冗長な分類属性を削除できます。
方法 A と同じスタイルを見てみましょう。ただし、今回は継承されたセレクターを使用してサイドバーのラベルを指定します。

#サイドバー h3 {
フォントファミリー: Georgia、セリフ;
色: #c63;
下境界線: 1px 実線 #ccc;
}

#サイドバー ul {
リストスタイルタイプ: なし;
}

#サイドバー li {
フォントの太さ: 太字;
}

#sidebar ID を参照することで、その中に含まれるタグに特定のスタイルを指定できます。たとえば、<div id="sidebar"> 内の <h3> タグにのみ上記の CSS ルールが設定されます。
コンテンツのコンテキストに基づいてスタイルを指定するこのアプローチは、マークアップコンテンツを短縮するための鍵です。通常、コンテンツのセマンティック構造を設計した後は、タグに分類属性を追加する必要はありません。これはサイドバーでのみ使用されるわけではありません。ページの 1 つのセクション (サイドバー) のみを表示しますが、このアプローチはページ構造全体に適用できます。マークアップコンテンツをいくつかの論理セクション (たとえば #nav、#content、#sidebar、#footer) に分割し、継承セレクターを使用してセクション内のタグに特別なスタイルを指定します。
たとえば、ページの #content セクションと #sidebar セクションの両方に <h3> タグがあり、両方にセリフフォントを使用したいとします。ただし、一方のセクションの <h3> を紫色にし、もう一方のセクションの <h3> をオレンジ色にしたいとします。
これには、タグを変更したり、分類属性を追加したりする必要はありません。グローバルスタイルを使用してすべての <h3> タグに共通のルールを指定し、継承セレクタを使用してタグの位置に応じて色を設定できます。

h3 {
font-family: Georgia, serif; /* すべての h3 を serif にする */
}
#コンテンツ h3 {
色: 紫;
}
#サイドバー h3 {
色: オレンジ;
}

すべての <h3> タグで senif フォントを使用し、コンテキストに応じて色を紫またはオレンジにする必要があることを指定します。共有ルール (この場合は font-family) を繰り返す必要がないため、CSS コンテンツが短縮され、複数の宣言でルールが重複することがなくなります。
クラス属性に必要な余分なマークアップスペースを節約できるだけでなく、CSS 構造もわかりやすくなり、コンテンツが読みやすくなり、ページセクションに整理しやすくなり、特定のルールを変更しやすくなります。これは、一度に数百の CSS ルールがある大規模で複雑なレイアウトで特に顕著です。
たとえば、この例では、各宣言に共有ルールを追加し、後ですべての <h3> をサンセリフフォントに変更する場合、3 か所を変更する必要があり、すべてを一度に行うことはできません。カテゴリが少ないほどメンテナンスが容易になります。使用する必要があるソースコードスペースの量を減らすことに加えて、冗長なカテゴリの代わりに継承されたセレクターを使用すると、マークアップコンテンツを将来的に拡張しやすくなります。
たとえば、サイドバーのリンクをページの他の部分のように青ではなく赤にしたい場合は、次のように red のクラスを作成し、アンカータグに追加します。

<div id="サイドバー">
<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 で red クラスを変更するだけで済みますが、マークアップの class 属性は依然として red のままです。これは、カテゴリ名として他の色を使用する場合と同様に、意味的に完全に正しいとは言えません。
これは、表示効果をカテゴリ名として使用するのに適した場所ではありませんが、カテゴリをまったく指定しないことで多くの労力 (およびコード) を節約し、コンテンツをより意味的に健全なものにすることができます。代わりに、継承されたセレクターを使用してこれらのサイドバーリンクを選択し、必要に応じてスタイルを設定できます。
マークアップは方法 B とまったく同じですが、サイドバーリンクを設定するために必要な CSS は次のようになります。

#サイドバー li a:link {
色: 赤;
}

基本的に、これは「<div id="sidebar"> 内の <li> タグ内の href 属性を持つアンカータグのみが赤色で表示される」ことを意味します。
現在、マークアップは短くて柔軟なままになっており、将来のアップデートでは、リンクを赤、緑、太字、斜体にするかどうかに関係なく、CSS のみが必要になります。
次に、タグを効率化する別の方法を見てみましょう。不要な <div> タグを削除し、既存のブロックレベルタグを直接使用します。

前のページ1 2 3 次のページ続きを読む

<<: 分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

>>: MySQLクエリキャッシュに関するヒント