リスト形式
文書ではリスト形式での表示もよく使用されます。
<ul>と<li>タグ
リスト形式で表示するには、<ul>と<li>タグを使用します。
list.html
<html>
<head>
<title>サイト作成で用意するもの</title>
</head>
<body>
<h1>サイト作成で用意するもの</h1>
<p>用意するものは以下の通りです。
</p>
<ul>
<li>テキストエディタ</li>
<li>ウェブブラウザ</li>
<li>画像編集ソフト</li>
</ul>
</body>
</html>
<ul>タグでリスト形式であることを定義し、<li>タグで各項目を定義します。項目の数だけ<li>タグを使用します。<ul>タグで<li>タグをネストすることになります。
通常、多くのブラウザでは各項目の先頭に黒丸を付加します。
番号つきリスト
番号付きリストにするには、<ul>の替わりに<ol>を使用します。
number_list.html
<html>
<head>
<title>ウェブページ作成の流れ</title>
</head>
<body>
<h1>ウェブページ作成の流れ</h1>
<ol>
<li>テキストエディタでHTMLファイルを作成</li>
<li>ブラウザでHTMLファイルを開く</li>
<li>必要に応じてテキストエディタで編集し、2の手順へ</li>
</ol>
</body>
</html>
<li>は<ul>、<ol>共通で使用されます。<ol>を使用した場合、<li>で指定した項目の数だけ自動で数字を増やして表示します。
まとめ
- <ul>でリスト形式を定義する
- <ol>で番号付きのリスト形式を定義する
- <li>でリストの各項目を定義する
リスト形式
基本的な文書構成
ページの先頭
2024 Webデザインレッスン