HTML
LINEでログイン
Googleでログイン
Twitterでログイン
olタグとliタグとは
olタグとliタグとは、順番のついたリストを作る際に使用するHTMLのタグです。
olタグはulタグと間違いやすいですが英単語で覚えておけば間違えることはありません。
olとはOrdered Listの略で順序付きリストという意味を持ちます。
olタグを使用してリストを定義した際は、liタグで囲ったテキストの先頭に連番で数字を表示することができます。
olタグでtype属性を指定する
olタグとliタグで定義した箇条書きリストは、先頭に数字を表示することができると説明しました。
その数字はtype属性を指定することで違うかたちで表示することも可能です。
例えば、算用数字、アルファベット大文字、アルファベット小文字、ローマ字数字、ローマ数字大文字、ローマ数字小文字を指定することが可能です。
初期値では、「1」から始まりますが、start属性を使うことでに似の番号から開始することができます。
HTMLの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの道の第一歩となるでしょう。
問題2：olとliタグで順番付きリストを作成しよう
olとliを使用して用意したテキストを箇条書きリストにしてください。
あらかじめエディタに書くコード
<h1>忍者CODE甲賀ロードマップ</h1>
甲賀のSTEP1でHTMLとCSSの基礎を学ぶ。ホームページを完成させる流れを知る。
甲賀のSTEP2で模写コーディングを行ないHTMLとCSSを更に磨き上げる。JavaScriptの基礎も学ぶ。
甲賀のSTEP3でjQueryを学ぶ。SASSを学ぶ。JavaScriptでアプリを作る。
甲賀のSTEP4でJavaScriptを極める。ボリュームのあるサイトを作る。模写をする。
甲賀のSTEP5でPHPの基礎を学ぶ。WordPressを徹底的に学ぶ。
¥HTML¥
期待する画面
解答ソースコード
<h1>忍者CODE甲賀ロードマップ</h1>
<ol>
<li>甲賀のSTEP1でHTMLとCSSの基礎を学ぶ。ホームページを完成させる流れを知る。</li>
<li>甲賀のSTEP2で模写コーディングを行ないHTMLとCSSを更に磨き上げる。JavaScriptの基礎も学ぶ。</li>
<li>甲賀のSTEP3でjQueryを学ぶ。SASSを学ぶ。JavaScriptでアプリを作る。</li>
<li>甲賀のSTEP4でJavaScriptを極める。ボリュームのあるサイトを作る。模写をする。</li>
<li>甲賀のSTEP5でPHPの基礎を学ぶ。WordPressを徹底的に学ぶ。</li>
</ol>
¥HTML¥
補足
olタグがよく用いられるシーンとしては、
順位を表すランキングの情報や操作方法などが書き記された手順書、
料理の手順などです。
ulタグとliタグがごっちゃにならないように
きちんと使い分けられるように覚えておきましょう!
順位を表すランキングの情報や操作方法などが書き記された手順書、
料理の手順などです。
ulタグとliタグがごっちゃにならないように
きちんと使い分けられるように覚えておきましょう!
完了にする！
活動記録をTweetする
olタグで囲まれた範囲がリストとして定義されます。
その内側にliタグを書き入れ、liタグで囲んだ範囲がリスト項目として定義されます。