制作者の活動(PR)。

アイドル・堀北真希ちゃんはうさぎの耳が似合うと思って作ったオリジナルキャラクタ
主な作品

人気女優をモデルにした創作キャラクタのイラスト例とそれを組み込んだアニメーション動画

<ol>要素に於けるファイヤーフォックス等でのバグ対策。

CSSの小技として、<ol>要素に於いて見られるファイヤーフォックス等"もじら系ユーザエージェント"のバグへの対策です。

<ol>要素に於けるファイヤーフォックス等でのバグ対策・目次。

ファイヤーフォックス等にはどのようなバグがあるのか。(平成19年 6月 1日 更新)

現行のファイヤーフォックス(ヴァージョン 1.5.x.〜2.0.x.)等の"もじら系ユーザエージェント"では、ある条件で<ol>要素に於いてバグが発生します。

具体的には、

と言うものです。

具体的なサンプル。

ちょっと分かり難い説明ですので、具体例を挙げてみましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<title>&lt;ol&gt;要素のサンプル</title>
<style type="text/css">
    dl, ol li p { margin-left: 1em; }
    dt, ol li p { display: list-item; list-style-type: disc; }
    </style>
</head>
<body>
<ol>
    <li>一番目</li>
    <li>
        <p>二番目は二つあります。</p>
        <dl>
            <dt>二番目の一</dt>
            <dd>二番目の一の意味</dd>
            <dt>二番目の二</dt>
            <dd>二番目の二の意味</dd>
            </dl>
        </li>
    <li>三番目</li>
    </ol>
</body>
</html>

これを、ファイヤーフォックス 2.0.0.3とオペラ 9.20で見てみましょう。

オペラ 9.20で見た場合
オペラ 9.20では問題無く、<ol>要素直下の<li>要素に 1., 2., 3.と番号が付いております。
ファイヤーフォックスで見た場合
一方ファイヤーフォックス 2.0.0.3では、二番目と三番目の間にdisplay: list-itemプロパティが付いた要素が三つ入っているため、その分カウントが飛んで結局 1., 2., 6.と言うナンバリングとなりました。

このようなバグは他のユーザエージェントでは見られないようです。

一応、HTMLの仕様書には、<ol>要素直下の<li>要素には飛び飛びにならないように番号を付けなければいけないとは書かれておりません。

とは言え、飛び飛びになっている順序付きリストを見た閲覧者は違和感を感じる事でしょう。

そこで、この対策を執ってみたいと思います。

どのようにして対策を立てるか。(平成19年 6月12日 更新)

<ol>要素、すなわち順序付きリストのリスト項目に付ける番号は、CSSではカウンタとして提供されている機構が対応します。

そこで、カウンタで番号を付け直す事とします。

このとき、

ので、

と言う事を抑えておきましょう。

問題点。(平成19年 6月12日 更新)

具体的な対策。(平成19年 6月12日 更新)

具体的な対策としては、以下のようにします。

/* \*/
ol { counter-reset: item; }

ol>li {
    margin-top: 0;
    margin-left: 0.5em;
    list-style-type: none;
    line-height: 1em; /* 必ず適切な値を指定して下さい。 */
    }

ol>li:before {
    display: block;
    margin: 0 0 -1em -1.5em;
    line-height: 1em;
    content: counter(item) '. ';
    counter-increment: item;
    }

ol>li>*:first-child {
    margin-top: 0;
    }

/* */

/* IE 7.x対策 */
*+html ol>li {
    list-style-tye: decimal;
    margin-left: 0;
    }

/* サファリ 2.0までの対策 \*/
html:\66irst-child ol>li { list-style-type: decimal; }
html:\66irst-child ol>li:before { content: "\a0"; }
/* */

この定義は以下のようになります。

  1. まず、<ol>要素に於いてitemカウンタをクリアします。
  2. また、<ol>要素直下の<li>要素ではマーカを非表示にします。
  3. この上で、<ol>要素直下の<li>要素の直前にitemカウンタの番号を附与して、且つitemカウンタのカウントアップを行います。このとき、表示位置をmarginプロパティで調整します。

  4. 最後に、インターネットエクスプローラ 7.xでしか認識されないある要素に続く>html>要素に含まれる<ol>要素直下の<li>要素に対してlist-style-tye: decimalプロパティを与える事で、カウンタを実装していないインターネットエクスプローラ 7.xでもちゃんと番号が表示されるようにします(この番号はデフォルトスタイルで与えられるものです)。

インターネットエクスプローラ対策。(平成19年 6月 1日)

尚、インターネットエクスプローラ 6.x以前では、

ともに認識しないため、一連のプロパティ定義は全て無効となります。

但し、念のためマッキントッシュ版のインターネットエクスプローラに認識させないために、二つのコメント/* \*/と/* */で囲んでおきます。

サファリ対策。(平成19年 6月12日 更新)

サファリ 2.xまでにはカウンタが実装されていないため、サファリのバグを用いてこれらを無効にするプロパティ定義を行います。

具体的には、html:\66irst-childの下位セレクタで、<ol>要素及び<ol>要素直下の<li>要素のスタイルをキャンセルします。

但し、contentプロパティにnone値を入れてもキャンセルされないため(contentプロパティにnone値は定義されていないため)、"\a0"(通常の半角空白とは別の空白文字)だけを出すようにします。

更にスタイルを良くするために。

更に綺麗な表示になるようにするため、以下のような工夫も行います。(以下平成19年 4月27日)

  1. まず、<ol>要素直下の<li>要素(セレクタは ol>li)にline-heightプロパティで適切な行の高さを指定します。

  2. 続いて、<ol>要素直下の<li>要素の直前(セレクタは ol>li:before)について、以下のプロパティを与えます。

    1. まず、display: blockプロパティを与えます。

      • display: inlineプロパティだと、直下にブロックレヴェル要素が入ったときに勝手に改行されてしまうからです。display: blockプロパティでも改行は止められませんが、上下のマージンを変更出来るため改行を実質的に無効に出来ます。

    2. 続いて、ol>liに与えたline-heightプロパティ値と同一の値のline-heightプロパティを与えます。

      こうする事で、ol>li要素の本体は、表示される番号と同じ高さになります。

      具体的には、

      1. display: blockプロパティを与えているため、番号を表示した後の文字はline-heightプロパティの値ぶん真下に改行されます。
      2. しかし、下マージンがline-heightプロパティに負号を付けた値になっているため、番号を表示した後の文字はline-heightプロパティの値ぶん真下に改行された後line-heightプロパティの値ぶん真上に引き上げられ、結局番号と同じ高さに表示される事になります。
  3. また、番号は幅を取るので、それに合わせて左右のマージンも調整します。
  4. 最後に、<ol>要素直下の<li>要素の直下にある第一子要素(セレクタ: ol>li>*:first-child)について、上マージンを零にします。こうしないと、改行が入ってしまうからです。

実際にこのスタイルを与えた場合。

実際にこのスタイルを与えた場合にファイヤーフォックスでどのように表示されるのかを見てみましょう。

新しいスタイルを当てる前
新しいスタイルを当てる前では、先ほども解説した通り、三番目の項目の番号が 6. になっております。
新しいスタイルを当てた後
新しいスタイルを当てると、スタイル定義の副作用で改行幅が変わっておりますが、正しく番号が付けられているのが分かります。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com