記事の内容
ul要素 ol要素 dl要素を使ってリストを作る
リストはどんな時に使うのか？
長い文章で説明するより単語や項目を列挙して簡略化して書き並べたリスト(箇条書き)の方が分かり易いときがあります。
例えばサービスの一覧とかナビゲーションなどにもリストは使われます。
リストにはどんな種類があるのか
- ul要素(Unordered Listの略)順不同リスト
- ol要素(Ordered Listの略)順序付きリスト
- dl要素(Definition Listの略)定義リスト
ul要素で作る順不同リスト
順番の指定を必要としない箇条書きのリストの事で、記述する項目の並び順はどのように並ぼうと関係のないものを、この「ul要素」に指定します。
ul要素の記述の仕方
ul要素は開始タグ<ul>と終了タグ</ul>に挟まれた範囲がリストとして定義されます。
その間にli要素を入れると<li>と</li>に囲まれた範囲が一つのリストとして認識されます。
リストは一つでも成り立ちます、順不同リストはブラウザにはこの記事の「リストの種類」のように黒点の付いたリストを表します。
htmlの記述
<ul>と</ul>で囲まれた範囲がリストになります、開始と終了タグに囲まれないとリストにならないので必ず開始タグと終了タグの間に入るように記述しましょう。
ブラウザの表示にはこのように黒点のリストになります、<li></li>に必ず囲むようにしましょう
箇条書きを入れ子で表示する
リストの途中で<ul>要素を記述して<li>要素に入れ子の部分を記述します。
このようにリストの途中で一段下がった状態で項目が表示されます。
ol要素で作る順序付きリスト
順番を指定する必要があるものに使用すのが「ol要素」です。
仕様書の手順を説明したり、ランキングを示すのに使用します。
ol要素の記述の仕方
<ol></ol>で囲まれたところがリストと定義されます。
<li></li>で囲まれたところが一つの項目として定義されます。
htmlに記述してみよう
<ol>開始タグと</ol>終了タグを記述しその間に<li>要素で項目を記述していきます。
順序付きのリストですので行頭に番号が振られていきます。
これもul要素と同様に入れ子で記述ができます。
ol要素を記述すれば
入れ子にも行頭に数字が割り振られます。
ul要素を入れ子にすると
丸い点が付いた項目になります。
dl定義リストを作る
定義リストは対になる情報を定義するリストです。
それは見出しとその説明を一対にしたリストの事を言います。
dl定義リストの記述の方法
定義リストはｄｌ(Definition List)の略で<dl></dl>で囲まれた範囲がリストとして定義されます。
<dt></dt>で囲まれた範囲が見出しとして意味を持つ項目に
<dd></dd>で囲まれた範囲が内容を持つ項目として認識されます、dt要素とdd要素は、必ず一対で使用しますがdd要素は項目の中で複数で記述することができます。
ｄｔはDefinition Termの略で定義の言葉
ｄｄはDefinition Detailsの略で定義の詳細ということです。
ul要素 ol要素 dl要素を使ってリストを作る
どのようなリストを作るのかによって使う要素も変わってきます。
このリストを使ってナビゲーションなども作っていけます。
ナビゲーションはユーザーが目的のページを見ることができるように道案内をしてあげるリンクの事です、このナビゲーションもリストを利用しています。
