定義リストの作成に使用されるタグ。 HTML: 番号付きの箇条書きリスト。 HTML コード内の特殊なリストとネストされたリスト

リストは日常生活の一部です。 To Do リストは何を行うかを定義します。 ナビゲーション ルートには、順を追ったルートのリストが表示されます。 レシピには材料のリストと手順のリストが必要です。 リストはほとんどどこにでもあるので、インターネットでも人気がある理由が簡単にわかります。

Web サイトでリストを使用する場合、HTML では箇条書きリスト、番号付きリスト、説明リストの 3 つの異なるタイプから選択できます。 どのタイプのリストを使用するか、またリストを使用するかどうかは、コンテンツとそれを表示するための意味的に最も適切なオプションによって異なります。

HTML で使用できる 3 つの異なるタイプのリストに加えて、CSS 経由でこれらのリストのスタイルを設定する方法がいくつかあります。 たとえば、リストに指定する箇条書きの種類を選択できます。 マーカーは、正方形、円、数字、文字、または何もない場合もあります。 さらに、リストを垂直方向または水平方向に表示する方法を決定できます。 これらのオプションはすべて、Web ページのスタイルを設定する上で重要な役割を果たします。

箇条書きリスト

箇条書きリストまたは順序なしリストは、順序が関係ない関連項目の単なるリストです。 HTML で箇条書きリストを作成するには、ブロック リスト要素を使用します。

