Help:箇条書き

H:LIST

編集用ヘルプ目次
編集の基本
ページの編集
新規ページの作成
記事名チェック
文書の体裁
セクションと目次
箇条書き / 表の作り方
脚注 / ISBNのリンク
特殊文字
HTMLタグの使用
画像の表示
画像などの利用
ファイルページ
数式の書き方
リンクする
リンク / URL
パイプ付きリンク
言語間・ウィキ間リンク
ウィキデータ
カテゴリ
リダイレクト（ソフト）
ページの位置づけ
名前空間
サブページ
ミスなどの修正
新規ページの巡回
以前の版にページを戻す方法
ページの移動
作業の効率化
マジックワード
テンプレート（早わかり）
テンプレートの制限
条件文 / テンプレートの説明文
ナビゲーションボックス
コミュニケーション
要約欄
細部の編集
ノートページ / 過去ログ
ウィキラブ
ウィキメール / 感謝
その他
編集の競合
ページ名の働き
記事の定義
ページサイズ
音声・動画の作成と利用
棒グラフの書き方
サンドボックス
ウィキポータル

箇条書きの正しいマークアップについて説明しています。Help:ページの編集#箇条書きにて説明されているように、点を振っていく通常の箇条書きのほか、番号つき箇条書きは順番や数を示すことができ、定義の箇条書きは用語とその説明を簡単に列挙するのに便利です。これらの箇条書きを組み合わせるとき、一見ちゃんと表示されていても、箇条書きの階層が不正確となる場合があります。推奨される例、そうでない例を挙げて箇条書きのマークアップ方法を解説します。

ウィキペディアのマークアップを使って書いた記事は、表示の際に HTML に変換されます。このとき、マークアップのやり方によっては HTML が望ましい形で作られないということです。

推奨される例

定義の箇条書き

もし作ろうとしているのが、短い単語（用語や人名など）とそれに対する説明の組み合わせによるリストなら、すべて定義の箇条書きにするのが理にかなっています。特に、「登場人物とその解説」などは定義の箇条書きによって記述されるのが望ましい典型的なケースです。

表示結果	入力内容	HTML	イメージ
用語1 用語1の説明用語2 用語2の説明	; 用語1 : 用語1の説明 ; 用語2 : 用語2の説明	<dl> <dt>用語1</dt> <dd>用語1の説明</dd> <dt>用語2</dt> <dd>用語2の説明</dd> </dl>	dl dt 用語1 dd 用語1の説明 dt 用語2 dd 用語2の説明

定義の箇条書きで作られたひとつのブロック（<dl>...</dl>）の中に、用語（<dt>...</dt>）とその定義（<dd>...</dd>）がペアで現れています。これは推奨される書き方です。

箇条書き

説明文の入らない単純なものであれば、ふつうの箇条書きを使うのが望ましいでしょう。また、順序を強調したいものであれば順序つき箇条書き（番号つき箇条書き）を使うと視覚的ブラウザで見たときに順序を表す番号が付けられます。

表示結果

入力内容

HTML

イメージ

foo
- bar
hoge
- fuga
- piyo

* foo
** bar
* hoge
** fuga
** piyo

<ul>
  <li>foo
    <ul>
      <li>bar</li>
    </ul>
  </li>
  <li>hoge
    <ul>
      <li>fuga</li>
      <li>piyo</li>
    </ul>
  </li>
</ul>

ul

li foo

ul

li bar

li hoge

ul

li fuga

li piyo

foo
1. bar
hoge
1. fuga
2. piyo

# foo
## bar
# hoge
## fuga
## piyo

<ol>
  <li>foo
    <ol>
      <li>bar</li>
    </ol>
  </li>
  <li>hoge
    <ol>
      <li>fuga</li>
      <li>piyo</li>
    </ol>
  </li>
</ol>

ol

li foo

ol

li bar

li hoge

ol

li fuga

li piyo

あまり良くない例

違う種類のマークアップによる分断

