60おじぃの タグ打ち ホームページ作成講座 / HTMLとスタイルシートで きれいにレイアウト

リストの書き方

上の例のように表示させるには、HTMLとCSSをどのように書いたらよいでしょうか。

基本の書き方

まず、リストの基本の書き方をご覧ください。

ul はUnordered Listで番号なしリストです。リストの前に番号が付きません。
番号付きにする場合はol (Ordered List)を使います。
li はリストの項目です。

上に戻る

リストの指定方法

上の例の指定方法は以下のように書きます。

<div class="list">  --------クラス名をlistと付けます
<h3>カレーの材料</h3>  -----見出し
   <ul>   ---------------------番号なしリスト
      <li>にんじん</li>  ---------リストの項目
      <li>ジャガイモ</li>
      <li>たまねぎ</li>
      <li>カレー粉</li>
   </ul>
</div>

HTMLだけの指定でブラウザ表示させてみました。HTMLだけでも、リストの意味がわかります。
標準では、黒丸がリスト項目の先頭に付きます。

スタイルシートでリストをデザインする

スタイルシートで見出しを強調したり、より見やすくなるよう、リストのデザインを指定します。

.list{  ----------------------クラス名
   width: 300px;  ---------------横幅300ピクセル
   }
h3{  -------------------見出し
   font-size: small;  -----------見出しの大きさをsmall小さく
   padding: 3px;  ---------------見出しの周りを3ピクセルに
   background-color: yellow;  ---見出しの背景色をきいろに
   }
ul{
   list-style-type: none;  ------リストの先頭のマーカー
   }                             （黒丸などのしるし）を付けない
li{
   border-bottom: dotted 1px #c0c0c0; padding: 3px;
   }               --------------文字の下に点線を入れる

リスト指定、スタイルシートの説明

上の例のリスト指定の説明です。

.list

HTMLでは、<div class="list"> とクラス名を付けました。
スタイルシートで指定するときは、ピリオドを付けて .list とします。div .listと書いてもかまいません。
横幅を300px に指定しました。

h3

見出しの大きさを小さくし、背景色を黄色にしました。
padding パディングを指定しなくてもいいのですが、背景色が文字ぎりぎりになるので、見栄えは悪くなります。
CSSはピクセル単位で細かい指定が可能なので、パディングやマージンを使い分けると、きれいな仕上がりになります。

ul

標準ではリストの先頭にマーカーとよばれる黒丸などのしるしが入ります。
list-style-type: none; はこのマーカーを付けないという指定です。

li

各項目の下にグレーの点線をいれて、見やすくしました。
パディングを３ピクセルにしたのは、文字と点線がくっつかないようにするためです。