Html-lists

提供：Dev Guides
移動先:案内、検索

HTML-リスト

HTMLは、情報のリストを指定するための3つの方法をWeb作成者に提供します。 すべてのリストには、1つ以上のリスト要素が含まれている必要があります。 リストには次のものが含まれます-

  • <ul> -順序付けられていないリスト。 これは、単純な箇条書きを使用してアイテムをリストします。
  • <ol> -順序付きリスト。 これは、アイテムのリストに異なる番号のスキームを使用します。
  • <dl> -定義リスト。 これにより、アイテムが辞書に配置されるのと同じ方法で配置されます。

HTML番号なしリスト

順序なしリストは、特別な順序や順序がない関連アイテムのコレクションです。 このリストは、HTML <ul> タグを使用して作成されます。 リスト内の各アイテムには黒丸が付いています。

例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

これは、次の結果を生成します-

タイプ属性

<ul>タグに type 属性を使用して、好きな箇条書きのタイプを指定できます。 デフォルトでは、ディスクです。 以下は可能なオプションです- 

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

例

以下は、<ul type = "square">を使用した例です。 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

これは、次の結果を生成します-

例

以下は、<ul type = "disc">を使用した例です- 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

これは、次の結果を生成します-

例

以下は、<ul type = "circle">を使用した例です- 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

これは、次の結果を生成します-

HTML順序リスト

箇条書きではなく番号付きリストにアイテムを配置する必要がある場合は、HTMLの順序付きリストが使用されます。 このリストは、 <ol> タグを使用して作成されます。 番号は1から始まり、<li>でタグ付けされた連続する順序付きリスト要素ごとに1ずつ増加します。

例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

これは、次の結果を生成します-

タイプ属性

<ol>タグの type 属性を使用して、好みの番号付けのタイプを指定できます。 デフォルトでは、数値です。 以下は可能なオプションです- 

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

例

以下は、<ol type = "1">を使用した例です。 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

これは、次の結果を生成します-

例

以下は、<ol type = "I">を使用した例です。 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

これは、次の結果を生成します-

例

以下は、<ol type = "i">を使用した例です。 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

これは、次の結果を生成します-

例

以下は、<ol type = "A">を使用した例です。 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

これは、次の結果を生成します-

例

以下は、<ol type = "a">を使用した例です。 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

これは、次の結果を生成します-

開始属性

<ol>タグの start 属性を使用して、必要な番号付けの開始点を指定できます。 以下は可能なオプションです- 

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

例

以下は、<ol type = "i" start = "4">を使用した例です。 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

これは、次の結果を生成します-

HTML定義リスト

HTMLとXHTMLは、*定義リスト*と呼ばれるリストスタイルをサポートします。このスタイルでは、エントリは辞書や百科事典のようにリストされます。 定義リストは、用語集、用語リスト、またはその他の名前/値リストを表示する理想的な方法です。

定義リストは、次の3つのタグを使用します。

  • <dl>-リストの開始を定義します
  • <dt>-用語
  • <dd>-用語の定義
  • </dl>-リストの終わりを定義します

例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>

   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>

</html>

これは、次の結果を生成します-

「https://www.finddevguides.com/index.php?title=Html-lists&oldid=18738」から取得
Powered by MediaWiki