表示結果	入力内容	HTML	イメージ
用語1 用語1の説明用語2 用語2の説明	* 用語1 : 用語1の説明 * 用語2 : 用語2の説明	<ul> <li>用語1</li> </ul> <dl> <dd>用語1の説明</dd> </dl> <ul> <li>用語2</li> </ul> <dl> <dd>用語2の説明</dd> </dl>	ul li 用語1 dl dd 用語1の説明 ul li 用語2 dl dd 用語2の説明

このように、箇条書きで作られたブロック（<ul>...</ul>）と、定義の箇条書きで作られたブロック（<dl>...</dl>）が交互に現れ、ブロックが分断されてしまっています。

定義の入れ子

上の例よりもちょっとはましな例です。

表示結果	入力内容	HTML	イメージ
用語1 用語1の説明用語2 用語2の説明	* 用語1 : 用語1の説明用語2 *: 用語2の説明	<ul> <li>用語1 <dl> <dd>用語1の説明</dd> </dl> </li> <li>用語2 <dl> <dd>用語2の説明</dd> </dl> </li> </ul>	ul li 用語1 dl dd 用語1の説明 li 用語2 dl dd 用語2の説明

箇条書きのブロック（<ul>...</ul>）はひとつになったものの、箇条書きの各要素（<li>...</li>）の中にいちいち定義の箇条書きのブロック（<dl>...</dl>）が発生してしまいます。また、<dl>...</dl>の中には普通、用語（<dt>...</dt>）とその定義（<dd>...</dd>）がペアで存在するのが望ましいのですが、<dd>...</dd>だけが出現していて<dl>...</dl>の使い方としてはあまり良くありません。

空行の挿入

せっかく定義の箇条書きを使っても意味がなくなってしまうことがあります。

表示結果	入力内容	HTML	イメージ
用語1 用語1の説明用語2 用語2の説明	; 用語1 : 用語1の説明 ; 用語2 : 用語2の説明（用語1の行と用語2の行との間に、改行のみの空行を一行はさんでいる）	<dl> <dt>用語1</dt> <dd>用語1の説明</dd> </dl> <dl> <dt>用語2</dt> <dd>用語2の説明</dd> </dl>	dl dt 用語1 dd 用語1の説明 dl dt 用語2 dd 用語2の説明

間に空行（何も書かれていない、改行だけの行）を入れてしまったばかりに、定義の箇条書きで作られるブロックがふたつに分かれてしまいました。このような編集は、編集段階で見やすくするために行われることがありますが、残念ながら逆効果です。

表示結果	入力内容	HTML	イメージ
用語1 用語2 用語3	* 用語1 * 用語2 ** 用語3 （各行の間に、改行のみの空行を一行はさんでいる）	<ul> <li>用語1</li> </ul> <ul> <li>用語2</li> </ul> <ul> <li> <ul> <li>用語3</li> </ul> </li> </ul>	ul li 用語1 ul li 用語2 ul li ul li 用語3
用語1 用語2 用語3	# 用語1 # 用語2 ## 用語3 （各行の間に、改行のみの空行を一行はさんでいる）	<ol> <li>用語1</li> </ol> <ol> <li>用語2</li> </ol> <ol> <li> <ol> <li>用語3</li> </ol> </li> </ol>	ol li 用語1 ol li 用語2 ol li ol li 用語3

普通の箇条書きや番号つき箇条書きにも同じことが言えますが、より深刻です。特に番号つきの場合は番号が続かなくなってしまって悲惨なことになりますし、普通の箇条書きも点が2つついてしまうなど表示が崩れてしまいます。

間違った入れ子

入れ子の箇条書きにしたつもりが、実は正しい入れ子になっていない場合があります。

表示結果	入力内容	HTML	イメージ
foo bar hoge	* foo :* bar * hoge	<ul> <li>foo</li> </ul> <dl> <dd> <ul> <li>bar</li> </ul> </dd> </dl> <ul> <li>hoge</li> </ul>	ul li foo dl dd ul li bar ul li hoge

