リストタグを使って箇条書きを表現する

  • このエントリーをはてなブックマークに追加

箇条書きを表現する時に便利な「ul・li要素」

箇条書きやリストを表現する時にはul要素・li要素を使います。
ul・li要素でマークアップすると次のようになります。

行の先頭に「・(中黒)」が入り、箇条書きになっていきます。
このように箇条書きが簡単に表現することができます。

ここで、「p要素で書いちゃだめなの?」という疑問が浮かんだ方もいますよね。
p要素でも、先頭に「・」を直接書いてあげれば同じような表示にすることはできます。
ですが、長い文章が入った場合はどうでしょう。

このように「・」の下にも文章が回り込んでしまい、リストとして見にくくなってしまいました。
それに先頭の記号もなんだかサイズ感や余白が異なります。

改行されたところで全角スペースを入れてあげることで、一応の解決はできます。
ですが、中に入る文章量が予めわからない時や、表示の確認と調整を繰り返すのはなんだか面倒です。
でもul要素・li要素でマークアップしてあげると・・・

今度は文章が回り込まないで表示されるようになりました。
この様に、リストを表現する時にはul・li要素を使ってあげると文章の成形も簡単で、見やすく表現できます。

ul・li要素の使い方

リストにしたい箇所を「<ul>」「</ul>」で囲みます。
次に、箇条書きにしたい箇所を「<li>」「</li>」で囲みます。
必要な行数だけ<li>・</li>を書く事で、行数を増やすことができます。

また、次の様にul要素をol要素に変えると・・・

「・」から「1.2.3.~」といった連番にすることができます。

まとめ

・箇条書きはul要素・li要素を使って表現する
・ul要素・li要素でマークアップすると先頭に「・」が入る
・数字の連番にしたい場合はol要素・li要素を使う

  • このエントリーをはてなブックマークに追加

新潟県地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301