要素先頭に画像を挿入

IEでも要素先頭に画像を挿入する方法。

見出しなどの先頭に画像を自動的に挿入するには、通常before擬似要素を用いる。

h1:before{content: url(***);}

このようにすると全h1の要素先頭にurlで指定した画像が表示される。しかし、現時点でInternet Explorerはbefore擬似要素に対応しておらず、上記のような記述をしても表示されない。

そこで、IEでも要素の先頭に画像を表示させる方法を紹介する。

IE6はdisplayプロパティへの対応も貧弱だが、運よくlist-itemに対応している。つまり、見出しなどの要素をリストに変換しリストに画像を指定できる機能を用いて先頭に画像を表示させる。

h1{
        display: list-item;
        list-style-image: url(***);
        margin-left: **px;
}

***には表示させる画像を、**には画像の横幅を入れ画像のはみ出しをなくす。サンプルページ。この方法はlist-itemに対応する全ブラウザで可能なので、当然GeckoやOperaでも通用する。

ページ情報

作成日時
2005/01/23
最終更新日時
2005/01/23
HTML4.01版
index.html
XHTML1.1版
index.xhtml
XML原本
index.xml