HTMLのリストタグ(liタグ)と、セットで使うolタグとulタグの使い方をゼロから分かるように解説していきます。
この記事の目的
ブログサービスやWordPressなどのCMSを使って構築しているブログやWEBメディアの記事やページを作成する際に必要なhtmlの知識を身に着ける。
リストタグとは
その名の通り何かのリストといった箇条書きを表す際に使用するタグで、＜li＞～＜/li＞の間に表示する内容を記述します。後述するolタグ又はulタグとセットで使うのがルールです。
まずはサンプルコードをご覧下さい。
olタグの場合
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ulタグの場合
<ul>
<li></li>
<li></li>
<li></li>
</ul>
olタグとulタグの使い分け
違い
- olタグ
- 順番付きのリストに使用するタグで、各項目の前に自動で番号が振られます。
- ulタグ
- 順番なしのリストに使用するタグで、各項目の前には•(点)がつきます。
上記の違いを踏まえた上で目的に合致する方を使用しましょう。
表示例
- olタグ
-
- 会員登録
- 電話番号認証
- 利用開始
- ulタグ
-
- au
- ドコモ
- ソフトバンク
中に入れられるタグ(要素)
理論的にはどんな要素も入れられますが、cssを自由自在にカスタマイズできるだけの知識がなければ何でもかんでも入れられるわけではありません(デザインが崩れるため)。
入れられる要素の例
- aタグ(リンクタグ)
- pタグ
- ol,ul,liタグ
- →入れ子になります。
- div,spanタグ
- →クラスとして設定したデザインを適用させることもできます。
- imgタグ(=画像)
- dlタグ(定義タグ)
上記はブログやメディアの記事でよく使うものですが、これらであれば基本的にはデザインの修正なしに使うことができると考えて良いでしょう。
説明をつけたい場合は…
リストに定義したものに解説をつけたい場合もあるかと思いますが、そのような場合にはリストタグではなく定義タグのdtタグとddタグを使います。
dt&ddタグの表示例
※CSSでデザインを設定しているため、単純にdlタグを用いてもこのようなデザインになるわけではありません。
- 独自ドメイン
- サイトのURLとなるドメインで、二つとして同じものは存在しない。
- レンタルサーバー
- サイトのデータの保管と表示を行う、サイトを設置する土地にのようなもの。
こちらの使い方は以下の記事で解説しているのでご参照ください。
