- HTMLで箇条書きをするにはどうしたらいいの？
- 1,2,3…みたいな数字でリスト化したい
- 箇条書きのデザインをカスタマイズしたい
こんなお悩みを解決します。
HTMLで箇条書きをマスターするには、<li> <ul> <ol>の3つのタグを覚えることです。
リストを上手に活用すれば、ブログの記事がより読みやすくなるので、この機会に覚えましょう。
本記事を読めば、HTMLのリスト化タグがまるっと分かります。
スポンサードサーチ
本記事のもくじ
【HTMLで箇条書きを作る方法】li ul ol 3つのタグを解説
HTMLでは、<li> <ul> <ol>の3つのタグを使って箇条書きリストを作ることができます。
まずは、それぞれのタグの役割を解説しますね。
li ul ol 3つのタグ
<li>：リスト項目を作るタグ<ul>：「・」を付けるタグ<ol>：「1,2,3…」のように番号を付けるタグ
この3つのタグの使い方を覚えるだけで、誰でも簡単に箇条書きが作れるようになります。
【箇条書きの基本】<li> を <ul>, <ol>で囲む
HTMLで箇条書きを作るときは、<li> を <ul>（または <ol>） で囲むのが基本です。
「・」の箇条書きを作る方法
<ul>
<li>箇条書き項目①</li>
<li>箇条書き項目②</li>
<li>箇条書き項目③</li>
</ul>
「・」のリストを作る場合は、上記の通り。
<li>〜〜〜</li>で、リスト項目を作り、全体を<ul>で囲むだけです。
そうすると、下記のようなリストが完成します。
<ul>タグで作る箇条書きの完成系
- 箇条書き項目①
- 箇条書き項目②
- 箇条書き項目③
番号付きの箇条書きを作る方法
<ol>
<li>箇条書き項目①</li>
<li>箇条書き項目②</li>
<li>箇条書き項目③</li>
</ol>
番号付きの箇条書きを作る場合は、<ul>の代わりに<ol>を使うだけ。
めちゃくちゃ簡単ですよね。
<ol>タグで作る箇条書きの完成系
- 箇条書き項目①
- 箇条書き項目②
- 箇条書き項目③
覚え方のコツ【補足】
<ul> <ol>は、それぞれ正式名の短縮系です。
ul：Unordered List（アンオーダード・リスト）ol：Ordered List（オーダード・リスト）
Unordered List（アンオーダード・リスト）は、順序になっていないリストのこと。
いっぽう、Ordered List（オーダード・リスト）は、文字通り順序になっているリストです。
それぞれが何を表しているのかが分かれば、迷わなくなるので、ついでに覚えておくといいと思います。
【箇条書きを入れ子で使う】<li> の中に <ul>, <ol>を使う
箇条書きは入れ子にして使うこともできます。
<ul>
<li>箇条書き項目①</li>
<li>箇条書き項目②
<ul>
<li>箇条書き項目②-1</li>
<li>箇条書き項目②-2</li>
<li>箇条書き項目②-3</li>
</ul>
<li>
<li>箇条書き項目③</li>
</ul>
上記の場合、「箇条書き項目②」の中に、もうひとつリストを作る構造になっています。
-
- 箇条書き項目①
- 箇条書き項目②
- 箇条書き項目②-1
- 箇条書き項目②-2
- 箇条書き項目②-3
- 箇条書き項目③
こんな感じですね。
上手に使いこなせば、見やすい目次などが作れるようになります。
スポンサードサーチ
箇条書きを装飾する【CSSでカスタマイズ】
<li> <ul> <ol>で作った箇条書きはCSSでカスタマイズも可能です。
ul {
background: #008080;
border: 5px dashed;
color: white;
}
このサンプルは僕が適当に作ったもので、実装するとダサすぎるので、かっこいい箇条書きを作りたい人はサルワカさんのサイトをどうぞ。
参考
コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれにサルワカ
リストのマーカーを変える
マーカーとは、箇条書きリストをつくったときの先頭に表示される「・」や「1, 2, 3,,,」のこと。
これらはスタイルを指定するだけで自由に変更可能です。
「【list-style-typeとは】箇条書きリストのマーカーを自由に変える方法」で、24通りのマーカーを解説しているので参考にどうぞ。
マーカーをマスターすると、こんなリストも作れます。
- マーカーをマスターしましょう
- これはギリシャ文字のマーカーです
- これはカンボジア文字
- ヘブライ語だって、
- モンゴル語だって、
- チベット語だってあります。
- もちろん、日本語もありますよ
違うデザインのリストを複数作りたい
異なるデザインの箇条書きリストを複数作りたい場合は、classでグループ分けをすればOKです。
» 参考記事：【classとidの使い分け】HTML・CSSの基礎知識をわかりやすく解説します
スポンサードサーチ
まとめ：li ul olタグで箇条書きを作る方法
本記事は以上です。内容をおさらいしておくので下記ご参照ください。
- HTMLで箇条書きを作るときは、
<li>を<ul>（または<ol>） で囲む<li>：箇条書きリスト全体を囲むタグ<ul>：順不同「・」リストを作るタグ<ol>：番号「1,2,3…」リストを作るタグ
- 入れ子構造にすれば、箇条書きの中に、別の箇条書きを作ることも可能
- 箇条書きリストはCSSでカスタマイズ可能
こんな感じですね。
<li> <ul> <ol> を使いこなして、読みやすい文章を書けるようになると、読者満足度も上がるので、ぜひ覚えておきましょう。
おわり。
