高品質なテンプレート、簡単にカスタマイズ可能 コンテンツをすぐにダウンロード 1万を超える検証済みのレビュー ドイツ製の品質
テストする
HTML＆CSSの初心者向け

HTML & CSSの初心者向け（パート06）：リスト

チュートリアルのすべてのビデオ HTML＆CSS入?

HTMLにはさまざまなリストタイプがあります。最初に挙げられるのは順序なしリストです。このタイプのリストでは、各リスト項目には箇条書き記号（ボリットと呼ばれる）が付いています。

順序なしリストはul要素で始まります。リストの各項目はli要素で区別されます。

<p>フォーラムの最新情報</p>
<ul>
  <li>CSSは実行されません</li>
  <li>1940年代のハリウッドスタイルを展示</li>
  <li>CSSのドロップダウンリスト</li>
  <li>PHPの接続/切断</li>
  <li>私の小さな展示室 -初心者がアドバイスを求める</li>
</ul>

ここではブラウザでの結果を見てみましょう:

HTML＆CSSの初心者向け（パート06）：リスト

各投稿の前に箇条書き記号が挿入されます。これは通常、ブラウザが決定します。リストの表示を変更できる属性はありますが、基本的には使用されなくなりました。代わりにCSSプロパティが活用されます。

順序なしリストはネスト（入れ子構造）することも可能です。まずは次の図をご覧ください:

HTML＆CSS初心者向け（パート06）：リスト



このネストの意味が明確になります。

その構文は以下のようになります:

<ul>
  <li>チュートリアル
    <ul>
      <li>2D</li>
      <li>3D</li>
      <li>Web</li>
    </ul>
  </li>
  <li>ビデオトレーニング
    <ul>
      <li>3D</li>
      <li>メディアデザイン</li>
      <li>Web</li>
    </ul>
  </li>
  <li>ヒント</li>
  <li>ショップ</li>
</ul>



リスト項目内には別のリストを配置することができます。実際、必ずしも順序なしリストである必要はありません。実際には、他のリストタイプ（本チュートリアルで紹介される）も挿入できます。

HTML5では、終了タグ </li> の使用が必須ではありませんが、可読性の向上のため、常に閉じることをお勧めします。構文的には、次のようなものも有効です:

<p>フォーラムからの最新情報</p>
<ul>
  <li>CSSは実行されません
  <li>1940年代のハリウッドスタイル
  <li>CSSのドロップダウンリスト
  <li>PHPの接続/切断
  <li>私の小さな展示室 -初心者がアドバイスを求める
</ul>

番号付きリスト

順序なしリストに加えて、番号付きリストも定義できます。こちらも最初に、番号付きリストが実際に何を示しているかを示す画像をご覧ください。

HTML＆CSSの初心者向け（パート06）：リスト

リスト項目の前に連続する数字が付けられます。番号付きリストはol要素で始まります。

次の例では、この要素の使い方を示しています。

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>XML</li>
</ol>



順序なしリストと同様に、個々のエントリはli要素によってマークされます。

理論的には、順序なしリストもネストできます。

<ol>
  <li>チュートリアル
    <ol>
      <li>2D</li>
      <li>3D</li>
      <li>Web</li>
    </ol>
  </li>
  <li>ビデオトレーニング
    <ol>
      <li>3D</li>
      <li>メディアデザイン</li>
      <li>Web</li>
    </ol>
  </li>
  <li>ヒント</li>
  <li>ショップ</li>
</ol>

ただし、ブラウザでの結果はあまり見栄えのよいものではありません。

HTML&CSS 初心者向け（第06部）：リスト



このようにして番号付けされるわけではありません:

1. チュートリアル 2D

1.1 3D

1.2 Web

  1. ビデオトレーニング 3D

    2.1 メディアデザイン

    2.2 Web
  2. ヒント
  3. ショップ

    HTMLだけではこれはできません。実際、そのようなスキーマでのコンテンツ番号を自動的に付けるにはCSSを使用する必要があります。

定義リスト

もう1つのリストのバリエーションは定義リストです。こちらも、最終的にブラウザにどのように表示されるかを示す例をまず示します:

HTMLとCSSの初心者向け（パート06）：リスト



定義リストの主な適用分野は用語集です。以下は、前述の出力を導いた構文です:

<dl>
   <dt>AM</dt>
      <dd>AM - Air Mail</dd>
      <dd>AM - Air Marshal</dd>
      <dd>AM - Amberg</dd>
      <dd>AM - Americium</dd>
      <dd>AM - Amstetten</dd>
   <dt>AN</dt>
      <dd>AN - above named</dd>
      <dd>AN - Access Node</dd>
      <dd>AN - Ancona</dd>
</dl>

定義リストには、常に3つの要素があります。リストの開始はdl要素で行われます。これが外部構造になります。定義される用語はdt要素によって示されます。これが実際に定義される用語です。定義の説明はdd要素を通じて提供されます。

定義リストの入れ子も可能です。これは他のリストのバリエーションと同じように機能します。

定義リストのデフォルトの表示方法は、再度ブラウザによって決定されます。最終的には、必要なレイアウトをCSSで自由に設定できます。

以前のHTMLバージョンにはメニューリストとディレクトリリストが存在しました。使用された要素はmenuとdirです。しかし、dir要素はHTML5に含まれていません。menuは異なり、新たに実装され、コンテキストメニューやツールバーで使用できるようになる予定です。以下は、W3Cがmenuの典型的な使用法をどのように想定しているかの例です：

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="fnew()">新規作成...</button>
   <button type="button" onclick="fopen()">開く...</button>
   <button type="button" onclick="fsave()">保存</button>
   <button type="button" onclick="fsaveas()">名前を付けて保存...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="ecopy()">コピー</button>
   <button type="button" onclick="ecut()">カット</button>
   <button type="button" onclick="epaste()">ペースト</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">ヘルプ</a></li>
   <li><a href="about.html">情報</a></li>
  </menu>
 </li>
</menu>

現時点では、まだどのブラウザもこれをサポートしていません。

HTML＆CSS初心者向け（パート06）: リスト



そのため、現時点ではmenuを使用すべきではありません。

リストの装飾

リストの装飾についてもう1つの注意事項があります。多くのウェブサイトでは、リストの装飾に適切なHTML属性が使用されます。たとえば、<ul type="square">を使用すると、箇条書きリストのエントリの前に四角が表示されます。

HTML＆CSSの初心者向け（パート06）：リスト



また、番号付きリストの番号のスタイルを指定することもできます。

<ol type="A">



ただし、提供されているすべてを使用すべきではないことに注意してください。適切なCSSプロパティがより適しています。リストを要件に合わせてカスタマイズするには、これらのプロパティを実際に使用するべきです。詳細なCSS情報はこのシリーズの中で提供されます。

以前のテキストチュートリアル HTML ＆ CSS初心者向け（第05部）：テキストを飾る
HTMLとCSSを始める人のための（第07部）：テーブル（01） 次のテキストチュートリアルへ