「list-style-type:none」でリストのマークが消えない場合にチェックすること

もうずいぶん前の話。

ある時FC2ブログの公式テンプレートを使っていて、HTMLタグの「ul」のリストのマークがどうしても消えなくて困ったことがあった。普通リストタグのマークを消すにはCSSで「list-style-type:none」を設定するのだが、なぜかその時はまったく効果が現れず、行頭の黒い点が表示されてしまう状態に。(ちなみに当時はCSSについての知識がほとんどなかったので、Webのタグリファレンスのページとにらめっこしながら何とかカスタマイズしていた。)

結局対処方法がわからなかったので、当時はテンプレートを変更することで解決した。逆の言い方をすれば「テンプレートを変更することしか、解決する手段が見つからなかった」ということになる。

で、結局なにが問題だったかというと、単に「list-style-image」で「標準マークにそっくりの黒丸画像がulのマークに設定されていた」というだけの話だった。(何でこんな作りになっていたのかは不明。)リストにマークの設定をする場合、「list-style-type」より「list-style-image」が優先されてしまう。また、「list-style-type」は「list-style-image」とは別のプロパティのため、いくら「list-style-type:none」を設定してもimageの方が消えるわけではなかったということ。

もし似たようなカスタマイズで悩んでいる人がいたら、「list-style-type:none」と同時に「list-style-image:none」を設定すれば、問題は解決するかもしれない。(あるいはどこかに記述されているlist-style-imageプロパティを消す。)個人的にはこれに気が付いたときはさらに別のテンプレートをカスタマイズして使っていたので、結局「list-style-image:none」を使うことはなかったんだけれども。