やぁ、東北新幹線で乗り物酔いしたユトピ(@yutopi60pa)だよ。
今回解説するのはリストタグです！
リストとはそのままの意味で、たくさんの項目を並べていくアレですね。
料理のレシピの材料とかを並べるときなどに使うこともありますね。
リストタグで使うタグは全部で3種類。
ulタグ、olタグ、liタグです。
それではさっそく解説していきますよっと。
目次
ulタグ・olタグ・liタグとは？
ulタグ、olタグ、liタグはブロック要素で、すべてリストを作る際に使うタグです。
ulタグはUnordered Listの略、olタグはOrdered Listの略、liタグはList Itemの略です。
ulタグとolタグはリスト全体を囲むタグです。
liタグは項目一つ一つを囲っていくタグですね。
ulタグとolタグの違いは？
ここでulタグとolタグって何が違うの？って人もいるでしょうね。
略が違うんだよ！！！って言いたいけど、ほかにもあります。
ulタグは”順序の無い”リストに使うタグです。
olタグは”順序のある”リストに使うタグです。
料理のレシピで例えましょう。
材料を並べるときは特に順番は関係ないですよね。カレーの材料ならじゃがいもと人参どちらを先に来てもいいですよね。そういうときはulタグを使います。
ulタグではデフォルトで項目ごとにマーカーが付きます。ulタグは「・」です。
ですが、実際に料理の手順を並べるときは順序があります。そういう時はolタグを使用することになります。
olタグはデフォルトで項目ごとにマーカーが付きます。olタグは「数字」です。
こういった感じでulタグとolタグを使い分けます。
それでは実際にやってみましょう！
リストタグを使ってみよう！
ulタグを使用
コード
|
1 2 3 4 5 6 7 8 9 10 |
HTML <b>カレーの材料</b> <ul> <li>人参</li> <li>玉ねぎ</li> <li>牛肉</li> <li>カレーのルー</li> <li>じゃがいも</li> <li>米</li> </ul> |
結果
カレーの材料
- 人参
- 玉ねぎ
- 牛肉
- カレーのルー
- じゃがいも
- 米
olタグ
コード
|
1 2 3 4 5 6 7 8 9 10 |
HTML <b>カレーの作り方</b> <ol> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
カレーの作り方
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
こういった感じでリストタグは使用していきます。
liタグはulタグでもolタグでも使いますね。
デモではulタグには「・」が表示され、olタグには「数字」がしっかりと表示されていますね。
リストタグの属性とlist-styleプロパティ
リストタグには項目にマーカーを付けることができるのはデモでみてもらったと思います。
そのマーカーには、種類を細かく指定できるtype属性とCSSプロパティ「list-style」があります。
まずはリストタグのtype属性を見ていきましょう。
ulタグのtype属性
ulタグのtype属性全部で3種類。
ulタグのtype属性
type=”disc”で黒丸を表示！
コード
|
1 2 3 4 5 6 7 8 9 |
HTML <ul type="desc"> <li>人参</li> <li>玉ねぎ</li> <li>牛肉</li> <li>カレーのルー</li> <li>じゃがいも</li> <li>米</li> </ul> |
結果
- 人参
- 玉ねぎ
- 牛肉
- カレーのルー
- じゃがいも
- 米
type=”circle”で白丸を表示！
コード
|
1 2 3 4 5 6 7 8 9 |
HTML <ul type="circle"> <li>人参</li> <li>玉ねぎ</li> <li>牛肉</li> <li>カレーのルー</li> <li>じゃがいも</li> <li>米</li> </ul> |
結果
- 人参
- 玉ねぎ
- 牛肉
- カレーのルー
- じゃがいも
- 米
type=”square”で黒四角を指定！
コード
|
1 2 3 4 5 6 7 8 9 |
HTML <ul type="square"> <li>人参</li> <li>玉ねぎ</li> <li>牛肉</li> <li>カレーのルー</li> <li>じゃがいも</li> <li>米</li> </ul> |
結果
- 人参
- 玉ねぎ
- 牛肉
- カレーのルー
- じゃがいも
- 米
このようにulタグのマーカーを指定することができます。
olタグのtype属性
次はolタグを見ていきましょう。
olタグのtype属性は全部で5種類です。
olタグのtype属性
type=”1″で数字を表示！
コード
|
1 2 3 4 5 6 7 8 9 |
HTML <ol type="1"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
type=”a”でアルファベット小文字を表示！
コード
|
1 2 3 4 5 6 7 8 9 |
HTML <ol type="a"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
type=”A”でアルファベット大文字を表示！
コード
|
1 2 3 4 5 6 7 8 9 |
HTML <ol type="A"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
type=”i”でローマ数字小文字を表示！
コード
|
1 2 3 4 5 6 7 8 9 |
HTML <ol type="i"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
type=”I”でローマ数字大文字を表示！
コード
|
1 2 3 4 5 6 7 8 9 |
HTML <ol type="I"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
このような形でolタグのマーカーを指定することができます。
ちなみにこのマーカーはliタグにも指定可能で、項目ごとに違ったマーカーを使うことも可能です。あまり使う頻度は少なそうですがね。
「list-style」プロパティ
最後にCSSの「list-style」プロパティ。
list-styleプロパティはリストタグのマーカーをCSSで指定することができます。
メリットとしては、type属性よりも豊富なマーカーの種類と、画像が使用できる点、位置を指定することができます。
このほかにもlist-styleには3つの関連プロパティがあります。
- list-style-type・・・マーカーの種類を指定
- list-style-image・・・マーカーに画像を指定
- list-style-position・・・マーカーの位置を調整
といった具合に指定ができます。補足としてこれら3つのプロパティはlist-style1つでも一括指定が可能です。
このlist-styleプロパティはどのれくらい種類が豊富かというと、先ほどのマーカー以外にも漢数字、五十音順、いろは、ヘブライゴ、ハングル、などなど非常に多くのマーカーを使うことができます。
詳しいことは別の機会に解説していきますが、今回はlist-style-typeとlist-style-imageのデモをしていきたいと思います。
list-styleプロパティを使おう！
list-style-type: hiraganaでひらがなを表示！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CSS #ol1 { list-style-type: hiragana; } HTML <ol id="ol1"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
list-style-type: katakana-irohaでカタカナでイロハを表示！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CSS #ol2 { list-style-type: katakana-irohaa; } HTML <ol id="ol2"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
list-style-type: cjk-ideographicで漢数字を表示！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CSS #ol3 { list-style-type: cjk-ideographic; } HTML <ol id="ol3"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
list-style-type: hebrewでヘブライを表示！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CSS #ol4 { list-style-type: hebrew; } HTML <ol id="ol4"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
list-style-type: hangulでハングルを表示！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CSS #ol5 { list-style-type: hangul; } HTML <ol id="ol5"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
といった感じでいろいろな国のことばにも対応したものがあるのはすごいですよね。
ちなみにこのlist-styleは順序の無いulタグでも使用可能です。
続いてはlist-style-imageの画像の場合を見ていきましょう。
list-styleを使ってみよう！
list-style-imageで画像を指定！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CSS #ol6 { list-style-image: url(http://60pablog.com/wp-content/uploads/2016/09/list_008_a-trans.png); } HTML <ol id="ol6"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
list-style-imageで画像を指定！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CSS #ol7 { list-style-image: url(http://60pablog.com/wp-content/uploads/2016/09/009.gif); } HTML <ol id="ol7"> <li>人参、玉ねぎ、ジャガイモを切る。</li> <li>牛肉を炒める。</li> <li>ルーを作る。</li> <li>米を炊く</li> <li>ルーに材料をドボドボ。</li> <li>ルーを炊きあがった白米にかけて完成！</li> </ol> |
結果
- 人参、玉ねぎ、ジャガイモを切る。
- 牛肉を炒める。
- ルーを作る。
- 米を炊く
- ルーに材料をドボドボ。
- ルーを炊きあがった白米にかけて完成！
こんな感じで自分のオリジナルの画像だったり、フリー素材などを使えばマーカーに画像を表示させることもできます。
これは非常にデザインの幅が広がりますのでオススメです！
補足で、マーカーを表示させたくない場合はlist-style:noneとすればマーカーは非表示になります。
まとめ
以上がリストタグの解説でした。
基本的な構造は難しくはなく、すぐにでもお使えるようになります。
type属性やlist-styleプロパティを併用すればもっといろいろな表現をすることができるので、非常に使い勝手の良いタグです。
みなさんもぜひ使えるようにしておきましょう！