跳转到内容

Help:列表

维基百科,自由的百科全书

这是本页的一个历史版本,由RalfX留言 | 贡献2007年1月10日 (三) 16:31编辑。这可能和当前版本存在着巨大的差异。

如同Wikipedia:如何編輯頁面#版式所述,列表寫法的標記具有許多種寫法存在。但是其中有乍看之下為正常表示,但有些實際上在看不到的地方裡呈現並不理想的狀態,成為各式問題的原因。

您使用維基百科的標記所編輯的文章,在被閱覽時會透過名為MediaWiki的軟體,轉換成網頁瀏覽器能夠辨識的形式XHTML。此依標記的方式可能無法產生理想的XHTML格式。本條目頁面在此舉出被建議的範例和非推薦的範例,來加以解說列表寫法的標記方式。

※給知道HTML不過不清楚XHTML是什麼的人:為了正確性在本頁面使用XHTML一詞,不過將其全改為HTML大致上都能說得通。總之在此請只要想成是「比HTML稍微了不起」就好了。有興趣的話可以到XHTML的條目瞭解內容。

被建議的範例

定義的列表寫法

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

表示結果 入力内容 XHTML イメージ
用語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>)がペアで現れています。これは推奨される書き方です。

列表寫法

説明文の入らない単純なものであれば、ふつうの箇条書きを使うのが望ましいでしょう。また、その順序に意味があるものであれば番号付き箇条書きを使うのがよりふさわしいです。

表示結果 入力内容 XHTML イメージ
  • 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
  1. foo
    1. bar
  2. 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

常見到的不太好的例子

例1

表示結果 入力内容 XHTML イメージ
  • 用語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>)が交互に現れ、ブロックが分断されてしまっています。

例2

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

表示結果 入力内容 XHTML イメージ
  • 用語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>の使い方としてはあまり良くありません。

例3

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

表示結果 入力内容 XHTML イメージ
用語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の説明

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

表示結果 入力内容 XHTML イメージ
  • 用語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. 用語1
  1. 用語2
    1. 用語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つついてしまうなど表示が崩れてしまいます。

為什麼不可以?

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

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

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

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

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

これなら大丈夫ですね。

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

各種變化

在用語後換行

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

表示結果 入力内容 XHTML イメージ
用語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の長い説明の次の段落
表示結果 XHTML イメージ
用語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>の中に段落を作る方法がないため便宜上この方法が使われます。今のところこれは許容される傾向にあるようです。

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

其他

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

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

別拘泥於門面

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

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

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

別拘泥於標記法

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

發現有不被建議的標記法時

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

關連項目