HTML - リスト

■ページ目次

リストの基本
順序なしリスト
順序ありリスト
定義リスト

■リストの基本

おおきく分けると、つぎの種類があります。

基本的には以下のような構造になります。

 リストの種類を指定する開始タグ(<ul> または <ol>)
     リストの項目のタグ(<li> ... </li>)
 リストの終了タグ(</ul> または </ol>)

Top

■順序なしリスト

 <ul type="マーク">
     <li type="マーク">内容</li>
 </ul>
          マーク = "disc" | "circle" | "square"

■例題

順序なしリストの例です。(unorderedlist01.html)


 <!-- unorderedlist01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 <ul>
     <li>女の子</li>
     <li>誕生日は12月14日</li>
 </ul>
 </body>
 </html>

□ 実行結果

Top

■順序ありリスト

 <ol type="数字表記">
     <li type="数字表記">内容</li>
 </ol>
          数字表記 = "A" | "a" | "I" | "i" | "1"

■例題

順序ありリストの例です。(orderedlist01.html)


 <!-- orderedlist01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 <ol>
     <li>女の子</li>
     <li>誕生日は12月14日</li>
 </ol>
 </body>
 </html>

□ 実行結果

Top

■定義リスト

 <dl>
     <dt>用語</dt>
     <dd>説明</dd>
 </dl>

■例題

定義リストの例です。(definitionlist01.html)


 <!-- definitionlist01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 <dl>
     <dt>性別</dt>    
     <dd>女の子</dd>  
     <dt>誕生日</dt>  
     <dd>12月14日</dd>
 </dl>
 </body>
 </html>

□ 実行結果

Top