跳转到内容

Help:列表

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

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

如同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:不要傷害新手も参考に。

關連項目