Help:箇条書き

ウィキペディア日本語版のヘルプページです。

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

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

定義の箇条書き[編集]

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

; 用語1 : 用語1の説明 ; 用語2 : 用語2の説明

<dl>   <dt>用語1</dt>   <dd>用語1の説明</dd>   <dt>用語2</dt>   <dd>用語2の説明</dd> </dl> 

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

箇条書き[編集]

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

* 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> 

# 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> 

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

* 用語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>...</ul>）と、定義の箇条書きで作られたブロック（<dl>...</dl>）が交互に現れ、ブロックが分断されてしまっています。

定義の入れ子[編集]

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

* 用語1 *: 用語1の説明 * 用語2 *: 用語2の説明

<ul>   <li>用語1     <dl>       <dd>用語1の説明</dd>     </dl>   </li>   <li>用語2     <dl>       <dd>用語2の説明</dd>     </dl>   </li> </ul> 

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

空行の挿入[編集]

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

; 用語1 : 用語1の説明  ; 用語2 : 用語2の説明

<dl>   <dt>用語1</dt>   <dd>用語1の説明</dd> </dl> <dl>   <dt>用語2</dt>   <dd>用語2の説明</dd> </dl> 

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

* 用語1  * 用語2  ** 用語3

<ul>   <li>用語1</li> </ul> <ul>   <li>用語2</li> </ul> <ul>   <li>     <ul>       <li>用語3</li>     </ul>   </li> </ul> 

# 用語1  # 用語2  ## 用語3

<ol>   <li>用語1</li> </ol> <ol>   <li>用語2</li> </ol> <ol>   <li>     <ol>       <li>用語3</li>     </ol>   </li> </ol> 

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

間違った入れ子[編集]

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

* foo :* bar * hoge

<ul>   <li>foo</li> </ul> <dl>   <dd>     <ul>       <li>bar</li>     </ul>   </dd> </dl> <ul>   <li>hoge</li> </ul> 

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

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

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

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

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

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

これなら大丈夫です。

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

定義語の後の改行[編集]

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

; 用語1 : 用語1の説明 ; 用語2 : 用語2の説明

<dl>   <dt>用語1</dt>   <dd>用語1の説明</dd>   <dt>用語2</dt>   <dd>用語2の説明</dd> </dl> 

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

長い説明[編集]

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

入力内容

; 用語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> 

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

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

定義の箇条書き中の箇条書き[編集]

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

; 用語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> 

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

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

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

と記述するなどの処置をしましょう。参照:Wikipedia:利用案内/過去ログ/編集/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> 

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

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

; <nowiki>0:0:0:0:0:0:0:0</nowiki> : [[IPv6]] における未指定アドレスを表す。

ごく短い箇条書き[編集]

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

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

段組み表示[編集]

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

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

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

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

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

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

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

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

• Wikipedia:箇条書き - ガイドライン
• Help:ページの編集#箇条書き - マークアップ方法
• Wikipedia:スタイルマニュアル
• Wikipedia:雑多な内容を箇条書きした節を避ける
• Help:ウィキテキストにおけるHTML