演習課題「順序ありリストを設定してみよう-その1」
現在、ぱいじょ登場キャラクターを順序ありリストとして表示しようとしています。
それぞれの人物名を順序ありリストとして表示できるよう、olタグとliタグ使用して表示を変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
演習課題「順序ありリストを設定してみよう-その2」
現在、ぱいじょ登場キャラクターを順序ありリストとして表示しています。
リストの番号付けを813から始まるように、start属性を使って表示を変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
演習課題「順序ありリストを設定してみよう-その3」
現在、ぱいじょ登場キャラクターを順序ありリストとして表示しています。type属性を使って番号付けのスタイルをローマ数字による表示に変更して下さい。
なお、type属性の値としては、Iを指定します。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
演習課題「順序ありリストを設定してみよう-その4」
現在、ぱいじょ登場キャラクターを順序ありリストとして表示しています。reversed属性を使ってリストの番号付けを降順に変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃06:順序付きリスト要素
このチャプターでは、順序がある項目のリストを表すol要素について学習します。
ol要素のolはOrdered Listの略です。
その名の通りol要素は数的な順序があり、配置順に意味を持つ項目のリストを表します。
リスト自体は前のチャプターで学習したul要素と同じように表示されますが、各項目の行頭では記号の代わりに、番号が付けられている点で異なっています。
リストの各項目はol要素の子要素であるli要素が各項目をタグ付けします。
ol要素はul要素同様、必要なだけ深く入れ子にすることが可能であり、さらに入れ子になったリストをol要素ではなく、ul要素にすることも可能です。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ol
olタグには属性が存在し、それらを用いることでリストの細かい指定ができる様になります。
start属性
start属性では、リスト項目の番号付けの初めの値を変更することができます。
通常、数字の1から割り当てられるところを、start属性で4を指定すれば番号は4から，というように好きな位置から番号付けを始めることができます。
type属性
type属性は、番号付けのスタイルを変更することができる属性です。通常ではアラビア数字の番号付けを、ローマ数字やアルファベットの番号付けに変更することができます。
reversed属性
reversed属性は、リストの番号付けを降順にする属性です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>小学生に人気な職業</p>
<ul>
<li>スポーツ選手</li>
<li>YouTuber</li>
<li>警察官</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>小学生に人気な職業</p>
<ul>
<li>スポーツ選手</li>
<ul>
<li>サッカー選手</li>
<li>野球選手</li>
</ul>
<li>YouTuber</li>
<li>警察官</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>小学生に人気な職業</p>
<ol>
<li>スポーツ選手</li>
<li>YouTuber</li>
<li>警察官</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>小学生に人気な職業</p>
<ol start=3>
<li>スポーツ選手</li>
<li>YouTuber</li>
<li>警察官</li>
</ol>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>小学生に人気な職業</p>
<ol type="a">
<li>スポーツ選手</li>
<li>YouTuber</li>
<li>警察官</li>
</ol>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>小学生に人気な職業</p>
<ol reversed>
<li>スポーツ選手</li>
<li>YouTuber</li>
<li>警察官</li>
</ol>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>小学生に人気な職業</p>
<ol start="5" reversed>
<li>スポーツ選手</li>
<li>YouTuber</li>
<li>警察官</li>
</ol>
</body>
</html>