Wikipedia:箇条書きのマークアップ

出典: フリー百科事典『ウィキペディア（Wikipedia）』

Wikipedia:編集の仕方#箇条書きにあるように、箇条書きのマークアップについては様々なやり方が存在します。しかしその中には、一見ちゃんと表示されていても見えないところであまりよろしくない状態になっているものもあり、度々トラブルの原因になっています。

あなたがウィキペディアのマークアップを使って書いた記事は、閲覧されるときにMediaWikiというソフトウェアを通して、Webブラウザが理解できる形式であるXHTMLに変換されます。このとき、マークアップのやり方によってはXHTMLが望ましい形で作られません。このページでは、推奨される例とそうでない例を挙げて箇条書きのマークアップ方法を解説します。

※HTMLは知っているけどXHTMLって何？という人へ - 正確さのためにこのページではXHTMLという言葉を使いますが、全てHTMLと置き換えてもほぼそのまま通じます。とりあえずは「HTMLよりちょっと偉い」くらいに考えておいてください。興味があったらXHTMLの記事を見てみるのもいいかもしれません。

[編集] 推奨される例

[編集] 定義の箇条書き

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

; 用語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
: 用語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>）が交互に現れ、ブロックが分断されてしまっています。

[編集] 例2

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

* 用語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>の使い方としてはあまり良くありません。

[編集] 例3

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

; 用語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つついてしまうなど表示が崩れてしまいます。

[編集] なぜいけないの？

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

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

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

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

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

これなら大丈夫ですね。

もうひとつには転送量の問題があります。例1や例2で生成されるXHTMLと、正しい例の場合とを比べてみてください。ずっと簡潔になっています。ひとつふたつなら大した差にはなりませんが、これを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の説明
* 用語2 - 用語2の説明

[編集] 見栄えにこだわらない

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

しかし、見栄えの好みは人それぞれであることを忘れないでください。また、あなたの環境で見えている通りに他の人の環境で見えるとは限らないのです。多くの人は標準のMonoBookスキンを使用していますが、ある人はケルンブルーを使用しているかも知れませんし、オリジナルのユーザースタイルシートを使用しているかも知れません。環境が変われば、どんなに念入りに見栄えを調整しても無意味になってしまいます。

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

[編集] マークアップにこだわらない

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

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

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

[編集] 関連項目

• Wikipedia:スタイルマニュアル
• Wikipedia:編集の仕方