問題

2
HTML

olとliタグで順番付きリストを作成しよう

この問題では、順番がついたリストを定義する「olタグ」について学習していきます。 主に使用される場面は、目次やランク付けといった箇条書きを書く際に使用されています。 ulタグと使い分けられるように、違いを正しく認識しておきましょう。

ポイント

olタグとliタグとは

olタグとliタグとは、順番のついたリストを作る際に使用するHTMLのタグです。
olタグはulタグと間違いやすいですが英単語で覚えておけば間違えることはありません。
olとはOrdered Listの略で順序付きリストという意味を持ちます。

olタグを使用してリストを定義した際は、liタグで囲ったテキストの先頭に連番で数字を表示することができます。

olタグでtype属性を指定する

olタグとliタグで定義した箇条書きリストは、先頭に数字を表示することができると説明しました。
その数字はtype属性を指定することで違うかたちで表示することも可能です。

例えば、算用数字、アルファベット大文字、アルファベット小文字、ローマ字数字、ローマ数字大文字、ローマ数字小文字を指定することが可能です。
初期値では、「1」から始まりますが、start属性を使うことでに似の番号から開始することができます。

HTMLの問題に挑戦しよう!

問題

olとliタグで順番付きリストを作成しよう

olとliを使用して用意したテキストを箇条書きリストにしてください。

あらかじめエディタに書くコード

                    <h1>忍者CODE甲賀ロードマップ</h1>
  甲賀のSTEP1でHTMLとCSSの基礎を学ぶ。ホームページを完成させる流れを知る。
  甲賀のSTEP2で模写コーディングを行ないHTMLとCSSを更に磨き上げる。JavaScriptの基礎も学ぶ。
  甲賀のSTEP3でjQueryを学ぶ。SASSを学ぶ。JavaScriptでアプリを作る。
  甲賀のSTEP4でJavaScriptを極める。ボリュームのあるサイトを作る。模写をする。
  甲賀のSTEP5でPHPの基礎を学ぶ。WordPressを徹底的に学ぶ。
¥HTML¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後すぐに解答閲覧用URLが
LINEで届きます

リストの内容に順番を付ける場合はolタグを記述します。
olタグで囲まれた範囲がリストとして定義されます。

その内側にliタグを書き入れ、liタグで囲んだ範囲がリスト項目として定義されます。

補足

olタグがよく用いられるシーンとしては、
順位を表すランキングの情報や操作方法などが書き記された手順書、
料理の手順などです。

ulタグとliタグがごっちゃにならないように
きちんと使い分けられるように覚えておきましょう!

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET