Help:箇条書き
出会い最短記録!!
B分で即アポHも可

[Wikipedia|▼Menu]
□記事を途中から表示しています
[最初から表示]


定義の箇条書き

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

表示結果入力内容XHTMLイメージ

用語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>)がペアで現れています。これは推奨される書き方です。


箇条書き

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

表示結果入力内容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>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


よくある、あまり良くない例


例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>ulli 用語1dldd 用語1の説明ulli 用語2dldd 用語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>ulli 用語1dldd 用語1の説明li 用語2dldd 用語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>dldt 用語1dd 用語1の説明dldt 用語2dd 用語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>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つついてしまうなど表示が崩れてしまいます。


例4

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

表示結果入力内容XHTMLイメージ


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>)に分断され、入れ子の構造が破壊されてしまっています。


なぜいけないの?

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

視覚障害を持つ人は音声読み上げブラウザを利用してウィキペディアを閲覧します。その際、例えば上記の例2を次のように読み上げられたらどうでしょう。<以下はリストです>用語1、<以下は定義のリストです><以下は先の定義語の説明です>用語1の説明<説明の終わりです><定義のリストの終わりです>用語2、<以下は定義のリストです><以下は先の定義語の説明です>用語2の説明<説明の終わりです><定義のリストの終わりです><リストの終わりです>

どうでしょう。定義語に関する読み上げがされていないのにいきなり「先の定義語」と出てきて、意味が通りません。では、正しい例ではどうでしょうか。<以下は定義のリストです><以下は定義語です>用語1、<定義語の終わりです><以下は先の定義語の説明です>用語1の説明<説明の終わりです><以下は定義語です>用語2、<定義語の終わりです><以下は先の定義語の説明です>用語2の説明<説明の終わりです><定義のリストの終わりです>

これなら大丈夫ですね。

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


バリエーション



登録後3分でアエル!!
最速出会セレブマップ

[次ページ]
[オプション/リンク一覧]
[記事の検索]
[おまかせ表示]
[トップページ]
[ニュースをチェック!]
[列車運行情報]
Size:23 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:Mamenoki