箇条書きを表現する時に便利な「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要素を使う
