マークアップ言語 - 簡素化されたタグ_HTML/Xhtml_Web ページの制作

ここをクリックすると、Web Teaching Network の HTML チュートリアルのコラムに戻ります。 上: マークアップ言語 – リストについてもう一度話しましょう オリジナルソース 第9章 簡略化されたタグ これまでに、構造化コンテンツによって構造とデザインの詳細を分類し、タグを簡素化できることを繰り返し説明しました。これを行うには、標準に準拠した XHTML と CSS を使用して、必要なレイアウトを作成できます。 ここをクリックして「Script House HTML チュートリアル」コラムに戻ります。
上: マークアップ言語 - リストについてもう一度話しましょう
オリジナルソース 第 9 章 タグを簡素化する
構造化コンテンツでは構造とデザインの詳細を分類し、タグを簡素化できると前述しましたが、これを行うには、標準に準拠した XHTML と CSS を使用して、必要なレイアウトを作成することができます。 .
Web サイト (特に CSS に大きく依存する Web サイト) を作成するために標準テクノロジーを使用する場合、冗長なタグやクラス属性を追加するという悪い習慣が身に付きます。このテクノロジーではそれらはまったく必要ありません。
子孫を使用することによって。 CSS のセレクターを使用すると、冗長な

、 タグを削除でき、ページがより速く読みやすくなり、保守が容易になります。この章では、このタスクを実行するためのいくつかの簡単な方法について説明します。 。 標準的なテクノロジーで Web サイトを作成する場合、どのようにタグを合理化するか?
Web サイトを作成する場合、タグの合理化は議論に値する重要なトピックです。Web サイトを合法的な XHTML で記述し、表示効果を設定するのは大きなメリットの 1 つです。ショート コードは、より高速なダウンロード速度を表します。これは、56K ダイヤルアップ インターネット アクセスを使用するユーザーにとって非常に重要です。また、ショート コードは、上司やシステム管理者にとって必要なサーバー容量と帯域幅消費量の削減を表します。
問題は、ページが W3C 標準に準拠していることを確認しただけでは、コンテンツで使用されているコードが短縮されることを意味しないことです。 もちろん、標準に準拠しているとマークされたコンテンツにさまざまな不要なタグを追加することもできます。はい、標準を満たしていますが、CSS の設計を容易にするために多くの冗長なコードが追加されている可能性があります。
心配しないでください。シンプルで標準に準拠したマークアップを設計できるようになります。次に、タグを合理化するためのいくつかの簡単なテクニックを学びましょう。 継承されたセレクター
ここでは、個人の Web サイトでサイドバー (情報、リンク、その他のものを含む) をマークする 2 つの方法を見ていきます。ID が「sidebar」の 1 つにすべてをまとめます。

、後でブラウザ ウィンドウのどこかに配置できるようにします (CSS レイアウト/タイポグラフィ機能についてはパート 2 で説明します)。 方法 A: ハッピー分類

このサイトについて

My Links

• アーカイブ


• 私について

多くのウェブサイトで同様の方法 A を見てきました。まず CSS の機能を理解すると、特別なスタイルを開発したいタグごとにクラスを指定しすぎてしまうのが簡単です。
前の例で言えば、

を指定すると、それが容易になると考えられます。ページ上の他の見出しとは異なるスタイルが設定されます。

と
• に class=sideHeading を指定することも同様の理由で行われます。 カテゴリ CSS
  のスタイルを指定するときに、タイトルをオレンジにし、セリフ フォントを使用し、下部に明るい灰色の境界線を追加するとします。また、「サイドリンク」の順序なしリストでは、小さなドット記号を削除する必要があります。
  メソッド A に必要な CSS コンテンツは次のようになります:

  
  .sideHeading {
  font-family: Georgia, serif;
  カラー: #c63;
  border-bottom: 1px ソリッド #ccc;
  }
  .sidelinks {
  list-style-type: none;
  }
  .link {
  font-weight: HD ;
  }

  
  タグ内で指定されたカテゴリ名 (クラス) を参照することで、これらのタグに特別なスタイルを指定することもできます。ページのナビゲーション バー、フッター、コンテンツ領域は次のように構成されています。各タグには複雑なカテゴリが追加されているため、それらを完全に制御できます。
  はい、機能しますが、簡単な方法があります。 CSS を読みやすく整理しながらこれらのカテゴリ属性 (class ) を保存するには、方法 B を見てください。 方法 B: 自然な選択

  
  

  
  

  このサイトについて

  
  

  これは私のサイトです。

  
  

  マイリンク

  
  

  
  
  • アーカイブ
  
  < ;li>自己紹介

