ホーム＞コース別ガイド一覧＞３段階のリストを作ってみよう！
３段階のリストを作ってみよう！（ul要素、ol要素、li要素） |
  
|
使用例
<ul>〜</ul> タグの中の <li>〜</li> タグの中にさらに<ul>タグを入力すると、階層状のリストを作ることができます。では記述例を見てみましょう。赤いタグが１段階目、黄色いタグが２段階目、青いタグが３段階目です。
さらに、わかりやすいように１段階目、２段階目、３段階目の順でタグの前にスペースを多く入力しました。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p>おいしい<em>チャーハン</em>の作り方</p>
<img src="sample.jpg" alt="チャーハン">
<hr>
<ul>
<li>
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html> |
|
 |
|
それぞれの項目の内容すべてに「このように表示されます」という文字列を入力しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p>おいしい<em>チャーハン</em>の作り方</p>
<img src="sample.jpg" alt="チャーハン">
<hr>
<ul>
<li>このように表示されます
<ul>
<li>このように表示されます
<ul>
<li>このように表示されます</li>
<li>このように表示されます</li>
<li>このように表示されます</li>
<li>このように表示されます</li>
</ul>
</li>
<li>このように表示されます</li>
<li>このように表示されます</li>
<li>このように表示されます</li>
</ul>
</li>
<li>このように表示されます</li>
<li>このように表示されます</li>
<li>このように表示されます</li>
<li>このように表示されます</li>
</ul>
</body>
</html> |
赤いタグが１段階目、黄色いタグが２段階目、青いタグが３段階目です。
使用例の表示
[ul 要素、li 要素の３段階（入れ子タグ）のリスト応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
- このように表示されます
|
|
|
このようにして、階層状のリストは作られます。タグが入り組んでいるので、入力ミスに注意しましょう！
また、<ul>タグを<ol>タグに置き換えれば、番号付きリストになります。
関連情報ページ
|
|
このタグによく使われるCSS
|
|
|
|
|
その他
|
|
|
