ログイン
問題1

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

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

アイコン画像

本のアイコンulタグとliタグとは

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

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

本のアイコンulタグ、liタグの使いどころ

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

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

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

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

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

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ul・liを使ってリストを作成しよう!</title>
</head>
<body>
  <ul>
    <li>手裏剣</li>
    <li>クナイ</li>
    <li>まきびし</li>
  </ul>
</body>
</html>
¥HTML¥
            

コメントのアイコン解説

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

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

コメントのアイコン補足

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

対して順番を必要とするリストを定義する場合は、順番を先頭に付与してくれる
別のタグが用意されています。次の問題で学習していきましょう!
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる