airheadの日記: memo: 「テキスト形式 (HTML OK!)」で箇条書き 1
概要
Slashdotへのコメント投稿時に多くの人が、テキストエリア(本文記入欄)内の改行を残しつつ強調やリンクも表現できる「テキスト形式 (HTML OK!)」を使っているようです。この形式において箇条書きを見栄え良く表現するには、どうすればよいでしょうか。
もっとも手軽に箇条書きを表現する方法は、各項目を「・」(中黒)などで書き始めることですが、一項目の内容が長い場合にはブラウザの表示幅によっては項目途中で表示が折り返されてしまい、見苦しくなる、項目の区切りがわかりにくくなる、という問題があります。
かといって、HTMLの箇条書き(<ul>、<ol>、<li>)では各項目前後に改行が予想以上に挿入されてしまうからと、その使用をためらっている人も多いのではないでしょうか。しかし要点さえ押さえれば、過剰改行の心配はありません。さああなたも、Happy 箇条書き!
例
テキストエリアへの記入例(テキスト形式 (HTML OK!)にて)
リスト前の文章1
リスト前の文章2
<ul><li>項目1
<li>項目2
<li>項目3
</ul>リスト後の文章1
リスト後の文章2
表示例
リスト前の文章1
リスト前の文章2
- 項目1
- 項目2
- 項目3
リスト後の文章1
リスト後の文章2
タグの指定手順
- 各項目の頭につく記号「・」などを開始タグ <li> で置き換える。終了タグ </li> は省略する[*]。
- 箇条書きの型と終了位置を示すために、項目部分全体を開始タグと終了タグで囲む。
- <ul>~</ul> (それぞれの頭に「・」が付くような序列なし型)
- <ol>~</ol> (1. 2. 3. ... のような序列付き型)
- 書きあがったら、本投稿の前に改行などをできるだけ省く。項目と項目の間の改行は問題ない[*]が、以下は避けることが望ましい。
- 箇条書き開始前の空行(序列なしの場合 <ul> の直前で一行開けない)
- 箇条書き開始直後の改行(<ul> の直後で改行せず、続けて最初の項目を書く)
- 箇条書き終了後の改行(</ul> の直後で改行せず、続けて後続の文を書く)
- 各項目の行頭字下げ(<li> の直前に空白を入れない)
[*] テキスト形式によるbr要素をli要素の内容末尾に位置させ、ブラウザに表現対象外とさせる。IE、Firefox、Operaあたりでは表示対象外だが、ブラウザによっては効かないかもしれない(検証不十分)。終了タグを省略しないとbr要素がli要素の外側に位置してしまい、表現対象外とならないのは確実である。
追記
この文章に間違いや見落としがあるといけないので(見つけたらお知らせください)、投稿時には各自しっかりプレビューを。
箇条書きを入れ子にしたい場合には2つの箇条書きを個別に書きあげてしまい、子となる箇条書きの<ul>~</ul>をカット、親とする項目の直後の行頭にペーストすればよいと思われますが、結果としてテキストエリアへの記入内容がかなり見づらくなりそうです。何かよい手順・記法があればお知らせください。
これで気兼ねなく人に勧められます。tachさん、修正ありがとう。
これは参考になる! (スコア:0)
「HTML OK」ではリスト前後の見栄えが気に入らなくてフルHTMLで書いてたけど、
これなら「HTML OK」で気軽にリストが使える。
ありがたい。