マーク付き箇条書きを作る
上部
箇条書きの順番が重要でない場合はマークつきの箇条書きを使おう。
箇条書きが始まる部分には <ul> を記述して
実際に箇条書きにしたい部分の先頭に <li> をつけて、
箇条書きが終わる部分には </ul> を記述するんだよ。
学
なるほど〜。では、自己紹介の好きな映画のジャンルを箇条書きにしてHTMLで書くとこんな感じでしょうか。
<ul>
<li>アクション映画
<li>ホラー映画
</ul>
上部
うんうん。ばっちりだね。
箇条書きの先頭には、自動的にマークがつくよ。
そして、箇条書きの前後と、箇条書き部分は、自動的に改行されるので <br>を入れる必要はないよ。これも覚えておこうね。
ここで注意しなくちゃいけないのは、「箇条書き」は「段落」の中には書けないという事だよ。 つまり、次ような書き方は間違った書き方だよ。
<p>好きな映画のジャンル
<ul>
<li>アクション映画
<li>ホラー映画
</ul>
</p>
正しい書き方は、次のようになるんだよ。
<p>好きな映画のジャンル</p>
<ul>
<li>アクション映画
<li>ホラー映画
</ul>
学
なるほど〜。「箇条書き」は「段落」と同じように扱うって考えれば間違えないですね。
上部
うん。まさに、その通りだね。
学
では、箇条書きの部分をHTMLに追加してみますね〜。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>学の自己紹介</title>
</head>
<body>
<h1>学の自己紹介</h1>
<h2>名前</h2>
<p>名前は学（まなぶ）ですが勉強は苦手です。</p>
<h2>性格</h2>
<p>元気がとりえです。<br>
ちょっとおっちょこちょいで小さな失敗をすることがあります。</p>
<h2>趣味</h2>
<p>趣味はサッカーと映画です。</p>
<h3>サッカー</h3>
<p>週末には草サッカーをやっています。</p>
<h3>映画</h3>
<p>好きな映画のジャンル</p>
<ul>
<li>アクション映画
<li>ホラー映画
</ul>
</body>
</html>
上部
では、ここまでを表示してみようか。
学の自己紹介を新しいウィンドウで開く
学
おお〜。箇条書きの先頭にマークが自動で付きましたよ！
