箇条書きのHTMLコーディング

ヘーイ！エブリハニー！箇条書いてますかー！？
箇条書き、いいですよね。
深く考えなくてもそれっぽくまとまって見える魔法の記法、それが箇条書き。
そんな箇条書きハニー達に送るベストなコーディングを伝えるぜイェァ！

さて、そんな箇条書きですが、Webサイトを構築してると結構な頻度で使う局面が出てきます。
結構ありがちなのは脚注のように使われるケースでしょうか。

で、良く出てくる割にはこれをちゃんとマークアップできない人が多いなぁと思ってます。
なんでだか分からないですが中黒（・）を使ってベタテキストで書く人が多いんですよね。
中黒を使った場合、テキストが長くなるとどうしても格好悪くなっちゃいます。

・例えばこんな感じで1行なら大丈夫でも
・文章が長くなると中黒の下にテキストが表示されてしまって「箇条書き」っぽくならない表示になって残念な気持ちになったりしませんか？

HTMLには箇条書き専用とも言える素晴らしいタグがあるんですよ。
知ってましたか？（ﾄﾞﾔｧ

冗談はさておき、言わずと知れた<ul>～</ul>ですね。
箇条書きの本文は<li>～</li>でくくってやります。

<ul>
    <li>1行なら当然大丈夫だし</li>
    <li>文章が長くなってもの箇条書きのぐりぐりマークの下にテキストが表示されるなんてことがなくて素晴らしい表示になるんですよ！</li>
</ul>

こんな感じです。
さ、実際の表示を見てみましょう。

イッツビューリホー！（テンションマックス（リラックス））

TAG