EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

HTMLリスト

リストは関連するコンテンツを整理します。HTMLは3種類のリストを提供します：順序なしリスト（箇条書き）、順序付きリスト（番号付き）、定義リスト（用語＋説明）。

順序なしリスト

<ul>（順序なしリスト）と <li>（リスト項目）を組み合わせて箇条書きリストを作成します ― メニュー、カテゴリー、機能一覧など、順序が重要でないコンテンツに最適です。

サンプル

HTML 
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
▶ 試してみよう

順序付きリスト

<ol>（順序付きリスト）は番号付きの項目を生成します ― 手順書、ランキング、プロセスガイドなどに最適です。

サンプル

HTML 
<ol>
<li>エディターを開く</li>
<li>HTMLを書く</li>
<li>.htmlファイルとして保存する</li>
<li>ブラウザで開く</li>
</ol>
▶ 試してみよう
📌 ネストされたリスト：リストは互いにネストできます。<li> の中に <ul> や <ol> を配置して、複数レベルの階層を作成できます。多階層のドロップダウンナビゲーションメニューは、ネストされたリストを使って構築されます。

定義リスト

<dl>（定義リスト）は一連の <dt>（用語）と <dd>（説明）を含み、用語集、メタデータ、Q&A形式に最適です。

サンプル

HTML 
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language、ウェブページの骨格</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets、ウェブページの見た目を制御</dd>
</dl>
▶ 試してみよう

折りたたみリスト

<details> と <summary> はHTML5のタグで、展開/折りたたみ可能なコンテンツブロックを作成します ― FAQセクションや折りたたみ可能なドキュメンテーションメニューによく使われます。<summary> の見出しをクリックすると、展開/折りたたみ状態が切り替わります。

サンプル

HTML 
<details>
<summary>HTMLとは？</summary>
<p>HTMLはウェブページを作成するためのHyperText Markup Languageです。</p>
</details>

<details open>
<summary>CSSとは？</summary>
<p>CSSはウェブページのスタイリングとレイアウトを制御します。</p>
</details>
▶ 試してみよう
📌 open属性：<details> に open 属性を追加すると、コンテンツがデフォルトで展開された状態になります（open あり＝展開、なし＝折りたたみ）。ブラウザは <summary> に自動的に展開/折りたたみ矢印を追加します ― 追加のCSSやJavaScriptは不要です。

❓ よくある質問

Q <ul>と<ol>の違いは何ですか？いつ使うのですか？
A <ul>は順序なしリストで、箇条書き記号（点、四角など）でマークされ、順序のない項目（ナビゲーションメニュー、機能リスト、要点など）に適しています。<ol>は順序付きリストで、数字や文字でマークされ、特定の順序のある項目（ステップバイステップの指示、ランキング、チュートリアルの概要など）に適しています。選択は、項目間に順序関係があるかどうかに基づいて行います。
Q リストをネスト（入れ子）にすることはできますか？何レベルまで深くできますか？
A はい、制限はありません。<li>の中に<ul>または<ol>を配置してサブリストを作成します。一般的なシナリオ：マルチレベルディレクトリ、ツリーメニュー、アウトライン構造。ただし、3〜4レベル以内に抑えることをお勧めします。深いネストは可読性を損ない、モバイルでの表示が不十分になります。ネストする際に<ul>と<ol>を混在させることができます。例えば、外側を順序付き、内側を順序なしにするなどです。
Q <dl>定義リストとは何ですか？<ul>/<ol>とはどう違うのですか？
A <dl>（定義リスト）は用語と説明のペアに設計されており、<dt>（用語）と<dd>（説明）で構成されます。典型的なシナリオ：FAQ、用語集、製品仕様、メタデータ。<ul>/<ol>は「リスト項目」のコレクションであるのに対し、<dl>は「キーと値のペア」のコレクションです。HTML5では、著者情報、連絡先詳細、その他のメタデータにも<dl>を使用できます。

📖 まとめ

📝 練習問題

  1. メニューを作成する： 順序なしリストを使って、ホーム、製品情報、会社概要、お問い合わせへのリンクを持つサイトナビゲーションメニューを作成してください。
  2. ネストされたリスト： ネストされたリストを作成してください。外側の順序付きリスト（手順）の中に、各手順の注意事項を内側の順序なしリストとして含めます。
100%