「li、ul、olタグってどうやって使うの」や「リストをカスタマイズしたい」と悩んでいませんか？
ここでは、li、ul、olタグの基本的な使い方を、初心者向けに分かりやすく解説します。
li、ul、olタグは、リストを表示するタグで、知っておくととても便利なタグです。
ここでは、リストを表示する方法やカスタマイズ方法をお伝えするので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- liタグとは
- ulタグとは
- olタグとは
- ulタグとolタグの違い
- liタグのカスタマイズ方法
- 【まとめ】li、ul、olタグとは
|
liタグとは
まずは、liタグについて、お伝えします。
liタグとは
liタグは、リストの中のアイテムを表するタグです。
なお、liは「list item（リストのアイテム）」の略です。
リストを作るときに、ひとつひとつの項目を liタグで囲みます。
liタグの使い方
たとえば、果物のリストを作りたいときは、次のように書きます。
■ <li>タグの書き方
|
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
|
■ ホームページ上の表示
このように、ulタグを一緒に使うことで、順番のないリスト（箇条書き）ができます。
もし、順番のあるリストを作りたいなら、olタグを使います。
|
<ol>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ol>
|
このように書くと、順番のあるリストができます。
まとめとして、liタグは、ulタグや olタグの中で使います。
liタグを使うことで、リストの項目が簡単に作れます。
ulタグとは
次は、ulタグについて、お伝えします。
ulタグとは
ulタグは、順番のないリストを作るためのタグです。
なお、ulは「unordered list（順番のないリスト）」の略です。
リストの項目を並べるときに使います。
ulタグの使い方
たとえば、好きな動物のリストを作りたいときは、次のように書きます。
■ <li>タグの書き方
|
<ul>
<li>ねこ</li>
<li>いぬ</li>
<li>うさぎ</li>
</ul>
|
■ ホームページ上の表示
このように書くと、順番のないリストができます。
liタグで囲まれたそれぞれの項目が、リストの中に並びます。
ulタグの特徴
ulタグを使うと、項目の前に黒い丸（・）がついて、リストであることがわかりやすくなります。
この黒い丸は、スタイルシート（CSS）を使って変えることもできます。
ulタグの使い方のポイント
ulタグを使うときは、liタグと一緒に使います。
ulタグの中にliタグを入れて、リストの項目を作ります。
これで、順番のないリストが簡単に作れます。
olタグとは
次は、olタグについて、お伝えします。
olタグとは
olタグは、順番のあるリストを作るためのタグです。
なお、olは「ordered list（順番のあるリスト）」の略です。
リストの項目を順番に並べるときに使います。
olタグの使い方
たとえば、朝の準備のリストを作りたいときは、次のように書きます。
■ <ol>タグの書き方
|
<ol>
<li>顔を洗う</li>
<li>歯をみがく</li>
<li>朝ごはんを食べる</li>
</ol>
|
■ ホームページ上の表示
このように書くと、順番のあるリストができます。
liタグで囲まれたそれぞれの項目が、番号付きでリストの中に並びます。
olタグの特徴
olタグを使うと、項目の前に数字がついて、順番がわかりやすくなります。
この数字は、自動でつけられます。
olタグの使い方のポイント
olタグを使うときも、liタグと一緒に使います。
olタグの中にliタグを入れて、リストの項目を作ります。
これで、順番のあるリストが簡単に作れます。
ulタグとolタグの違い
ここでは、ulタグとolタグの違いについて、お伝えします。
順番の違い
ulタグは、順番のないリストを作ります。
たとえば、買い物リストや好きなものリストなど、順番が重要でないときに使います。
一方、olタグは、順番のあるリストを作ります。
たとえば、手順やランキングなど、順番が重要なときに使います。
見た目の違い
ulタグのリストは、項目の前に黒い丸（・）がつきます。
この黒い丸は、「リストの中のアイテム」ということを示しています。
一方、olタグのリストは、項目の前に数字がつきます。
この数字は、自動で1から順番につけられます。
使い方の違い
どちらのタグも、liタグと一緒に使います。
ulタグや olタグの中に、liタグを入れて、リストの項目を作ります。
■ 例：ulタグの使い方
|
<ul>
<li>ねこ</li>
<li>いぬ</li>
<li>うさぎ</li>
</ul>
|
■ 例：olタグの使い方
|
<ol>
<li>顔を洗う</li>
<li>歯をみがく</li>
<li>朝ごはんを食べる</li>
</ol>
|
まとめ
ulタグは、順番が必要ないリストに使います。
一方、olタグは、順番が大事なリストに使います。
このように、ulタグとolタグは、リストの内容に合わせて使い分けるようにしましょう。
liタグのカスタマイズ方法
ここでは、liタグのカスタマイズ方法について、お伝えします。
基本的なスタイリング
文字を大きくしたり、文字の色を変えるには、下記のように書きます。
■ 文字を大きくする
|
<ul>
<li style="font-size: 20px;">りんご</li>
<li style="font-size: 20px;">バナナ</li>
<li style="font-size: 20px;">オレンジ</li>
</ul>
|
■ 文字の色を変える
|
<ul>
<li style="color: red;">りんご</li>
<li style="color: yellow;">バナナ</li>
<li style="color: orange;">オレンジ</li>
</ul>
|
リストのマークを変える
リストのマークを変えることもできます。
■ 空の丸に変える
|
<ul style="list-style-type: circle;">
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
|
■ 四角に変える
|
<ul style="list-style-type: square;">
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
|
リストの間隔を調整する
リストの項目の間隔を広げたり、狭くしたりすることもできます。
■ 項目の間隔を広げる
|
<ul>
<li style="margin-bottom: 10px;">りんご</li>
<li style="margin-bottom: 10px;">バナナ</li>
<li style="margin-bottom: 10px;">オレンジ</li>
</ul>
|
スタイルシート（CSS）を使う
外部のスタイルシートを使って、もっと多くのスタイリングをすることもできます。
■ 外部のスタイルシートを使う
<style>
.custom-list li {
font-size: 20px;
color: blue;
}
</style>
<ul class="custom-list">
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
|
【まとめ】li、ul、olタグとは
li、ul、olタグとは？正しい使い方を初心者向けに解説！の内容は、いかがでしたでしょうか？
liタグは、リストの中のアイテムを表するタグで、ulタグや olタグの中で使います。
liタグを使うことで、リストの項目が簡単に作ることができます。
文章の内容を読者に分かりやすく伝えるために、リストを表示することはとても有効です。
リストを使うときに、liタグは使いやすいので、ぜひ活用していきましょうね。