方法 B は短くて魅力的です! しかし、すべてのカテゴリはどこに行ったのでしょうか? すぐにわかりますが、これらのタグは、一意のタグを 1 つのタグに詰め込んだためです。 name (この例はサイドバーの

の関係です)。
ここで継承セレクターが機能します。これらの冗長な分類を削除するには、サイドバー内にあるタグをタグ名で直接指定するだけです。属性。 コンテンツ コンテキストによる CSS の指定
メソッド A と同じスタイルを見てみましょう。ただし、今回は継承セレクターを使用してサイドバーにあるタグを指定します。

#sidebar h3 {
font-family: Georgia、serif;
color: #c63;
border-bottom: 1px Solid #ccc;
}

#sidebar ul {
list-style-type: none;
}

#sidebar li {
font-weight:太字;
}

#sidebar ID を参照すると、その中に含まれるタグの特別なスタイルを指定できます。たとえば、

内にある

タグのみを指定できます。 ; 上記の CSS ルールが設定されます。
コンテンツのコンテキストに応じてスタイルを指定するこの方法は、タグ付きコンテンツを短縮するための鍵となります。通常、コンテンツのセマンティック構造を設計した後は、これを行う必要はありません。タグに分類属性を追加します。 サイドバーでのみ使用されるわけではありません
ページの 1 つの段落 (サイドバー) のみを表示しますが、マークされたコンテンツがロジックに従って複数の段落に分割されている限り、この方法はページ構造全体に適用できます (おそらく#nav 、 #content 、 #sidebar 、 #footer )、継承セレクターを使用してこの段落のタグに特別なスタイルを設定します
たとえば、ページに #content 段落と #sidebar 段落の両方があるとします。

タグを使用し、セリフ フォントを使用したいとします。ただし、ある段落の

をオレンジ色で表示するには、タグを変更する必要はありません。分類属性を追加し、グローバル スタイルを通じてすべての

タグに共通のルールを指定し、タグの位置に応じて色を設定します。 >h3 ​​{
font -family: Georgia, serif; /* すべての h3 はセリフになります */ }

#content h3 {
color: purple;
}
#sidebar h3 {
color: orange;
}


すべての

タグが senif フォントを使用することを指定し、その色はコンテンツのコンテキストに基づいて紫またはオレンジにする必要があります。共有ルール (この例では font-family) を繰り返す必要がないため、CSS のコンテンツが短縮され、複数の宣言でルールが重複するのを防ぐことができます。
に必要な余分なマークアップ スペースを削減できるだけでなく。 class 属性だけでなく、CSS 構造もより意味のあるものになり、内容が読みやすくなり、ページセグメントに従って整理しやすくなり、特定のルールの変更が非常に簡単になります。これは、大規模で複雑な場合に特に顕著です。

たとえば、この例では、各宣言に共有ルールを追加し、後ですべての

フォントをサンセリフ体に変更したい場合、変更する必要があります。一度に 3 か所で変更する方法はありません。 維持するカテゴリの数は少ないほど良いです

必要なソース コード スペースを削減することに加えて、冗長なカテゴリを継承されたセレクターで置き換えることは、マークアップ コンテンツを将来簡単に拡張できることも意味します
たとえば、次のことを行うとします。サイドバーを作成するには、内部のリンクがページの残りの部分のように青ではなく赤になるため、赤のクラスを作成し、次のようにアンカー タグに追加します。

このサイトについて

これは私のサイトです。

私のリンク

• class="red"
  >アーカイブ

class="red">自己紹介

< ;/ p>
これらのリンクを赤にするには (デフォルトのリンク色が赤ではないと仮定して)、次のような CSS が必要です:

a:link.red {
color: red;
}

これらのアクションには何も問題はなく、正常に動作しますが、将来的には、これらのリンクを緑に変更したい場合はどうすればよいでしょうか? または、より現実的に、上司が「今年は赤は時代遅れだから、これらのサイドバーのリンクを緑に変更してください」と言うことがありました。問題ありません。赤を変更するだけです。 CSS 内 クラスは完了しましたが、マークアップ コンテンツのクラス属性はまだ赤のままです。これは、カテゴリ名として他の色を使用するのと同じように、完全にセマンティックではありません。
これは、表示効果を使用するのに適した場所ではありません。ただし、カテゴリをまったく指定しない場合は、カテゴリの処理にかかる労力 (およびコード) を大幅に節約でき、同時にコンテンツのセマンティクスをより合理的にすることができます。これらのサイドバー リンクを選択し、必要に応じてスタイルを指定します。
マークアップの内容は方法 B とまったく同じで、サイドバー リンクの設定に必要な CSS は次のようになります:

#sidebar li a:link {
color: red;
}

基本的に、これは「

タグのみ」を意味します。 "sidebar"> href 属性を使用します。アンカー タグは引き続き赤色で表示されます。
現時点では、短くて柔軟なマークアップ コンテンツが維持されており、将来の更新では、リンクを赤色にするかどうかに関係なく、CSS の使用のみが必要になります。 、緑、太字、斜体でも問題ありません。
次に、タグを簡素化する別の方法を見てみましょう。不要な

タグを削除し、既存のブロックレベルのタグを直接使用します。
                                                                        #p# 不要な

スタイルの指定に必要な分類属性を減らすことに加えて、タグを合理化する別の簡単な方法があります。つまり、

タグ内にブロックレベルの要素がある場合、それを削除して、次にこれら 2 つの例を見てください。 方法 A:

• アーカイブ


• 概要

これは、順序のないリストのみで構成される非常に小さなナビゲーション バーです。リストの

は nav を id として指定します。
しかし

は

のようなブロックレベルの要素なので、メソッド B を見てみましょう。 方法 B: 削除










概要


ul> ;


方法 B は、ul を直接使用でき、冗長な

はすべて は、

に割り当てるだけなので、アウトソーシング タグを破棄する代わりに、タグのソース コードの一部を確認できます。
このメソッドは使用されるだけです。ナビゲーションに

以外のものが含まれていない場合、たとえば、冗長な段落、

または

が含まれている場合にのみ適用されます。

内に配置するため、

をアウトソーシング タグとして使用する方が合理的です。ただし、方法 A と方法 B で示された例では、順序付けされていないリストが唯一の含意的なタグです。

を破棄するのは合理的です。実際、すべてのアウトソーシング タグの存在意味を考慮すると、それは本当にどこかに配置する必要がありますか? 使用できる既存のブロック レベルの要素はありますか?難しいことではありません。 その他の例


が破棄されるもう 1 つの状況は、

のような をアウトソーシングする場合です。






... ここにフォーム要素 ...

> ;




実際には、次のように簡単に書くことができます。




... ここのフォーム要素 ...




同様に、Web サイトのフッターに 1 つの段落しか含まれていない場合、次のように書くことに加えて:







Copyright 1999-2004 Dan Cederholm





は次のように書くこともできます:




Copyright 1999-2004 Dan Cederholm

> ;


もちろん、この変更は、ページのフッターに 1 つの段落しか含まれていない場合にのみ実行できます。
                                                                        #p# 要約すると、
