wulin.com HTMLチュートリアル列に戻るには、ここをクリックしてください。
上：マークアップ言語 - アンカーポイント
オリジナルソース第8章リストについてもう一度話しましょう
以前は、最初の章では、リストをマークするいくつかの方法について説明し、<ul>および<li>で障害のあるリストとしてそれらをマークすることの利点を研究しました。この方法は、リストの構造を識別し、すべてのブラウザとデバイスがその内容を正しく表示できるようにし、CSSでさまざまなスタイルを追加できるようにすることができます。
さまざまな環境では、個々の問題を扱う際にマークリストのすべての慣行を書くことで、本全体を記入することは難しくありません。私は本全体を埋めるつもりはありませんが、障害のあるリストに加えて、独立した章で他のいくつかのリストカテゴリについて議論する予定です。リストの使用に適したいくつかの状況を調査します。
チェックリストは、ページ構造を整理するための強力なツールであり、各独立したプロジェクトに意味を追加し、後でCSSで独立したスタイルを追加できます。
まず、番号付きのプロジェクトリストと、そのようなリストをマークする2つの方法を見てみましょう。どの方法が一目でより有益であるかを見ることができるかもしれませんが、構造化されたマーキングの重要性と適切なツールを使用して問題を解決するために、この例を再度詳細に説明します。番号付きのプロジェクトリストをマークする最良の方法はどれですか？
ステップリストをマークする計画を立てると、各プロジェクトには以前に数字があります。この目標を達成できる2つの異なる方法を研究し、特定の方法がより適用できる理由を説明します。方法A：カオスの注文
<ul>
<li> 1。玉ねぎを刻む。</li>
<li> 2。玉ねぎを3分間炒めます。</li>
<li> 3。ニンニクの3つのクローブを追加します。</li>
<li> 4。さらに3分間調理します。</li>
<li> 5。食べる。</li>
</ul>
前のリストは、料理史上最悪のレシピの1つかもしれません。しかし、簡単な例として使用することは非常に適切です。少しの塩と卵を追加する方が良いかもしれません。
方法a第1章で言及したすべての利点を得るためにこれらの手順を順序にマークすることを選択し、コンテンツに構造を追加し、ほとんどのブラウザー、スクリーンリーダー、およびその他のデバイスがこの部分を正しく処理できることを知っています。また、CSSを使用して簡単にスタイリングできます。しかし...デジタルゲーム
これは番号付きリストであるため、各プロジェクトの前に番号を追加し、各ステップの順序を特定する期間が続きますが、ステップ2と3の間に新しいステップを追加する必要がある場合はどうすればよいですか？次に、新しいステップの後に（手動で）すべてのアイテムを変更する必要があります。このリストは手間ではありませんが、100個のアイテムのリストを変更している場合、変更プロセスは非常に退屈になります。小さなドットシンボルが表示されます
この例の構造を順序のないリストでマークするため、各番号付きプロジェクトの前に小さなドットシンボルが表示されます（図8-1のように）。小さなドットシンボルが好きかもしれません。もちろん、気に入らない場合は、CSSを介して削除できますが、CSSを使用せずにこのリストを閲覧するときは、これらの小さなドットシンボルが間違いなく表示されます。
図8-1、ブラウザのCLOSE CSSリーディング方法の結果
よりシンプルで、より意味があり、メンテナンスがより簡単になります。方法Bを見てみましょう。方法B：順序リスト
<ol>
<li>玉ねぎを刻む。</li>
<li>玉ねぎを3分間炒めます。</li>
<li>ニンニクの3つのクラブを追加します。</li>
<li>さらに3分間調理します。</li>
<li>食べる。</li>
</ol>
これはほとんどの人が選択することだと確信していますが、これは、順序付けられたリストを使用するために何らかの理由で方法Aを使用していないという意味ではないので、正しい要素を使用して問題を解決します。方法Bの何が特別なのですか？自動番号付け
たぶん、各リスト項目を手動で番号付けする必要がないことがわかります。 <ol>を使用すると、順番に数値を自動的に生成します。ステップリストに100を超えるアイテムが含まれており、中央にいくつかの新しいステップを挿入する必要がある場合は、新しい<li>アイテムを正しい位置に挿入するだけで、ブラウザは魔法のように自動的に変更されます。
方法Aを使用する場合、各プロジェクトを挿入するときにすべての数値を手動で修正する必要があります。これ以上の面白い仕事を簡単に考えることができます...
図8-2、ブラウザディスプレイメソッドBの11番目のバージョンの効果は、各ステップの前に数字を自動的に追加しました。
図8-2ブラウザディスプレイメソッドB、パート2の幸せな効果
方法Bのもう1つの利点は、長いリスト項目が壊れている場合、生成された数字の後にインデントされるのに対し、メソッドAは数の下に折りたたまれることです（図8-3）
図8-3方法Aと方法Bの新しい線効果のリストの比較
順序付けられたリストのプリセット番号のスタイルは通常、アラビア語の数字（1,2,3,4,5など）ですが、CSSのリストスタイルタイプの属性を使用して、番号付けスタイルを置き換えることができます。リストスタイルタイプは、次のいずれかで選択できます：10進数：1,2,3,4、...（通常はプリセット値）上部アルファ：A、B、C、D ...下部α：A、B、C、D ...上部ローマン：アッパーローマン：I、II、III、IV ... Lower-Roman：I、II、II、II、II、II
したがって、たとえば、メソッドBに資本ローマの数を生成する必要がある場合、次のCSSを達成できます。
ol li {
リストスタイルタイプ：アッパーローマン。
}
図8-4は、ブラウザ内のこのCSSを使用した方法Bの表示効果です。ステップリストはアラビア語の数字をプリセットしなくなりましたが、ローマ数字に置き換えられます。もちろん、マークされた部品はまだまったく同じです。あなたはあなたの心を変えましたか？いくつかの小さな変更を加えて、前述の他のスタイルに変更するだけで、リストの番号付け方法をすぐに変更することができます。
図8-4ローマ数字へのスイッチの順序リスト
HTMLタイプの属性：前に、一部の人々は<ol>タグでタイプ属性を直接使用し、リストの番号付け方法をローマ数字、英語の文字などに変更する場合があります。ただし、前述のCSSルールをサポートするためには、HTML 4.01標準以降のタイプ属性を使用することはお勧めしません。したがって、Type属性を使用しないでください。代わりにCSSを使用する必要があります。
後で、Tip Extensionでは、この順序付けられたリストをCSSでスタイリングします。ただし、別のリストタイプの例を見てみましょう。
前のページ1 2 3次のページ全文を読む