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

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

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

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

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

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

HTMLには箇条書き専用とも言える素晴らしいタグがあるんですよ。
知ってましたか?(ドヤァ

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

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

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

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

イッツビューリホー!(テンションマックス(リラックス))

TAG

  • このエントリーをはてなブックマークに追加
やまま
スペシャリスト やまま yamama

マンガとアニメとゲームから錬成された宇宙大好きエンジニア。 軌道エレベーターで行ける静止軌道上のコロニーに住まいを移し、ゲームやってマンガ読んでアニメ見て爆睡、ゲームやってマンガ読んでアニメ見て爆睡、という生活を夢見ながら今日もコードを書き続けるのだった。