ホームページの作り方（HP作成法）を解説

>>ホームページの作り方TOP　>>リストの設定

■リストの設定

リストの基本骨格は以下の通りです。

<ul> <li></li> 　　・ 　　・ <li></li> </ul>

ulをolに変えると番号付きリストになります。

• コンテンツ
• コンテンツ
• コンテンツ

デフォルトではマーカーは黒点ですが、list-style-typeを使って他のデザインに変える事ができます。

circle(白点)、square(正方形)、decimal(数字)、none(なし)等。また、マーカーに画像を指定することもできます。list-style-image:url(画像)で指定できます。

これらはスタイルシートを使って以下のようにすることでできます。

ul　｛ 　　　list-style-type:none; 　　　} li　｛ 　　　list-style-image:url(abc.jpg); 　　　} li　｛ 　　　list-style-position:inside; 　　　} li　｛ 　　　background:url(abc.jpg) 20px 10px no-repeat; 　　　}

list-style-positionは、リストのマーカーの位置を内側に入れるか、外側にするかで、四角形の外枠を内側か外側かと同じと考えてください。insideは内側のことです。

一番下は、マーカー画像を背景として配置する例で、abc.jpgという画像を20px,10pxの位置に繰り返しなしで配置ということです。

XHTMLにおいてlistはbody直下における要素ということで、メニューを作るときには必ず使うといっていいほど重要ですが、IEのリスト上下にマージンが広がるバグや、 IEと他のモダンブラウザでの表示の違いなどいろいろ悩まされます。