HTMLとCSSで作るウェブサイト作成入門

ブロックレベル要素(３)リスト(箇条書き)の形成

　黒丸や番号順のリスト、あるいは、箇条書きは、それぞれ、ブロックレベル要素の<ul>タグまたは<ol>タグと、<li>タグをセットで使うことで実現できます。リストは、コンテンツを整理するだけでなく、標準的なウェブデザインにあるナビゲーション(メニュー)を作成する際にも利用される重要なタグです。基本的な書き方と属性は次の通りです。

　<ul>と<ol>タグは、入れ子構造にすることもできます。つまり、<ul>〜</ul>の間に<ol>〜</ol>やさらに<ul>〜</ul>を入れたり、それらを逆にするなどにすることです。入れ子構造を間違えないように注意しましょう。以下のサンプルを確認して下さい。

[HTMLサンプル]
<ul>
<li>キャンパス内</li>
<ol>
<li>キンシャチダイニング</li>
<li>猿カフェ</li>
</ol>
<li>キャンパス外</li>
<li>名城公園内</li>
</ul>

[サンプルのブラウザ表示結果]