タグ コードを合理化する 2 つの簡単な方法を検討しました。1 つ目は、カテゴリ属性を控えめに使用し、継承されたセレクターでスタイルを設定することです。2 つ目は、冗長な要素を使用せずに、既存の単一のブロック レベル要素の ID を直接指定することです。 < ;p>アウトソーシングします。
これらの方法は、取るに足らないサイズの節約にしか思えないかもしれませんが、Web サイト全体に実装し始めると、合理化された構造化されたコードが徐々に明確になり、コンテンツに準拠した記述が可能になります。
「テクニック拡張」では、継承されたセレクターの機能をさらに活用し、ネストされたリストのスタイルを指定し、それをサイト マップにする方法を見てみましょう。 スキル拡張
この単元では、継承セレクターを使用して、ネストされたリストのさまざまなレベルに特別なスタイルを作成する方法を見てみましょう。これは、保持するための非常に基本的なものであることがわかります。マークアップ コードは、追加の分類属性を追加せずに、各レベルのスタイルを指定できます。
まず、マークアップ コードを見てみましょう。 元の
タグは、アウトラインのようなもの (この場合はもちろんサイトマップ) の最も基本的な階層構造を提供する、ネストされたスタイルのないリストです。構造は正しく表示され、後で CSS を使用して簡単にスタイル設定できます。
小さなサイト マップのマークアップ コードは次のようになります。






• ブログ


• 記事
  
  
  
  • レッドソックスに勝つ方法
  
  
  • 7 回以降の投球
    
    
    
    • パート I
    
    
    • パート II li>
      
      /ul>
      
      
    
    
    • 85 年ってそんなに長くないですよ、本当に
      
      
    gt;

gt;

概要






図 9-1 は、ほとんどのブラウザでこの例がどのように表示されるかを示しています。デフォルト値を使用すると、スタイルを指定しなくても、構造は非常に明白ですが、確かに少し退屈なので、CSS を追加し始めました。


図 9-1 まだスタイル設定されていないネストされたリスト スタイルの追加
サイト マップの特定のレイヤーにスタイル定義を追加するとします。実際には、このリストを他のもので指定できるように、マークアップ コードに何かを追加する必要があります。ページ上の部分リストには、他のマークアップ コンテンツを追加せずに、さまざまなスタイルが適用されます。id="sitemap">
;/li>


記事




• レッドソックスに勝つ方法


• 7回裏のピッチング
  
  
  
  • パート I
  
  
  • パート II
  
  
  
  


• 85 年はそれほど長くはありません、本当に









について

継承セレクターを使用すると、リストの各レベルに固有のスタイルを作成できます。たとえば、最も外側のフォント メソッドを太字にしたい場合は、オレンジを使用します。内側のレイヤーが徐々に縮小する場合は、最初にリスト全体のサイズ、厚さ、色を指定できます。

#sitemap {
font-size: 140%;
font -重み: 太字;
カラー: #f63;
}

これにより、リスト全体が大きなフォントとオレンジ色の太字フォントに変更されます。次に、ネストされた構造の任意のレベルに対して

が適用されます。 ; タグ内の文字サイズが小さくなり、色が変わります。

#sitemap {
font-size: 140%;
font-weight: 太字;
color: #f63;
}
#sitemap li ul {
フォント サイズ: 90%;
色: #000;
}

前の CSS では、すべてのトップレベル項目が大きなオレンジ色の太字フォントで表示され、内側のネストされたリストは黒色の 90% フォント (この場合は 140% の 90%) で表示されます。結果は図 9-2 を参照してください。

図 9-2 最上位リスト項目のスタイルの指定
3 番目のレイヤーに小さいフォントを指定する必要はありません。 90 % の 90% を自動的に使用します (少しわかりにくいですが、機能します!)
リストの各レベルのフォント サイズが自動的に縮小され、その後にいくつかのドットが表示されます。 ドット記号
をカスタマイズしてデフォルトのスタイルを削除し、背景属性を使用して第 3 レベルの項目に装飾的なドット記号を追加します。次に、すべての

