リストマークが表示されない

Web

html5を使い始めた頃、いろいろネットや本を調べながらで、とりあえずCSSには新しいhtml5用の
タグとかも追加されたのでそれも含めてのリセットスタイルシートを入れるといいらしいということで、
入れてみました。

そもそも、リセットスタイルシートとは、それぞれのタグがもともともっているパディングやら
マージンやらボーダーやらの指定をいったん0にしておいて、自分の思うとおりの設定を
しやすいようにするものです。

なんとなくざーとは見たものの、よくわからないものもあったりして、でもとりあえず、
入れておこうとダウンロードしてきたものを何の疑いもなく入れていたところ、思わぬ落とし穴
も多々ありました。
まぁ、私の勉強不足が招いたことですが。。。。

その一つで、ul,olタグで、普段デザイン上であまりlist-style-type(リスト項目の
・とか番号とか)を使うことがなく、久しぶりに、リストらしいデザインでいざ、list-style-type
で四角いマーク(square)を使用することになりました。

ところが、全然まったく、現れてくれない・・・・・

これはやっぱり、リセットシートの仕業・・・。ということで、一体なにが効いちゃって出てこない
のか、調べてみたところ、ulまたはolpaddingのリセットが原因でした。

文字の大きさ等にもよりますが、私の場合はpadding-leftに10px以上の値を入れたところで現れてくれました。

因みに、リセットスタイルシート全般について『コリス』さんのサイトでとても詳しく書かれていました。
[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ-2010年版
http://coliss.com/articles/build-websites/operation/css/a-comprehensive-guide-to-css-resets.html

また、『HTML5でサイトをつくろう』さんのサイトでもとてもわかりやすく説明されています。
はじめてのHTML5 第2回『HTML5のされに詳しいCSSリセット方法』
http://www.html5-memo.com/first-html5/html5-002/


« »

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントフィード

TRACK BACK URL: http://riemitsu.net/archives/199/trackback/