Help:箇条書き
[Wikipedia|▼Menu]
.mw-parser-output .module-shortcutboxplain{float:right;border:1px solid #aaa;background:#fff;margin:0 0 0 1em;padding:0.3em 0.6em 0.2em 0.6em;text-align:center;font-size:85%;font-weight:bold}.mw-parser-output .module-shortcutlist{display:inline-block;border-bottom:1px solid #aaa;margin-bottom:0.2em;font-weight:normal}.mw-parser-output .module-shortcutanchordiv{position:relative;top:-3em}ショートカット:

H:LIST


ようこそ

ガイドブック

チュートリアル

早見表

用語集

FAQ

ヘルプ

利用案内

質問

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

編集用ヘルプ目次
編集の基本
ページの編集
新規ページの作成
記事名チェック
文書の体裁
セクションと目次
箇条書き / 表の作り方
脚注 / 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>dldt 用語1dd 用語1の説明dt 用語2dd 用語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>ulli fooulli barli hogeulli fugali piyo

foo
bar


hoge
fuga

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>olli fooolli barli hogeolli fugali 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>ulli 用語1dldd 用語1の説明ulli 用語2dldd 用語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>ulli 用語1dldd 用語1の説明li 用語2dldd 用語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>dldt 用語1dd 用語1の説明dldt 用語2dd 用語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>ulli 用語1ulli 用語2ulliulli 用語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>olli 用語1olli 用語2olliolli 用語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>ulli foodlddulli barulli 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>dldt 用語1dd 用語1の説明dt 用語2dd 用語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>dldt 用語1dd 用語1の長い説明...dd 用語1の長い説明の次の段落...dt 用語2dd 用語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>dldt 用語1dd 用語1の説明ulli 用語1に関する項目1li 用語1に関する項目2dldt 用語2dd 用語2の説明dldt 用語2に関する用語1dd 用語2に関する説明1dt 用語2に関する用語2dd 用語2に関する説明2dldt 用語3dd 用語3の説明

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

と記述するなどの処置をしましょう。参照: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>dldt 用語1dd 用語1の説明ulli 用語1に関する項目1li 用語1に関する項目2dt 用語2dd 用語2の説明dldt 用語2に関する用語1dd 用語2に関する説明1dt 用語2に関する用語2dd 用語2に関する説明2dt 用語3dd 用語3の説明

定義の中で ":" (コロン)を使う場合

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

表示結果入力内容

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 程度となっています。

関連項目

Wikipedia:箇条書き - ガイドライン

Help:ページの編集#箇条書き - マークアップ方法

Wikipedia:スタイルマニュアル

Wikipedia:雑多な内容を箇条書きした節を避ける

Help:ウィキテキストにおけるHTML


記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:27 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef