演習課題「順序なしリストを設定してみよう-その1」
現在、ぱいじょ登場キャラクターを順序なしリストとして表示しようとしています。
それぞれの人物名を順序なしリストとして表示できるよう、ul
タグとli
タグ使用して表示を変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
演習課題「順序なしリストを設定してみよう-その2」
現在、ぱいじょ登場キャラクターを生徒
、先生
、PC
の項目に分けて順序なしリストとして表示しようとしています。
各項目の下に順序なしリストとして表示できるよう、ul
タグとli
タグ使用して表示を変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
※li
タグの空白の深さは変えず、ul
タグを追記して下さい。その際、ul
タグの空白の深さは、各項目のli
タグとそろえて下さい。
#05:順序なしリスト要素
このチャプターでは、順序がない項目のリストを表すul要素について学習します。
ul要素のulはUnordered Listの略です。
その名の通りul要素は数的な順序がなく配置順に意味を持たない項目のリストを表します。
順序なしリストの項目は通常、ドット、円形、四角形などの記号が行頭の記号を伴って描画されます。行頭の記号はCSSなどによって変更が可能です。
リストの各項目はul要素の子要素であるli要素が各項目をタグ付けします。
ul要素は必要なだけ深く入れ子にすることが可能であり、さらに入れ子になったリストをul要素ではなく、ol要素にすることも可能です。ol要素については次のチャプターで扱います。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul
<!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>