HTML入門トレーニング

順序付きリスト

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
順序付きリストを定義するための、ol要素について学びます。
講師:
06:38

字幕

このレッスンでは順序付きリストを 定義するための OL要素について学びます 順序付きリストは 順不同リストと 非常によく似ています そのため 実際には ほぼ同じような 構文を使います 現在 コードエディターでは サンプルファイルのHTMLを開いており この中には 順不同リストである ULリストで いくつかの リスト項目が マークアップされています このHTMLを ブラウザーでプレビューしてみましょう ブラウザーで表示すると タイトルは順序付きリストとなっていますが 実際には順不同リストとして このように マークアップされ表示されています これを 順序付きリストに変更してみましょう コードエディターに戻ります リストの種類を変更するには このリストを構成する 親のタグ つまり 現在では このULタグ ULタグになっている箇所を 別の種類に変更します 順序付きリストを作成するには ULタグではなくOLタグを利用します 開始タグと終了タグを OLタグに変更しましょう 現在コードエディターの機能で 保存と同時にコードがインデントされていますが これは気にしないでください OLに変更した部分が ブラウザーでどうなっているかを 確認してみましょう 保存しブラウザーをリロードすると 先ほどは通常の黒丸で 順不同リストとして表示されていたリストが このように順序付きリストで表示されました それぞれのリスト項目の頭には 番号が表示されています この番号はテキストとして 入力したわけではなく OLタブでマークアップしたことで 自動的に表示されているものです またここでは順序付きリストの中に 順不同リストが入れ子になっています これは文法的には まったく問題ありません 順序付きリストの中に 順不同リストを入れ子にすることも出来ますし 順不同リストの中に 順序付きリストを入れ子にすることも出来ます お互いのリストの違いは このように リスト項目の頭に 黒丸や白丸がつくか あるいは数字がつくか という違いです 順序付きリストでは この番号について 少し仕掛けを変更することが出来ます コードエディターに戻りましょう デフォルトでは 番号は 1番から始まり 自動的に 番号は増えていきます ここでは1番ではなく 別の番号から 番号を始めるように リストを変更してみましょう その場合は このOLタグの属性として スタート(start)属性という属性を指定します この属性の値で リストが開始される番号を指定すれば この番号からリストの番号が カウントアップされてくようになります ここでは 6 を指定しました いったん保存し ブラウザーをリロードすると このように番号が6番から始まり 6 7 8 9 とカウントアップされています もちろん番号を逆に カウントダウンするように 変更することも出来ます コードエディターに戻り 今度はこのスタート属性のうしろに リバースド(reversed)属性を追加します このリバースド属性は 値を持たない属性です そのため イコール(=)や ダブルクォーテーション(" ") 値は記述する必要はありません リバースドという属性の名前だけ 記述します こうすることで 順番を逆にカウントダウンして リストを作成することが出来ます コードを保存し ブラウザーに切り替え リロードすると 番号が6番から始まり 6 5 4 3 と カウントダウンされていることがわかります さて 順序付きリストで重要になるのは この番号で リストを管理しているのではなく あくまで順序を付けている ということです そのため 数字以外で 順序付きリストを表現することも出来ます コードエディターに戻り このネストされているUL要素を OL要素に 変更します その上で  属性で タイプ属性 これを追加し 値に小文字の"i"を指定します このタイプ属性は このOL要素が どのようなタイプでリストアップされるか という事を指定します 保存し ブラウザーをリロードすると この子供としてネストされている 順序付きリストは ローマ数字の小文字で リスト番号がついています もう一度 コードエディターに戻って この小文字の"i"を 大文字の"I"に変更して ブラウザーをリロードすると このように ローマ数字の大文字で 番号が表示されています またタイプを数字の1に変更すると このように通常通り 数字で表示されています 他にも アルファベットの大文字の"A"で 指定すると アルファベットの大文字のABCという順番で あるいは小文字の"a"と指定すると アルファベットの小文字でabc という順序に表示されます これらはあくまでオプションの一つですが このようにして順序付きリストを使うと 複数のリスト項目を 順番という概念を持って グループ化し リスト化することが出来ます リストを作るときに 順序付きリストで作るのか それとも順不同リストで作るのか ということについては リスト項目に 順序が関係しているかどうか という点が重要になります このレッスンでは 順序付きリストを定義するための OL要素について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。