。 リスト内の個々の項目は要素でマークされます。
• .

  デフォルトでは、ほとんどのブラウザは要素に垂直マージンと左パディングを追加します。

  、および各要素の前
  • 単色のポイントを置きます。 この点はリストマーカーと呼ばれ、CSSを使用して変更できます。
    • オレンジ
    • 緑
    • 青

    箇条書きリストを表示

    番号付きリスト

    番号付きまたは順序付けされたアイテムのリスト

    箇条書きリストと非常によく似ており、個々の箇条書きも同じ方法で作成されます。 リストの主な違いは、順序付きリストの場合、項目が表示される順序が重要であることです。

    順序が重要であるため、番号付きリストでは、デフォルトの箇条書きとしてピリオドの代わりに数字が使用されます。

    1. アプリコットストリートを歩く
    2. ヴィノグラドナヤに入ります

    番号付きリストのデモンストレーション

    番号付きリストには、start や reversed などの固有の属性も使用できます。

    開始属性

    start 属性は、番号付きリストを開始する番号を指定します。 デフォルトでは、リストは 1 から始まりますが、リストを 30 またはその他の数字で始める必要がある場合もあります。 要素に start 属性を使用する場合

    そうすると、番号付きリストのカウントをどの番号から開始するかを正確に決定できます。

    start 属性は整数値のみを受け入れますが、番号付きリストではローマ数字などの異なる番号付けシステムが使用される場合があります。

    30. アプリコットストリートを歩く
    31. ヴィノグラドナヤに入ります
    32. 日陰通りに立ち寄る

    start 属性のデモンストレーション

    逆属性

    要素に追加されるときの reversed 属性

    リストを逆順に表示できます。 1 から 5 までの番号が付けられた 5 つの項目のリストは、逆にして 5 から 1 まで番号を付けることができます。

    reversed 属性はブール属性であるため、値を受け取りません。 それは真実でも偽でも構いません。 False がデフォルト値です。要素に reversed 属性が表示されると、値は true になります。

    .
    1. アプリコットストリートを歩く
    2. ヴィノグラドナヤに入ります
    3. 日陰通りに立ち寄る

    逆属性のデモンストレーション

    値属性

    value 属性は個々の要素に適用できます

    1. 番号付きリスト内で値を変更するには、リスト内の値を変更します。 value 属性を持つリスト項目の下に表示されるリスト項目の数は、それに応じて再計算されます。

       たとえば、2 番目のリスト項目の value 属性が 9 に設定されている場合、そのリスト項目の番号は 9 番目であるかのように出力されます。 後続のすべてのリスト項目には 9 から始まる番号が付けられます。

       1. アプリコットストリートを歩く
       9. ヴィノグラドナヤに入ります
       10. 日陰通りに立ち寄る

       値属性のデモンストレーション

       説明リスト

       オンラインで目にするもう 1 つのタイプのリスト (ただし、箇条書きリストや番号付きリストほど頻繁ではありません) は、説明のリストです。 このようなリストは、たとえば用語集のように、いくつかの用語とその説明を識別するために使用されます。

       HTML での説明リストの作成は、ブロック要素を使用して行われます。

       。 要素を使用する代わりに

       リスト項目をマークアップするには、説明リストに 2 つのブロック要素が必要です。

       その期間と

       説明のために。

       説明リストには、多くの用語と説明を次々に含めることができます。 さらに、そのようなリストには、説明ごとに複数の用語が含まれる場合や、用語ごとに複数の説明が含まれる場合があります。 1 つの用語が複数の意味を持ち、複数の説明が適用される場合があります。 逆に、1 つの説明が複数の用語に適合する場合もあります。

       説明リスト要素を追加する場合

       要素に移動する必要があります

       。 用語とその直後の説明は相互に関連しています。 したがって、これらの要素の順序が重要です。

       デフォルトでは、要素

       要素のような垂直パディングが含まれます

       そして
       。 さらに、要素
       デフォルトでは左マージンが含まれます。
       研究
       特に書籍を通じて、教えられている主題についての知識を得るために時間と注意を費やします。
       プロジェクト
       建物、衣服、その他の物品が建設または製造される前にどのように見え、機能するかを示す、提出された計画または図面。
       有形の物体に具現化または実現される前の既存の目標、計画、または意図。
       仕事
       仕事
       人の通常の職業、専門職、または技術。
       説明リストのデモ
       入れ子になったリスト
       リストを非常に強力にする機能は、ネスト機能です。 各リストは別のリスト内でネストでき、複数回ネストできます。 ただし、リストを無限にネストできるからといって、自由にネストできるわけではありません。 リストは、最もセマンティックな意味を保持する場所に特に予約される必要があります。
       リストをネストするコツは、各リストとリスト項目の開始位置と終了位置を把握することです。 特に箇条書きリストと番号付きリストについて言えば、内部に直接表示できる唯一の要素です。
       そして
       要素です
       1. 。 繰り返しますが、要素の直接の子孫として配置できる唯一の要素です。
          そして
          、 は
          1. .

             ただし、要素内では

          2. 任意の要素を含む、要素の標準セットを追加できます。
             または
             .

             リストをネストするには、リスト項目を閉じる前に新しいリストを開始します。 ネストされたリストが完了して閉じたら、それを囲んでいるリスト項目を閉じて、元のリストを続行します。

             1. 犬の散歩
             2. 洗濯物をたたむ
             3. ストアに行って購入します。
                • 牛乳
                • パン
                • チーズ
             4. 芝を刈る
             5. 夕食を作る

             入れ子になったリストのデモ

             ネストされたリストは少し混乱し、間違って実行すると不要なスタイルが表示される可能性があるため、簡単に見てみましょう。 要素

             そして
             要素のみを含めることができます
             1. 。 要素
             2. 必要な通常の要素を含めることができます。 ただし、要素は、
             3. いずれかの要素の直接の子孫である必要があります
                、 または
                .

                リストが他のリスト内にネストされている場合、そのマーカーはネストの深さに応じて変化することにも注意してください。 前の例では、番号付きリスト内にネストされた箇条書きリストは、マーカーとしてドットの代わりに円を使用します。 この変更は、箇条書きリストが番号付きリストの 1 レベル内側にネストされているために発生します。

                幸いなことに、どのレベルでも箇条書きの外観を制御できます。これについては次に説明します。

                リスト項目のスタイリング

                箇条書きリストと番号付きリストでは、デフォルトでリスト項目の箇条書きが使用されます。 箇条書きリストの場合は単色のドットになる傾向があり、番号付きリストの場合は数字になる傾向があります。 CSS を使用すると、これらのマーカーのスタイルと位置をカスタマイズできます。

                リストスタイルタイプのプロパティ

                list-style-type プロパティは、リスト項目マーカーの内容を設定するために使用されます。 利用可能な値は平方数や小数からアルメニア数字まで多岐にわたり、CSS スタイルを要素に追加できます。

                ,
                または
                1. .

                   list-style-type プロパティの任意の値を箇条書きリストまたは番号付きリストに追加できます。 これを念頭に置いて、箇条書きリストでは番号付けを使用し、番号付きリストでは数字以外の箇条書きを使用できます。

                   • オレンジ
                   • 緑
                   • 青

                   Ul (リストスタイルタイプ: square;)

                   list-style-type プロパティのデモ

                   リストスタイルタイプの値

                   前述したように、list-style-type プロパティにはいくつかの異なる値が含まれています。 次の表に、これらの値とそれに対応する内容を示します。

                   画像をリストマーカーとして使用する

                   list-style-type プロパティのデフォルト値では不十分で、独自のリスト マーカーを定義したい場合が来るかもしれません。 これは、各要素に背景画像を配置することで最もよく行われます。

                2. .

                   このプロセスには、デフォルトの list-style-type プロパティ値を削除し、要素に背景画像とマージンを追加することが含まれます。

                3. .

                   詳細 - list-style-type プロパティを none に設定すると、既存のリスト マーカーが削除されます。 背景プロパティは背景画像をその位置とともに設定し、必要に応じて繰り返します。 また、padding プロパティは、テキストの左側に背景画像用のスペースを提供します。

                   • オレンジ
                   • 緑
                   • 青

                   Li (背景: url("arrow.png") 0 50% 繰り返しなし; リストスタイルタイプ: なし; パディング左: 12px; )

                   画像をマーカーとして表示する

                   list-style-position プロパティ

                   デフォルトでは、リストの箇条書きは要素内のコンテンツの左側に配置されます。

                4. 。 この配置スタイルは、Outside として説明されます。これは、すべてのコンテンツがリスト マーカーのすぐ右側、外側に表示されることを意味します。 list-style-position プロパティを使用すると、デフォルト値のOutside を inside または継承に変更できます。

                   外側はリストマーカーを要素の左側に配置します。

                5. また、このマーカーの下にコンテンツが流れることを許可しません。 内側の値 (めったに使用されずに表示されます) は、要素の最初の行にリスト マーカーを配置します。
                6. 必要に応じてコンテンツがマーカーの周りを囲むようにします。
                   • カップケーキ...
                   • ふりかけ...

                   Ul (リストスタイル位置: inside; )

                   リスト形式の位置プロパティのデモ

                   一般的なプロパティ リスト スタイル

                   最近説明したリスト プロパティ list-style-type と list-style-position は、1 つの汎用プロパティ list-style に組み合わせることができます。 このプロパティでは、リストのプロパティ値の 1 つまたはすべてを同時に使用できます。 これらの値の順序は、 list-style-type の後に list-style-position が続く必要があります。

                   Ul (リスト スタイル: 内側の円; ) ol (リスト スタイル: Lower-Roman; )

                   横型リスト表示

                   リストを垂直方向ではなく水平方向に表示したい場合があります。 おそらく、リストを複数の列に分割してナビゲーション リストを構築したり、複数のリスト項目を 1 行に配置したりすることができます。 コンテンツと希望する外観に応じて、リストを 1 行で表示するにはいくつかの方法があります。たとえば、要素の表示プロパティ値を取得するなどです。

                7. inline や inline-block のように、または float プロパティ経由で。

                   リスト表示

                   リストを 1 行で表示する最も速い方法は、要素を指定することです。

                8. display プロパティの値は inline または inline-block です。 これにより、すべての要素が配置されます
                9. 各リスト項目の間に等間隔で 1 行に記述します。

                   要素間のスペースがある場合、

                10. 問題の原因となっている場合は、レッスン 5「コンテンツの配置」で説明したのと同じ手法を使用して削除できます。

                    多くの場合、inline 値の代わりに inline-block 値を使用します。 inline-block 値を使用すると、要素に垂直方向のパディングやその他のスペースを簡単に追加できます。

                11. ですが、インライン値はそうではありません。

                    display プロパティの値が inline または inline-block に変更されると、ドット、数字、その他のリスト マーカーが削除されます。

                    • オレンジ
                    • 緑
                    • 青

                    Li (ディスプレイ: インラインブロック; マージン: 0 10px; )

                    インラインブロックを使用したリストのデモ

                    float を含むリスト

                    表示プロパティを inline または inline-block に変更するのは簡単ですが、リスト マーカーが削除されます。 必要な場合は、各要素に float を追加します。

                12. 表示プロパティを変更するよりも優れたオプションです。

                    すべての要素のインストール

                13. left のような float プロパティはすべての要素を水平方向に整列させます
                14. 隙間なく真横に並べてあります。 float を使用すると、
                15. 、リスト マーカーはデフォルトで表示され、項目の上に配置されます。
                16. 彼の隣に。 リスト マーカーが他の項目の上に表示されないようにするには
                17. 、水平方向のマージンまたはパディングを追加する必要があります。
                    • オレンジ
                    • 緑
                    • 青

                    Li (フロート: 左; マージン: 0 20px; )

                    float を使用したリストのデモ

                    他のフローティング要素と同様に、これによりページの流れが中断されます。 フロートをクリアしてページを通常のフローに戻すことを忘れてはなりません。最も一般的な方法は、clearfix を使用することです。

                    ナビゲーションリストの例

                    私たちは、順序なしリストを使用するナビゲーション メニューを設計したり見つけたりすることがよくあります。 これらのリストは通常​​、前述の 2 つの方法のいずれかを使用して水平にレイアウトされます。 たとえば、ここでは、順序なしリストを使用してレイアウトされた水平ナビゲーション メニューを示します。

                18. inline-block として表示されます。

                    Navigation ul ( フォント: ボールド 11px "Helvetica Neue"、Helvetica、Arial、サンセリフ; マージン: 0; パディング: 0; テキスト変換: 大文字; ) .navigation li ( display: inline-block; ) .navigation a (背景: #395870; 背景: 線形グラデーション(#49708f, #293f50); ボーダー右: 1px ソリッド rgba(0, 0, 0, .3); カラー: #fff; パディング: 12px 20px; テキスト装飾: none; ) .navigation a:hover (background: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) .navigation li:last-child a ( border-right: 0; border-radius: 0 4px 4px 0; )

                    ナビゲーションリストのデモ

                    練習中

                    HTML と CSS でリストを作成する方法がわかったので、Styles Conference サイトを見て、リストをどこで使用できるかを見てみましょう。

                    要素内のナビゲーション メニューになりました

                    そして