制作者の活動(PR)。

堀北真希ちゃんにうさぎの耳を着けた擬獣化キャラクタ
主な作品

アイドルをモデルにした制作者のオリジナルキャラクタを用いた作品の一例

注釈を表すリストのスタイル。

CSSの小技として、注釈を<ul>要素で表す場合に使えるスタイルです。

注釈を表すリストのスタイル・目次。

注釈のマークアップについて。

HTML文書に於いて、段落の後に注釈を記述したいと思う事は良くあると思います。

紙の文書では注釈のブロックは先頭に※印等をつけたり, 左余白をつけたり, 小さな文字にしたり, 枠で囲んだり, 或いは背景色を通常の段落と異なる色にするなど、普通の段落とは異なった表現をするものです。

さて、注釈をマークアップするとしたとき、普通の段落と同様<p>要素で、注釈を表すクラス名を添えてマークアップされる方も多いと思います(例えば、<p class="note">要素など)。

これでも問題は無いと思うかも知れません。

実際、今日ではCSSに依り自由な表現が可能であり、従って適切なスタイルシートを併用する事でクラス名で普通の段落と区別する事は可能だからです。

しかしながら、CSSを認識しない環境では単純に<p>要素でマークアップしてしまうと、幾らクラス名で区別しても普通の段落と全く同じスタイルでレンダリングされてしまい、その結果普通の段落と区別がつかなくなる恐れがあります。

また、ユーザスタイルシートを利用している場合にも、当該クラスに対して特別に対処が成されない限り、通常の段落と区別が付かなくなります。

このような理由から、制作者は注釈など通常の段落とは異なる文章ブロックは、<ul>要素でリスト形式としてマークアップしております。

注釈を表すリストのスタイルの概要。

注釈を表すリストについては、通常の順不同リストに与えられるマーカでも充分かも知れません。

ただ、折角CSSで自由にスタイルが付けられるのですから、更にそれらしいスタイルにする事を考えてみたいと思います。

ここでは、各注釈項目の冒頭に※印を付ける事を考えてみたいと思います。

話を簡単にするため、注釈を表す<ul>要素には"notes"と言うクラス名を与えているものとします。

マーカの代わりに画像を用いるのであれば、list-style-imageプロパティを用いれば良いのですが、この画像に関して大きさを調整するなどと言った事は出来ません。

そこで、出来れば、マーカの代わりにテキストが使えると良いでしょう。

残念ながら、現在のところネットスケープ 4.x, インターネットエクスプローラ及びオペラ 6.xでは利用出来ませんが、その他の環境では:before擬似要素を利用すれば簡単に記述が出来ます。

一方、 インターネットエクスプローラ及びオペラ 6.xでは仕方がありませんので※印の画像をマーカにする事で対処しましょう。

オペラ 6.xとインターネットエクスプローラを弾くには幾つか方法がありますが、ここでは、最も単純な方法として、オペラ 6.xとインターネットエクスプローラで読まない外部スタイルシートを作る方法を利用するものとします。

注釈を表すリストのスタイルの実際。

まず、HTML文書がリンクするスタイルシートの冒頭に、以下の記述を行います。

@import "Opera6andIE.css";
@import "Standard.css" screen, projection;
  1. 前者はオペラ 6.x及びインターネットエクスプローラでも読み込むスタイルシート
  2. 後者はオペラ 6.x及びインターネットエクスプローラでは読み込まないスタイルシート

となります。

以上に依り、後者はオペラ 6.x及びインターネットエクスプローラでは読み込まれないスタイルシートとなります。

続いて、オペラ 6.x及びインターネットエクスプローラでも読み込むスタイルシート"Opera6andIE.css"では、以下のように記述します。

ul.notes li {
    list-style-type: disc;
    list-style-image: url('Kome.GIF');
    }

ul.notes ul li {
    list-style-type: disc;
    list-style-image: none;
    }

ul.notes ol li {
    list-style-type: decimal;
    list-style-image: none;
    }

ここでは、クラス名「notes」を持つ<ul>要素直下にある<li>要素に限り、マーカ画像「Kome.GIF」を適用します。

最後に、オペラ 6.x及びインターネットエクスプローラでは読み込まないスタイルシート"Standard.css"では、以下のように記述します。

ul.notes li { list-style-image: none; }

ul.notes>li ul.notes>li,
ul.notes>li {
    list-style-type: none;
    text-indent: -1em;
    }

ul.notes>li:before {
    display: inline;
    content: "\203b";
    }
}

こちらでは、先に読み込まれた"Opera6andIE.css"でのプロパティ定義を取り消しつつ新たなプロパティ定義を行っております。

具体的には、

  1. まず、クラス名「notes」を持つ<ul>要素直下にある<li>要素のマーカに使われている画像の指定をキャンセルします。

  2. 続いて、クラス名「notes」を持つ<ul>要素直下にある<li>要素において、マーカを非表示にして、一文字分左に"逆字下げ"します。

  3. 最後に、:before擬似要素を用いてこの<li>要素要素の直前に※印を出力します。

これで、オペラ 6.x及びインターネットエクスプローラ以外のCSS対応ウェブブラウザでは、マーカの代わりに※印の文字が使われるようになります。

注釈を表すリストのスタイルにおいて、注意すべき事。

オペラ 6.x及びインターネットエクスプローラでマーカ代わりに用いる画像については、行の高さに依存するようです。

具体的には、画像はなるべく下寄りに作って上の方に余白を付けておくと良いようです。

あとは、文字の大きさが想定出来ないのですが、マーカに使う文字は10ピクセルズ程度の大きさにすれば良いでしょう。

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

ページ外へのご案内。

marguerite.site@gmail.com