当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

HTMLタグでリスト順を表示する方法

アイキャッチ画像
みきてぃ東西線
口コミ用キャラクターアイコン

HTMLでリスト項目を作成したいけど、どのタグを入れたらいいか分からない・・・。

HTMLでリストを作成する場合、定義の有無によって適切なHTMLタグが変わっていきます。

基本的なリスト項目

  • liタグ・・・リスト項目を表示
  • olタグ・・・順序のあるリストを表示
  • ulタグ・・・順序のないリストを表示

定義(説明)のあるリスト項目

  • dlタグ・・・定義(説明)のあるリストを表示
  • dtタグ・・・定義(説明)する内容を表示
  • ddタグ・・・その定義の用語を説明する時に表示する

今回は、「HTMLでリストを表示する方法」について解説します。

基本的なリスト項目をHTMLで作成する方法

HTMLで基本的なリストを作成する場合、以下のタグを使います。

  • liタグ
  • olタグ
  • ulタグ

liタグとは

1<li>サンプルテキスト</li>

liタグとは、リスト項目をHTMLで表示するのに必要なタグです。

olタグに囲まれたliタグは、数字によるリストを表示します。また、value属性を使うことで、1以外の数値から順序を開始するリストを表示することもできます。

olタグとは

1<ol><!--順序ありのリスト開始-->
2<li>テキスト1</li>
3<li>テキスト2</li>
4<li>テキスト3</li>
5</ol><!--順序ありのリスト終点-->

olタグとは、順序のあるリストを表示するためのタグです。

属性

reversed順序を逆にします。
startリストの開始番号を数字やアルファベットなどで指定します。
typeリストの番号表記を変更します。

ulタグとは

1<ul><!--順序無しリスト開始-->
2<li>テキスト1</li>
3<li>テキスト2</li>
4<li>テキスト3</li>
5</ul><!--順序無しリスト終点-->

ulタグとは、順序のないリストを表示するためのタグです。

サンプルコード

1<p>▼順序無しリスト</p>
2<ul><!--順序無しリスト-->
3<li></li>
4<li></li>
5<li>ウサギ</li>
6<li>ハムスター</li>
7<li>フェレット</li>
8</ul>
9<p>▼順序ありのリスト</p>
10<ol><!--順序ありのリスト-->
11<li></li>
12<li></li>
13<li>ウサギ</li>
14<li>ハムスター</li>
15<li>フェレット</li>
16</ol>

ブラウザでは以下のように表示されます(上部分が順序無しリスト、下部分が順序付リストです)。

HTML olタグ・ulタグ・liタグの使い方

定義(説明)のあるリストをHTMLで作成する

定義(説明)のあるリストを作成する場合は、以下のタグを使います。

dlタグ定義(説明)のあるリストを表示
dtタグ定義(説明)する内容を表示
ddタグその定義の用語を説明する時に表示する

サンプルコード

1<dl>
2<dt>主な果物</dt>
3<dd>リンゴ</dd>
4<dd>ミカン</dd>
5<dd>バナナ</dd>
6<dd>イチゴ</dd>
7<dd>グレープフルーツ</dd>
8</dl>

ブラウザで表示すると、以下の通りとなります。

HTML dlタグ・dtタグ・ddタグの使い方

まとめ

プロフィール用アイコン
みきてぃ東西線

冒頭にも書いた通り、「基本的なリスト項目」と「定義(説明)のあるリスト項目」にて使われるHTMLタグは、それぞれ以下の通りだよ!

基本的なリスト項目

  • liタグ・・・リスト項目を表示
  • olタグ・・・順序のあるリストを表示
  • ulタグ・・・順序のないリストを表示

定義(説明)のあるリスト項目

  • dlタグ・・・定義(説明)のあるリストを表示
  • dtタグ・・・定義(説明)する内容を表示
  • ddタグ・・・その定義の用語を説明する時に表示する

というわけで、今回は「HTMLでリストを表示する方法」について解説しました。

同じリストでも、順序あり/なし、および定義(説明)の有無によって、必要なタグは変わっていきますので、適宜使い分けることをオススメします。

出典

小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました