リスト(ul)を扱う上での注意点
ドリル式ホームページの作り方TOP >> Lesson6〜tableを使ったレイアウト〜 >> リスト(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;
}
このソースの中の
ul li {
display:inline;
}
という記述ですが、前項においてulはブロックレベル要素であることは明らかですが、それを「display:inline;」と指定することでインライン要素に直しています。
この指定は、windows版のIE6で、li要素の上下に隙間の生じるバグがあるための指定です。
ところが、リストをインライン要素に変えると横並びになってしまい、縦のメニューに使用することはできないので、その後の「li a要素」に対して、
ul li a {
display:block;
}
と指定して、ブロックレベル要素に戻しています。
これはよく使用しますので覚えておくとよいでしょう。 というのは、list-style-imageで●のリストマークを画像に変えると、文字とマークが微妙にずれるんですね〜。 これを回避するために、list-style-typeをnoneとして、マークを消した後に、backgroundでマーク画像を追加します。（これを知るまではズレが気になって仕方なかったです・・・）
ul li a {
background:url(../../gif/18.gif) left center no-repeat;
}
これで完成！サンプルはコチラ→サンプル（ホームページ作成講座）