デジタルライフ > できるシリーズ > ライフ & ホビー > ホームページ HTML入門 > ページ1

ページ1

箇条書きのリストを作るには

タグには見出しと段落だけでなく、ページの内容を組み立てるためのさまざまな部品が用意されています。ここではulタグで箇条書きを作ってみましょう。

このレッスンで使用するタグ

ulタグは箇条書きのリストを作成します。<ul>と</ul>の間には、liタグでリストの項目を並べていきます。

1	ulタグの入力位置にカーソルを移動する

見出しや段落と、リストの違い

詳細を
見る

リストを作るulタグは、見出しを作るh1タグやh2タグ、段落を作るpタグと似ています。どれも<body>と</body>の間に入力するタグです。見出しの下に段落を並べるように、見出しの下にリストを置いてページを構成してもかまいません。リストが見出しや段落と違う点は、pタグなどではタグの中にすぐ文章を書けるのに対し、ulタグではまずliタグを並べてから、liタグの中に文章を入力することです。

ulタグを入力する

入力アシスト

< =

＋

> =

＋

/ =

3	liタグの入力位置にカーソルを移動する

liタグを入力する

間違った場合は

手順４でスペースを空ける行を間違えたときは、一度行を削除して、あらためて<ul>の右側をクリックして、Enterキーを押しましょう。

5	リスト項目の入力位置にカーソルを移動する

6	リスト項目を入力する

7	ほかのリスト項目を入力する

8	入力した内容を確認する

liタグの終了タグは省略できる

詳細を
見る

liタグの終了タグは省略できます。省略すると、次の開始タグ<li>が出てくるか、</ul>が出てくるまでが1つの項目になります。ここではわかりやすいように、終了タグが省略できるタグでも省略せずに記述しています。なお、pタグも終了タグを省略できます。省略すると、次のpタグや見出しが出てくるまでが1つの段落になります。

9	Internet Explorerで確認する

間違った場合は

手順９でリストの項目の順番が正しく表示されない場合はメモ帳の画面に戻り、項目を正しく入力し直しましょう。

番号付きのリストを作るには

詳細を
見る

ulタグは、順番の決まっていない項目を並べるリストを作ります。ulタグの代わりにol（オーエル）タグを使うと、項目に順番のあるリストになります。olタグの内容には、ulタグと同様にliタグを並べますが、各項目の先頭には、黒丸の代わりに数字が1から順に表示されます。タグは以下のように入力します。

ページの内容をわかりやすくするリスト

文章には、箇条書きにしたほうが見やすくなることがあります。「いま１つ読みにくいなあ」と思ったら、文章の中から項目を抜き出して、ulタグとliタグで箇条書きを作ってみましょう。情報が正確に伝わりやすい表示になります。

1｜2｜ 3｜次へ>

出典

ここに掲載した内容は、以下の書籍から抜粋しました。
	できるホームページ HTML入門 Windows対応改訂版
	著者：佐藤和人＆できるシリーズ編集部発行：株式会社インプレスジャパン

目次を見る \| 本を購入する

【著者プロフィール】フリーライター。HTML関係の記事を多数執筆。おもな著書は『できるホームページスタイルシート入門 Windows対応』　『できる大事典 HTML&CSS』、『基礎Ajax+JavaScript』（インプレスジャパン）など。kazuto@mvi.biglobe.ne.jp

ページ1

出典

関連書籍