2014.01.19 [日] CSSのlist-style-type
久しぶりに技術的な話なんかを。 HTMLでWebサイトを制作していくと、<li>タグを頻繁に使います。ナビゲーションメニューやリンクボタンなど、ブラウザでソースを表示してみると意外と多いものです。
- hoge
- hogeho
- hogehoge
- hoge1
- hoge2
- hoge3
そのままブラウザで表示すると
ブラウザのデフォルトCSSで、<ul>にはlist-style-typeにdisc（中黒点）が、<ol>には、list-style-typeにdecimal（数字）が設定されています。W3Cでは、このように各ブラウザの差異が少なくなるように、HTML5のデフォルトCSSの指針を公開しています。
http://www.w3.org/TR/html5/rendering.html
また、CSSの仕様書には<li>ではなく<ol>、<ul>に設定して継承させる事を推奨していますので、各ブラウザのデフォルトCSSもそれに準じています。
http://www.w3.org/TR/CSS2/generate.html#propdef-list-style
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information. 継承は、LI要素にOLとUL要素から「リストスタイル」の値を転送します。これは、リストのスタイル情報を指定する方法としてお勧めします。
このままでは、数多く使われている<li>を扱いづらいということで、reset.cssでlist-style-typeをnoneにしてから、それぞれスタイルを設定していきます。また、最近ではnormalize.cssを利用することで各ブラウザ間のデフォルトCSSの違いを“ノーマライズ（正常化）”することで初期値を活かした使い方もするようになっています。normalize.cssについては、 CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css | コリス にわかりやすく解説されています。
ほとんどの場合、list-style-typeでnoneにしてから、使用することになるのですが、先日、normalize.cssを設定しつつlist-style-typeを利用せずにpaddingの設定で見えなくしている海外のWebサイトを見つけました。
ol, ul {
padding-left: 10px
}
