komorebikoboshiのブログ

プログラミング記事(趣味レベル)が多め。

firefoxで数字付きリストが表示されない(解決済み)

カテゴリはこれで適切なのか?という気はしますが。
(注意)このエントリーはかなり無駄だらけです。急ぐ方は小見出し"さらにググる"までスクロールしてください。自分にCSSの知識があれば記事の半分以上は必要なかったのでしょうけど。
firefoxはてな記法の数字付きリスト表記(+〜〜)が普通のリスト表記(-〜〜)と同じ表記になっていたのでなんとか修正しようともがいた記録です。

気づく

そもそも数字付きリスト表記を使ったのが初めてだったのでこんなこと全然知らなっかったよ。

まず疑ったこと

このブログははてなのデザインテーマのうちPure-sodaを使っています。ただ、リスト表記が気に入らなかったのでそこをCSSで変更していました(詳細タブのスタイルシート)その時書いていたのがこれ

div.section ul, div.section ol {
 margin:0.5em 1em 0.5em 50px;
 font-size:100%;
 line-height:130%;
}

要するに階層が深くなったときインデントするようにしていたのです。
で、ここが唯一自分でいじったところなのでまずこれを消してみました。結果は、解決せず。

ソースを見る

そこで、ソースを見てみました。もしかしてはてな記法の不具合なんじゃないかと。で、実際見てみるとちゃんと数字付きリストのほうは<ol>で囲まれていました。ここに問題はなし。

ググる

とりあえずリスト表記の先頭の記号を変更するスタイルシートをググってみました。どうやらlist-style-typeで変更できるらしい。で実際に上を書き換えてみました。

div.section ol {
 margin:0.5em 1em 0.5em 50px;
 font-size:100%;
 line-height:130%;
 list-style-type:decimal;
}
div.section ul {
 margin:0.5em 1em 0.5em 50px;
 font-size:100%;
 line-height:130%;
}

結果はダメでした。
この時点で一回投げて上のエントリーを書きました。

IEでみる

で、ふと思いついてIEでみてみました、XPなのでIE8です。そうするとちゃんと数字付きリストが表示されているじゃないですか、やーだー。ここにいたって問題はfirefox(自分が使っているのはPale Moonだけど)だと気づきました。

さらにググる

で今度は firefox ol でググってみました。そこで見つけたページが掲示板/HTML質問板[過去ログ]/一覧/Firefoxでolリストが作れません。 - TAG index Webサイトでした。

1 名前: 匿 : 2006/05/31(水) 09:30 ID:6PWYN/0j

li { list-style: outside ; }

と書くとスタイルタイプの部分にlist-style-typeプロパティの初期値であるdiscが適用されてしまうような感じなのでしょうか?

たしかにPure-sodaのCSSには

.body .section ul, .body .section ol {
	list-style		: inside;
}

と書いていました。よーし分かった、li {list-sytle:decimal ;}と書けばいいんだな。実際書きました。普通のリスト表記のほうにも数字が付きました。(おい
しかし、もうゴールは目の前です。最終的には

div.section ul, div.section ol {
 margin:0.5em 1em 0.5em 50px;
 font-size:100%;
 line-height:130%;
}
ol li {list-style: decimal}

これで解決しました。

ここまで読んでくださった方へ

ありがとうございました。そしてお疲れ様でした。
さて、「結局最後の結論だけ書けばよかったんじゃないか」という声が聞こえそうですが、たしかにその通りです。ひたすら冗長に書いてしまいました。ただまあ個人的には「自分がどう考えてその結論に至ったのか」も書いておきたかったのです。CSSはほとんど知らない自分には最初からポンと結論を出すことはできませんでした。なんか試行錯誤しているうちにできた、その試行錯誤は終わってみれば割と楽しかったようにも思います。ので、思いきり語りました。"楽しく書くこと"がこの日記でやりたいことなので。