HTML
LINEでログイン
Googleでログイン
Twitterでログイン
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タグの子要素にはliタグのみが使用可能となります。
ulタグで囲ったリストはWebブラウザ上で確認すると先頭に黒丸のついた
箇条書きリストとして表示されます。
対して順番を必要とするリストを定義する場合は、順番を先頭に付与してくれる
別のタグが用意されています。次の問題で学習していきましょう!
ulタグで囲ったリストはWebブラウザ上で確認すると先頭に黒丸のついた
箇条書きリストとして表示されます。
対して順番を必要とするリストを定義する場合は、順番を先頭に付与してくれる
別のタグが用意されています。次の問題で学習していきましょう!
完了にする！
活動記録をTweetする
ulタグを使用してリストを定義します。
ulタグで囲まれた範囲がリストとして定義されます。
その内側にliタグを書き入れ、liタグで囲ったものがリスト項目として定義されます。
今回の場合でいくと、liタグを3つ用意したらそれぞれに
手裏剣、クナイ、まきびしを書いて出来上がりです。