見た目は前述の入れ子の箇条書きに似ていますが、実際には箇条書きで作られたブロック（<ul>...</ul>）が定義の箇条書きで作られたブロック（<dl>...</dl>）に分断され、入れ子の構造が破壊されてしまっています。

なぜいけないの？

HTMLがどうとか言われてもややこしいことはよく分からないし、見た目がちゃんとなるならそれでいいじゃないか、という考え方は確かに存在します。しかし、それは晴眼者（視覚に障害のない人）に偏ったものの見方だということを思い起こす必要があります。

視覚障害を持つ人は音声読み上げブラウザを利用してウィキペディアを閲覧します。その際、例えば上記の定義の入れ子の例を次のように読み上げられたらどうでしょう。

<以下はリストです>
用語1、
<以下は定義のリストです>
<以下は先の定義語の説明です>用語1の説明<説明の終わりです>
<定義のリストの終わりです>
用語2、
<以下は定義のリストです>
<以下は先の定義語の説明です>用語2の説明<説明の終わりです>
<定義のリストの終わりです>
<リストの終わりです>

どうでしょう。定義語に関する読み上げがされていないのにいきなり「先の定義語」と出てきて、意味が通りません。では、正しい例ではどうでしょうか。

<以下は定義のリストです>
<以下は定義語です>用語1、<定義語の終わりです>
<以下は先の定義語の説明です>用語1の説明<説明の終わりです>
<以下は定義語です>用語2、<定義語の終わりです>
<以下は先の定義語の説明です>用語2の説明<説明の終わりです>
<定義のリストの終わりです>

これなら大丈夫です。

もうひとつには転送量の問題があります。あまり良くない例で生成されるHTMLと、正しい例の場合とを比べてみてください。ずっと簡潔になっています。ひとつふたつなら大した差にはなりませんが、これを10も20も繰り返すと無視できない差が出ます。

バリエーション

定義語の後の改行

定義の箇条書きは、次のように書くこともできます。

表示結果	入力内容	HTML	イメージ
用語1 用語1の説明用語2 用語2の説明	; 用語1 : 用語1の説明 ; 用語2 : 用語2の説明	<dl> <dt>用語1</dt> <dd>用語1の説明</dd> <dt>用語2</dt> <dd>用語2の説明</dd> </dl>	dl dt 用語1 dd 用語1の説明 dt 用語2 dd 用語2の説明

このように、定義語の直後に改行しても結果は推奨される例とまったく同じです。説明部分が長くなるときはこちらの方が編集するときの見通しが良くなるかもしれません。

長い説明

説明部分が長くなってしまい別の段落に分けたい場合は、次のようにします。

入力内容

; 用語1
: 用語1の長い説明用語1の長い説明用語1の長い説明用語1の長い説明
: 用語1の長い説明の次の段落用語1の長い説明の次の段落用語1の長い説明の次の段落
; 用語2
: 用語2の長い説明用語2の長い説明用語2の長い説明
: 用語2の長い説明の次の段落用語2の長い説明の次の段落

表示結果	HTML	イメージ
用語1 用語1の長い説明用語1の長い説明用語1の長い説明用語1の長い説明用語1の長い説明の次の段落用語1の長い説明の次の段落用語1の長い説明の次の段落用語2 用語2の長い説明用語2の長い説明用語2の長い説明用語2の長い説明の次の段落用語2の長い説明の次の段落	<dl> <dt>用語1</dt> <dd>用語1の長い説明...</dd> <dd>用語1の長い説明の次の段落...</dd> <dt>用語2</dt> <dd>用語2の長い説明...</dd> <dd>用語2の長い説明の次の段落...</dd> </dl>	dl dt 用語1 dd 用語1の長い説明... dd 用語1の長い説明の次の段落... dt 用語2 dd 用語2の長い説明... dd 用語2の長い説明の次の段落...

用語（<dt>...</dt>）とその定義（<dd>...</dd>）が1対1のペアになっていない、あまり良いとはいえない状態ですが、ウィキペディアのマークアップだけでは<dd>...</dd>の中に段落を作る方法がないため便宜上この方法が使われます。今のところこれは許容される傾向にあるようです。

あまり説明部分が長くなるようであれば、見出しを作ってそこに通常の段落として書くことも検討してください。

定義の箇条書き中の箇条書き

定義の箇条書き中に箇条書きを用いる時には、ちょっとしたトリックを使わないと定義の箇条書きが複数のブロックに分断されてしまいます。

表示結果

入力内容

HTML

イメージ

用語1

用語1の説明

用語1に関する項目1
用語1に関する項目2

用語2

用語2の説明

用語2に関する用語1: 用語2に関する説明1
用語2に関する用語2: 用語2に関する説明2

用語3: 用語3の説明

; 用語1
: 用語1の説明
:* 用語1に関する項目1
:* 用語1に関する項目2
; 用語2
: 用語2の説明
:; 用語2に関する用語1:用語2に関する説明1
:; 用語2に関する用語2:用語2に関する説明2
; 用語3
: 用語3の説明

<dl>
<dt>用語1</dt>
<dd>用語1の説明
<ul>
<li>用語1に関する項目1</li>
<li>用語1に関する項目2</li>
</ul>
</dd>
</dl>
<dl>
<dt>用語2</dt>
<dd>用語2の説明
<dl>
<dt>用語2に関する用語1</dt>
<dd>用語2に関する説明1</dd>
<dt>用語2に関する用語2</dt>
<dd>用語2に関する説明2</dd>
</dl>
</dd>
</dl>
<dl>
<dt>用語3</dt>
<dd>用語3の説明</dd>
</dl>

dl

dt 用語1

dd 用語1の説明

ul

li 用語1に関する項目1

li 用語1に関する項目2

dl

dt 用語2

dd 用語2の説明

dl

dt 用語2に関する用語1

dd 用語2に関する説明1

dt 用語2に関する用語2

dd 用語2に関する説明2

dl

dt 用語3

dd 用語3の説明

これは入れ子の箇条書きのあとに : を挿入することで1つのブロックにすることができます。

挿入した : を消去されてしまう場合、「編集の要約欄」に「Help:箇条書き#定義の箇条書き中の箇条書き」へのリンクを張ったり、ただコロン1個の行を置くのではなく、

:<!-- バグ回避のための行「Help:箇条書き#定義の箇条書き中の箇条書き」参照 -->

と記述するなどの処置をしましょう。参照:Wikipedia:利用案内/過去ログ/編集/3#「:*」の下の「:」について

表示結果

入力内容

HTML

イメージ

用語1

用語1の説明

用語1に関する項目1
用語1に関する項目2

用語2

用語2の説明

用語2に関する用語1: 用語2に関する説明1
用語2に関する用語2: 用語2に関する説明2

用語3

用語3の説明

; 用語1
: 用語1の説明
:* 用語1に関する項目1
:* 用語1に関する項目2
:
; 用語2
: 用語2の説明
:; 用語2に関する用語1:用語2に関する説明1
:; 用語2に関する用語2:用語2に関する説明2
:
; 用語3
: 用語3の説明

<dl>
<dt>用語1</dt>
<dd>用語1の説明
<ul>
<li>用語1に関する項目1</li>
<li>用語1に関する項目2</li>
</ul>
</dd>
<dt>用語2</dt>
<dd>用語2の説明
<dl>
<dt>用語2に関する用語1</dt>
<dd>用語2に関する説明1</dd>
<dt>用語2に関する用語2</dt>
<dd>用語2に関する説明2</dd>
</dl>
</dd>
<dt>用語3</dt>
<dd>用語3の説明</dd>
</dl>

dl

dt 用語1

dd 用語1の説明

ul

li 用語1に関する項目1

li 用語1に関する項目2

dt 用語2

dd 用語2の説明

dl

dt 用語2に関する用語1

dd 用語2に関する説明1

dt 用語2に関する用語2

dd 用語2に関する説明2

dt 用語3

dd 用語3の説明

定義の中で ":" （コロン）を使う場合

定義の文言中に ":" （半角コロン）を入れると、説明部分の始まりとみなされて意図した通りに表示されません。この場合は、<nowiki>:</nowiki> と囲むか、HTMLにおける文字参照 : を使います。