タグのデフォルトのリスト スタイルを削除します。内視鏡画像を指定します。さらに区別するために、リストの太字の設定値をオーバーライドして、font-weight:normal も設定されます。 : 140%; font-weight: 太字;

color: #f63;
}

#sitemap li {


list -style: none; /* 箇条書きをオフにします */
}#sitemap li ul {
font-size: 90%; color: #000 ; }

/* 3 番目のレイヤー*/


#sitemap li ul li ul li {

font-weight :normal;
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
図 9-3 は、3 番目のレイヤーの

タグにカスタム ドット シンボルと通常のフォントを使用した、完成した Web サイト マップです。装飾的なドット画像 (また、余分な空白を残します) また、左側の 0 ピクセルと上の 50% のピクセルから画像の表示を開始するようにブラウザーに指示します。これにより、基本的に画像の左側が中央の線に揃えられます。ここではテキストの垂直方向の配置をピクセル単位で指定できますが、パーセントで指定すると、テキスト サイズが変更された場合でもドット イメージは正しい配置を維持できます。プロジェクトとカスタムドット絵 境界線を追加します

次に、第 2 レベルのリストの左側に点線の境界線を追加して、サイト マップを完成させます。これにより、最上位のプロジェクトにサブプロジェクトが属していることを読者にさらに知らせることができます。第 2 レベルのリストのみを表示するには、この効果を実現するために、次のルールが追加されます:

#sitemap {
font-size: 140%;
font-weight: 太字;
color: #f63;
}
#sitemap li {
list-style: none; /* 箇条書きをオフにする */
}
#sitemap li ul {
margin: 6px 15px;
padding: 0 15px;
font-size: 90%;
color: #000;
border-left: 1px 点線 #999;
}
/* 3 番目-level */
#sitemap li ul li ul {
border: none;
}
#sitemap li ul li ul li {
font-weight:normal;
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}

2 番目のレイヤーの外側のパッチを少し調整し、点線の境界線を追加しました。
図 9-4 は、変更された Good フォントです。 、境界線と画像リストの効果。

図 9-4 2 番目のレイヤーに点線のエッジが追加された完成したリスト スタイル
アウトラインなどのリストをデザインする場合、

をネストすると、 -構造化された、スタイルが簡単なソリューション。最上位の
に固有の ID ラグを指定することで、冗長な表示タグを追加することなく、各レイヤーを個別にスタイル設定するタスクをオフロードできます。
図 9-5 は、同じ CSS を少し大きなサイト マップに適用した結果です。CSS はレベルに基づいてスタイルを指定するため、ラベルのコンテンツはまったく同じように記述され、プロジェクトが自動的に選択します。さまざまなネスト レベルに応じて、適切なスタイルを選択します。

図 9-5 CSS とネストされたリストで作成されたサイト マップの拡張バージョン 結論
この章の冒頭では、タグのソース コードを合理化する 2 つの方法を検討しました。1 つは継承されたセレクターを使用する方法で、もう 1 つは冗長な

タグを破棄する方法です。
統合されたセレクターには、冗長な分類属性を使用すると、マークされたソース コードが読みにくくなりやすくなりますが、固有のブロック レベルの要素を直接含む

タグを削除すると、バイト数をできるだけ節約でき、ソースのビルドも容易になります。複雑なレイアウトのコード。
これらの方法を使用すると、数バイトしか節約できないように見えますが、これらの方法を Web サイト全体に適用し始めると、節約量が蓄積され始めます。これを別のコードの作成方法と考えることができます。柔軟で構造化されたマークアップ。
タグのソース コードを合理化することに加えて、アウトラインの各レベルに独自のスタイルを指定できる、ネストされたリストを使用した継承セレクターの使用方法も検討しました。追加の分類属性を使用すると、再び数バイトが節約され、今後の更新や再設計作業が容易になります。
合理化されたタグ コード万歳!
この本の「タグ構文から始めるパート」はすべて終わりました。これらの簡単な言葉があなたにインスピレーションを与えることを願っています