ホーム＞コース別ガイド一覧＞リストを作成しよう！
リストを作成しよう！（ul要素、ol要素、li要素） |
  
|
使用タグ <ul><li>文字列</li></ul>
HTML一覧タグ辞典 … <ul> タグ、<li> タグ
<ul>タグを使えば、番号なしの箇条書きを表示できます。内容には直接文字を入力するのではなく、 <li ></li>タグを並べて<li>〜</li>タグの内容に文字を入力します。li 要素の内容には p 要素のようなブロック要素を記述したり、直接文字を入力できます。
使用タグ <ol><li>文字列</li></ol>
HTML一覧タグ辞典 … <ol> タグ
<ol>タグは<ul>タグと使い方は同じですが、<ol>タグは番号付きの箇条書きを表示できます。内容には直接文字を入力するのではなく、<li ></li>タグを並べて<li>〜</li>タグの内容に文字を入力します。li 要素の内容には p 要素のようなブロック要素を記述したり、直接文字を入力できます。
ul 要素を使ったリストと、olを使ったリストの表示例
まずは実際にどのような表示になるのか見た方が理解しやすいと思うので、下の表の中の箇条書きを見てみましょう！
| ul要素を使ったリストの表示例 |
ol要素を使ったリストの表示例 |
- 番号なしの表示例
- 番号なしの表示例
- 番号なしの表示例
|
- 番号ありの表示例
- 番号ありの表示例
- 番号ありの表示例
|
このように ul 要素、ol 要素の違いは番号が付かない箇条書きか、番号付きの箇条書きかです。なお、list-style-type プロパティでリストの各項目に付く記号や番号の見栄えを変更できます。
使用例
では、実際に記述例を参考にしながら手順通りに入力していきましょう。
|
 まずは番号なしの箇条書きをどこに記述するか決めましょう。
ここでは罫線（hr 要素）の下に表示するように指定します。では、箇条書きの作成に入ります。
- 開始タグの<ul>を入力します
- 終了タグの</ul>入力します
このように箇条書きを記述したい場所に<ul></ul>と入力します。
※<ul></ul>タグを<ol></ol>タグに置き換えれば、番号付き箇条書きが表示されます。
|
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p>おいしい<em>チャーハン</em>の作り方</p>
<img src="sample.jpg" alt="チャーハン">
<hr>
<ul>
</ul>
</body>
</html> |
|
|
|
|
|
その次に箇条書きの項目部分を作成するタグを入力します。作成したい項目の数だけ入力しましょう。
- 開始タグの<li>を入力します
- 終了タグの</li>入力します
- 項目の数だけ繰り返し入力します
このように箇条書きの項目を記述したい場所に<li></li>と入力します。ちなみに自動的に改行されるので、<br>タグはいりません。
|
記述例
<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></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html> |
|
|
|
|
|
項目内に文字列を入力しましょう。この文字列が箇条書きに表示される項目の文章部分となります。
- <li>と</li>の間に文字列を入力します
この箇条書きの表示例は次項で記述しています。
|
記述例
<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>強火でフライパンを少し暖めます。</li>
<li>大さじ一杯の油を入れ、ひき肉を炒めます。</li>
<li>塩コショウでひき肉に下味をつけます。</li>
<li>ごはんを入れ、フライパンに入れましょう。</li>
<li>etc…</li>
</ul>
</body>
</html> |
|
|
使用例の表示
[ul 要素、li 要素適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
|
|
 |
[ul 要素、li 要素適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
- 強火でフライパンを少し暖めます。
- 大さじ一杯の油を入れ、ひき肉を炒めます。
- 塩コショウでひき肉に下味をつけます。
- ごはんを入れ、フライパンに入れましょう。
- etc…
|
|
このように番号なしの箇条書きが表示されました。同じようにして番号付きの箇条書きを作ってみましょう！
※<ul></ul>タグを<ol></ol>タグに置き換えれば、番号付き箇条書きが表示されます。
関連情報ページ
|
|
このタグによく使われるCSS
|
|
|
|
|
その他
|
|
|