表示結果	入力内容
0:0:0:0:0:0:0:0 IPv6 における未指定アドレスを表す。	; <nowiki>0:0:0:0:0:0:0:0</nowiki> : [[IPv6]] における未指定アドレスを表す。

ごく短い箇条書き

説明部分がごく短いものであれば、慣例として以下の形式もよく使われます。

表示結果	入力内容
用語1 - 用語1の説明用語2 - 用語2の説明	* 用語1 - 用語1の説明 * 用語2 - 用語2の説明

段組み表示

ごく短い箇条書き項目を多数並べる場合に段組表示を用いることもできます。

表示結果

入力内容

用語1 - 用語1の説明
用語2 - 用語2の説明
用語3 - 用語3の説明

用語4 - 用語4の説明
用語5 - 用語5の説明

{{columns-list|2|
* 用語1 - 用語1の説明
* 用語2 - 用語2の説明
* 用語3 - 用語3の説明
* 用語4 - 用語4の説明
* 用語5 - 用語5の説明
}}

段組み表示用のテンプレートは例示の{{Columns-list}}の他に各種あります。Category:段組みテンプレートに段組み表示用の各種テンプレートがまとめてあります。

見栄えにこだわらない

マークアップに対する理解不足のほかに、「こっちの方が見栄えがいいから」という理由でこれらの推奨されないマークアップをしてしまうこともあります。たとえば定義の箇条書きで、用語が強制的に太字にされるのを嫌う人もいるでしょうし、列挙するときに先頭に点がついた方が好ましいと感じる人もいるでしょう。

しかし、見栄えの好みは人それぞれであることを忘れないでください。また、あなたの環境で見えている通りに他の人の環境で見えるとは限らないのです。多くの人は標準のベクタースキンを使用していますが、ある人はケルンブルーを使用しているかもしれませんし、オリジナルのユーザースタイルシートを使用しているかもしれません。携帯電話やスマートフォンなどからウィキペディアを利用する人も少なくありません^{[注 1]}。環境が変われば、どんなに念入りに見栄えを調整しても無意味になってしまいます。

結局のところ、推奨される書き方でマークアップするのが、より多くの人が自分に適した方法（音声ブラウザも含めて）で閲覧できる一番の近道になります。

マークアップにこだわらない

ここで解説したことがあまりよく分からない、覚えきれないという場合は無視してください。マークアップに悩みながら書くよりも、その労力を素晴らしい記事を書くために費やしてください。間違ったマークアップをしてもそのうち誰かが直してくれます（これはウィキシステムの大きな利点です）。どのように直されたかを見ているうちにいずれ、より良い書き方が自然に身につくでしょう。

推奨されないマークアップを見つけたら

推奨される書き方に直した記事を元の推奨されない書き方に戻してしまう人がいたら、このページの存在を教えて直した理由を説明してあげてください。戻してしまう人の多くは初心者でしょうから、押しつけにならないよう（この文書はルールではありません）十分に注意して丁寧に説明する必要があります。Wikipedia:新規参加者を苛めないでくださいも参考に。

注釈

[脚注の使い方]

^ 『インターネット白書 2010』によると、ウィキペディアを閲覧している人の割合は、インターネットを「主にPCから利用する人」と「主に携帯電話から利用する人」との間にほとんど差はなく、約 54% です。また、両方を併用している人や、スマートフォンからの利用が多い人では、ウィキペディア利用者の割合はやや高く 2/3 程度となっています。

推奨される例

定義の箇条書き

箇条書き

あまり良くない例

違う種類のマークアップによる分断

定義の入れ子

空行の挿入

間違った入れ子

なぜいけないの？

バリエーション

定義語の後の改行

長い説明

定義の箇条書き中の箇条書き

定義の中で ":" （コロン）を使う場合

ごく短い箇条書き

段組み表示

見栄えにこだわらない

マークアップにこだわらない

推奨されないマークアップを見つけたら

注釈

関連項目