このページについて
このページではHTMLで使えるli・ol・ulを使ってリストを定義する方法を解説しています。
liタグ・olタグ・ulタグの役割
この3つのタグは全てリストを定義する時に使うんですが、それぞれ組みあわせて使うのが基本となります。
まずはどちらでも使う、liから。これはリストの内容をそれぞれ定義する時に使用します。要するに「各項目ごとに使う」タグとなります。
対するol・ulはそれぞれ「リスト全体の仕組みを定義」するものとなります。olはそれぞれの項目の前に数字が表示されます。料理の手順とか、ソフトウェアの説明手順を書く時に使用されることが多いです。
ulは順不同の項目を表示する時に使用されます。複数の条件とかで使用されることが多いです。
ulタグ、olタグの基本形を作成できるページを作成しました。基本形の確認をしたい時に使用してください。
olタグで順番付きリストを作成する方法
olとliを使用して、数字付きのリストを作成する方法から解説します。まずはリスト全体を定義する必要があるので、olで開始します。終了タグは必要です。
その中にliを使用して、各項目を入力していきます。簡単に書くと以下のようになります。
<ol>
<li>項目1</li>
<li>項目2</li>
</ol>このように各項目ごとに閉じタグを使用します。これの表示は以下のようになります。
- 項目1
- 項目2
こんな感じで自動で上から1が付与されます。CSSを使用すれば色などを変えることもできます。
先頭の数値を変更したい場合、いくつかの属性を使用します。olタグで使用できる属性は以下の通りになります。
| reversed | 数字の上下を反転させます |
|---|---|
| start | 開始する数値を指定します |
| type | 数値を別の表記に変更できます |
これらを組みあわせて数値や先頭の文字を変更できます。
以下はreversed属性を使用した数値付きリストです。全4個の項目がありますが、先頭が4で下に行くにつれて数値が小さくなっていく仕様になります。
<ol reversed>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</ol>reversed属性はオン・オフのみの書き方しかないため、このように書くことで自動でオンとなります。これは以下のように表示されます。
- 項目1
- 項目2
- 項目3
- 項目4
次にスタート数値を変更するstart属性。これはシンプルで、指定した数値からのスタートとなります。
<ol start="10">
<li>項目1</li>
<li>項目2</li>
</ol>この場合、開始数値が10なので項目1は10となります。その後の数値はそれに1加算したものとなります。
- 項目1
- 項目2
そして最後に先頭の数値を別のものに変えるtype属性です。利用できるものは限られていますが、それぞれの例を掲載しておきます。
| 1 |
| |
|---|---|---|
| A |
| |
| a |
| |
| I |
| |
| i |
| |
それぞれこんな感じで書きます。表記はそれぞれ真ん中のとおりになります。それぞれにreversed属性を付与すると、やっぱり反転します。
ulタグを使ったリストを作成する方法
ulタグは順番が無い、シンプルな箇条書きリストを作成する時に使用します。
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>ulかolかっていう違いで、基本的な書き方はどちらも同じです。違いは見た目で、このulは数値などの表記は一切なく、デフォルトでは黒丸です。
- 項目1
- 項目2
そして使用可能な属性ですが、なんとこちらはありません。正確にはグローバル属性・イベント属性はサポートしているんですが、先頭の黒丸を他のものに置き換える的な属性はありません。全てCSSと併用して置き換えることになります。
liタグの属性など
liにも一応属性はあるにはあるんですが、olで使用する時にのみ使えるもの1つだけです。
olではスタート数値を変更する属性を解説しましたが、こちらも同じ機能を持っています。その名もvalue属性なんですが、使い方は同じです。
<ol>
<li value="20">項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>こう書くと以下のように表示されます。
- 項目1
- 項目2
- 項目3
見た目的にはolでstart属性を指定するのと全く同じですが、細かいことを書くとそれぞれのブロックごとに数値を変更できるという点がこちらにはあります。以下のサンプルを例にあげます。
<ol>
<li value="20">項目1</li>
<li>項目2</li>
<ol>
<li value="30">項目3</li>
<li>項目4</li>
</ol>
</ol>このようにolリストの中にolリストを作成した場合、いわゆる入れ子(ネスト)構造となります。ブラウザで表示するとこんな感じになります。
- 項目1
- 項目2
- 項目3
- 項目4
ここで先頭の数値を見て見ます。上はvalue属性で20を指定したので、20からスタートしています。下は30を指定したので、30からのスタートとなります。olのstart属性で20を指定した場合、以下のようになります。
- 項目1
- 項目2
- 項目3
- 項目4
ネストしたリストまでは反映されません。そのため細かい部分にこだわる必要がある場合、value属性で数値を設定してあげましょう。
リストの入れ子構造
上でも軽く触れましたが、リストは入れ子構造にすることができます。入れ子とはある要素の中に別の要素を入れることを言います。
最も簡単なものは以下の構造です。
<ul>
<li>1</li>
<li>2
<ul>
<li>2-1</li>
<li>2-2</li>
</ul>
</li>
<li>3</li>
</ul>これはリストの2つ目の項目の中に、別のリストを作成したものになります。ブラウザで見てみると以下のようになります。
- 1
- 2
- 2-1
- 2-2
- 3
こんな感じでリスト内にリストを作ることができます。料理の手順とかで細かいポイントとかを解説する時に使うといいと思います。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。