ulとliで箇条書きリストを作成しよう

この問題では、HTMLでリストを定義する方法を学習していきます。HTMLでリストを作る際は、特にリストに順番がない場合と、ある場合で使用するタグが変わります。
まずは順番がないリストの作り方を以下の問題を通して学習していきましょう。

HTMLの問題に挑戦しよう！

問題

「ulとliで箇条書きリストを作成しよう」

ul・liタグを使用して箇条書きリストを作成してください。

リストには下記の忍者の小道具を書いてください。
手裏剣
クナイ
まきびし

期待する画面

解答と解説（ulとliで箇条書きリストを作成しよう）

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

今回の問題のようにリストの内容に順番を必要としない場合は
ulタグを使用してリストを定義します。

ulタグで囲まれた範囲がリストとして定義されます。
その内側にliタグを書き入れ、liタグで囲ったものがリスト項目として定義されます。
今回の場合でいくと、liタグを3つ用意したらそれぞれに
手裏剣、クナイ、まきびしを書いて出来上がりです。

補足

ulタグの子要素にはliタグのみが使用可能となります。
ulタグで囲ったリストはWebブラウザ上で確認すると先頭に黒丸のついた
箇条書きリストとして表示されます。

対して順番を必要とするリストを定義する場合は、順番を先頭に付与してくれる
別のタグが用意されています。次の問題で学習していきましょう!

次の問題

olとliタグで順番付きリストを作成しよう

HTML学習のコース一覧へ戻る

ポイント

ulタグとliタグとは

ulタグとliタグは、HTMLで箇条書きのリストを作る際に使用するHTMLのタグです。

ulはunordered listの略で、liはlistの略で、ulタグとliタグは順番のないリストを定義する際に使用します。ulタグを使った場合は、liタグで囲った内容（テキスト）の先頭に
「・（点）」がついて表示されます。

ulタグ、liタグの使いどころ

Webページにおいて、ulタグは箇条書きだけではなく、様々なところで使用されています。
例えば、「メニュー」にはよく使用されています。メニューには、複数の項目が並ぶので、リストタグが意味合い的にベストだと言えます。
このような複数の項目のまとまりには、積極的にulタグとliタグを使用していきましょう。

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する

HTML学習におすすめのコース