/*サーチコンソール*/ /*google adcense*/

初心者向けリストの作成方法【HTML】

2020年1月22日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はHTMLでリストを作成する方法について、初心者向けに解説していきます。使用できる要素が多く戸惑うかもしれませんが、ゆっくりと理解して行きましょう。

この記事では「要素」や「属性」といった用語を頻繁に使ってあります。もしHTMLを始めたばかりでこれらの用語がわからない方は、「タグ中の要素、属性とは?HTMLの基本的な書式」の記事から読むことをおすすめします。

リストの作成方法
この記事の要点まとめ
リストを作成するために使う要素は3種類
リストを作成するにはli要素、ul要素、ol要素の3種類を使用する。
li要素-リスト項目を表示-
li要素はリスト項目を表示する要素。
ul要素-順序のないリスト-
ul要素は順序のないリストを作成する要素。
ol要素-順序のあるリスト
ol要素は順序のあるリストを作成する要素。
type属性-表示する番号の種類を指定-
type属性を使用することで、表示する番号の種類を指定することができる。
reverse属性-並び順を逆にする-
reverse属性を使用することで、項目の並び順を逆にすることができる。
start属性
start属性を使用することで、項目の開始番号を指定することができる。
リストは使えるととても便利
ブログを作成する上で、リストを作成できるようになるととても便利。

リストを作成するために使う要素は3種類

要素や属性についてわかってから見た方が、より記事の内容を理解できるよ。

ヒナ
ヒナ
ハリボー
ハリボー

おけ。

HTMLでリストを作成するには、3種類の要素が存在します。3種類全てを使うわけではなく、その中の2つの要素を組み合わせることでリストを作成することができます。

まず一つ目は「li要素」です。li要素はリストを作成するにあたって必ず必要な要素となります。li要素は単体で使用してはならず、必ず親要素で囲む必要があります。

その親要素に当たるものが2つ目の要素で、2種類あります。それが「ul要素」と「ol要素」です。この2つのどちらかを親要素とし、その中に子要素としてli要素を記述します。それぞれ作成できるリストが異なり、ul要素は順序のないリスト、ol要素は順序のあるリストを作成することができます。

この3つの要素を理解してしまえば、基本的なリストを作成することができます。それでは、この3つの要素について解説していきます。

リストに使う3要素
クリックで拡大

li要素-リスト項目を表示-

li要素は「List Item(リスト アイテム)」の略称で、リスト項目を表示する要素です。li要素は単体では使用せず、後ほど解説するul要素かol要素のどちらかと一緒に使う必要があります。

li要素に対して属性を設定することもできますが、特に使用しなくてもリストを作成することはできます。ol要素に対して使う属性の方が重要なので、この記事ではliに使用できる属性は割愛します。

ul要素-順序のないリスト-

ul要素は「Unordered List(アンオーダー リスト)」の略称で、順序のないリストを表示する要素です。ul要素を親要素とし、その中にli要素を入れることで順序のないリストを作成することができます。順序に関係のないリストを表示するときに使用してください。

表示するリスト項目のマーカー(それぞれのリストの頭に表示するもの)は、初期スタイルとして黒丸(disc)が使用されます。この黒丸はCSSの「list-style-type」というプロパティを使用することで変更することができます。この記事では詳しく解説しませんが、例として黒丸を白丸(circle)に変更したものを載せておきます。

深くは考えず、「マーカーは変更できるんだ」ということだけ覚えておいてください。

※CodePenの使い方がわからない方はこちら

See the Pen ul要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

ol要素-順序のあるリスト-

ハリボー
ハリボー

リストを使ってランキングみたいなやつ作りたい。

それなら順序のあるリストを作れるol要素を使うといいよ。

ヒナ
ヒナ

ol要素は「Ordered List(オーダー リスト)」の略称で、順序のあるリストを表示します。ul要素同様、ul要素を親要素とし、その中にli要素を入れることで順序のあるリストを作成することができます。リスト項目の順序が関係あるときに使用してください。

ul要素を使ってリストを作成した場合、リストの最初に1から順番に数字がつきます。1から順番に数字を表すだけでよければ特に考える必要はありませんが、属性を使用することでこれを変更することができます。

今回はul要素で使用できる属性を3つ、ご紹介します。

type属性-表示する番号の種類を指定-

type属性を使用することで、表示する番号の種類を指定することができます。
<ol type ="1″>
のように指定します。

使用できる属性値は以下の通りです。

属性値 表示する番号
1(初期値) 数字(1.2.3.4.5〜)
i 小文字のローマ数字(ⅰ.ⅱ.ⅲ.ⅳ.ⅴ〜)
I 大文字のローマ数字(Ⅰ.Ⅱ.Ⅲ.Ⅳ.Ⅴ〜)
a 英小文字(a.b.c.d.e〜)
A 英大文字(A.B.C.D.E〜)

See the Pen ol要素 type属性 by Kosei@SplaTech (@pompom_stk) on CodePen.

reversed属性-並び順を逆にする-

reversed属性は、リスト項目の並び順を逆にすることができます。

reversed属性は
<ol reversed>
のように記述し、属性値を指定する必要がありません。
(属性値を指定しない属性を「理論属性」といいます)

See the Pen ol要素 reversed属性 by Kosei@SplaTech (@pompom_stk) on CodePen.

start-開始番号の指定-

start属性は、リスト項目の開始番号を指定することができます。

属性を何も指定していない初期値では、1.2.3〜という順に項目が表示されます。この状態で
<ol style="4″>
のように指定すると、4.5.6〜という順に項目が表示されるようになります。

See the Pen ol要素 start属性 by Kosei@SplaTech (@pompom_stk) on CodePen.

リストは使えるととても便利

ハリボー
ハリボー

リストって意外と奥が深いんだね。

リストについて理解できたでしょうか?リストは使用する要素や属性がやや多いので、少し難しいかもしれません。ですがブログを作成する上で、そして記事を書いていく上でリストが使えるようになるととても便利です。

今回ご紹介した属性は一部のみです。これ以外にも使用できる属性があります。他にもCSSを使用することで、リストを見やすくすることもできます。この記事では簡単に紹介しただけですが、いつかわかりやすく解説していこうと思っています。