リスト(ul)を扱う上での注意点

リストタグ（ul,ol）はとても汎用性が高く、ある程度しっかりとしたサイトであれば必ず使用しているタグの一つです。

ただ、ulとliを並べて記述するだけなのになにがそんなに難しいの？と思う方が大半でしょうが、難しくはないものの、スタイルのいじり方とその他注意点がいくつかありますので、それについて3つだけ説明します。

今回、リストに対して指定するスタイルが下のソースになります。

ul {
	line-height:22px;
	color:#888;
	font-weight:bold;
	margin:10px 20px 20px 20px;
	list-style-type:none;
	}
ul li {
	display:inline;
	}
ul li a {
	padding-left:20px;
	display:block;
	background:url(../../gif/18.gif) left center no-repeat;
	}

IE6のバグ

このソースの中の

ul li {
	display:inline;
	}

という記述ですが、前項においてulはブロックレベル要素であることは明らかですが、それを「display:inline;」と指定することでインライン要素に直しています。

この指定は、windows版のIE6で、li要素の上下に隙間の生じるバグがあるための指定です。

ところが、リストをインライン要素に変えると横並びになってしまい、縦のメニューに使用することはできないので、その後の「li a要素」に対して、

ul li a {
	display:block;
	}

と指定して、ブロックレベル要素に戻しています。

list-style-imageを使わないリストマークの指定

これはよく使用しますので覚えておくとよいでしょう。というのは、list-style-imageで●のリストマークを画像に変えると、文字とマークが微妙にずれるんですね～。これを回避するために、list-style-typeをnoneとして、マークを消した後に、backgroundでマーク画像を追加します。（これを知るまではズレが気になって仕方なかったです・・・）

ul li a {
	background:url(../../gif/18.gif) left center no-repeat;
	}

これで完成！サンプルはコチラ→サンプル（ホームページ作成講座）

Lesson6～tableを使ったレイアウト～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>