<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>みかん</li>
</ul>

/* CSS: マーカーのカスタマイズ */
ul {
  list-style-type: disc;    /* デフォルト */
  list-style-type: circle;  /* 白丸 */
  list-style-type: square;  /* 四角 */
  list-style: none;         /* マーカーなし */
}

ol — 順序付きリスト

ol（ordered list）は順序に意味があるリストに使う。type・start・reversed 属性でカスタマイズできる。

デフォルト (type="1")

材料を準備する
混ぜ合わせる
焼く

type="A" (アルファベット大文字)

項目 A
項目 B
項目 C

type="i" (ローマ数字小文字)

第一章
第二章
第三章

start="5" (5から開始)

手順 5
手順 6
手順 7

reversed (逆順)

3位: ブロンズ
2位: シルバー
1位: ゴールド

<!-- デフォルト: 1, 2, 3... -->
<ol>
  <li>手順1</li>
  <li>手順2</li>
</ol>

<!-- type: 1(数字) / A(大文字) / a(小文字) / I(ローマ大) / i(ローマ小) -->
<ol type="A">
  <li>項目 A</li>
</ol>

<!-- start: 開始番号を指定 -->
<ol start="5">
  <li>手順 5から開始</li>
</ol>

<!-- reversed: 逆順カウント -->
<ol reversed>
  <li>3位</li>
  <li>2位</li>
  <li>1位</li>
</ol>

dl / dt / dd — 定義リスト

dl（description list）は用語と説明のペアをマークアップする。dt（term）が用語、dd（description）が説明。用語集・メタデータ・FAQ などに適している。

HTML: HyperText Markup Language の略。ウェブページの構造を記述するマークアップ言語。
CSS: Cascading Style Sheets の略。HTML 要素の見た目（色・レイアウトなど）を定義するスタイルシート言語。
JavaScript: ウェブページに動的な振る舞いを加えるスクリプト言語。ブラウザ上でもサーバー上でも動作する。

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language の略。ウェブページの構造を記述する言語。</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets の略。スタイルを定義する言語。</dd>
</dl>

/* 1つの dt に複数の dd も可 */
<dl>
  <dt>果物</dt>
  <dd>りんご</dd>
  <dd>バナナ</dd>
</dl>

ネストしたリスト

li の中に ul や ol を入れることでネストできる。階層が深くなるとデフォルトのマーカーが自動的に変わる。

フロントエンド
- HTML
  - セマンティクス
  - フォーム
- CSS
- JavaScript
バックエンド
- Node.js
- Python

<ul>
  <li>
    フロントエンド
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    バックエンド
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

比較表: ul / ol / dl

要素	名称	順序	子要素	適した用途
`ul`	順序なしリスト	なし	`li`	ナビゲーション、箇条書き、特徴一覧
`ol`	順序付きリスト	あり	`li`	手順・レシピ・ランキング・目次
`dl`	定義リスト	なし	`dt` / `dd`	用語集・FAQ・メタデータ・仕様表

Tips: CSS list-style と @counter-style

list-style は list-style-type・list-style-image・list-style-position のショートハンド。list-style: none でマーカーを非表示にし、ナビゲーションメニューなどに使うことが多い。
NEW@counter-style ルールを使うと、カスタムカウンタースタイルを定義できる。絵文字や独自記号をマーカーにする際に便利。
list-style-type: disc | circle | square | decimal | lower-alpha | lower-roman など多数の値がある。
ナビゲーションリストには role="list" を付けると、list-style: none を適用してもスクリーンリーダーがリストとして認識しやすくなる（SafariのVoiceOver対応）。
ol の type 属性はプレゼンテーション目的では非推奨で、CSS の list-style-type を使うことが推奨されている。

🤖 AIプロンプトテンプレート

以下の要件を満たす、HTMLリストのHTML・CSSサンプルを作成してください。

- `<ul>`（順不同）・`<ol>`（順序付き）・`<dl>`（説明リスト）の使い分けを示すこと
- `<dl>` は `<dt>`（用語）と `<dd>`（説明）のペアで構成すること
- ネストされたリスト（リスト内リスト）の正しい書き方を含めること
- `list-style-type` や `list-style-image` を使ったカスタムリストスタイルを実装すること
- ナビゲーションメニューとして `<ul>` を使う実例も含めること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧 ☕ Buy Me a Coffee

リスト