制作者の活動(PR)。

堀北真希ちゃんにうさみみを着けた動物化キャラクタ。次ぎ
主な作品

アイドルをモデルにしたオリジナルキャラクタのイラスト例とアニメーション動画

インライン要素にアイコン画像を付けるには。

CSSの小技として、あるインライン要素にアイコンとして画像を付けるにはどうすべきかを考えて見ましょう。

注釈を表すリストのスタイルでも同様の事を扱っておりますが、ここでは一般のインライン要素に絞ったお話をしたいと思います。

インライン要素にアイコン画像を付けるには・目次。

はじめに。

インライン要素に与えるアイコン。

例えば

等のような場合に、それだと分かるようにアイコンを与えておくと言うのがあります。

後者の場合には、しばしば二つの四角形をずらして重ねたアイコンが使われているようです。

最も簡単に要素にアイコンを与えるには。

こう言った表現を最も簡単に実現するには、アイコンを付けたい要素の前か後に<img>要素を記述してアイコンを埋め込む事でしょう。

確かにその方法が一番確実です。

ですが、この方法ではいちいちマークアップの度に<img>要素を書かなければならないので不便です。

そこで、CSSでやってみようと言う事になります。

仕様上最もスマートなやり方は、やはり:before擬似要素か:after擬似要素にcontentプロパティで与える事でしょう。

例えば、以下のように記述する事で、リンク先がPDF文書であれば「Doc.GIF」で表されるGIF画像アイコンがアンカーの後ろに表示されるでしょう。

a[type="application/pdf"]:after {
    content: url('Doc.GIF');
    }

インターネットエクスプローラを配慮する場合。

しかし、インターネットエクスプローラでは:before擬似要素や:after擬似要素を認識出来ません。

また、6.0以前では属性セレクタも認識しません。

勿論、表示出来なくても実用上差し障りが無いのであれば表示されなくても問題はありませんが(そもそも表示出来なければ絶対に困るのであればHTML側で<img>要素をきっちり記述すべきです)、それでも最大シェアのインターネットエクスプローラで表示出来ない事に抵抗を感じるのであれば、何らかの工夫が必要でしょう。

インターネットエクスプローラ 7.0でもアイコンが付けられるようにするには。

インターネットエクスプローラ 7.0でもアイコンが付けられるようにするには、以下のようにすれば良いでしょう。

  1. paddingプロパティなどを用いて

    アイコン分の幅のパディングを取ります。

  2. backgroundプロパティなどで背景にアイコン画像を与えます。

具体的には以下のようになります。

a[type="application/pdf"] {
    padding: 0 16px 0 0;
    background: url('Doc.GIF') transparent no-repeat right center;
    }

インターネットエクスプローラ 6.0でも表示出来るようにする場合。

但し、この場合でもインターネットエクスプローラ 7.0ではアイコンが表示されるものの、6.0では表示されません。

そこで、どうしてもアイコンを表示させたいのであれば、class属性で適切なクラス名を与えておくと良いでしょう。

例えば、class="linkToPDF"属性を与えておいて、CSS側では以下のように記述します。

a.linkToPDF {
    padding: 0 16px 0 0;
    background: url('Doc.GIF') transparent no-repeat right center;
    }

実際のところ、どうすべきか？

以上では、

をそれぞれ挙げておきました。

実際のところ、初めに書いた通り、どうしても表示されないと問題が起こり得ると言うのであれば多少面倒でもHTML文書側で記述しなければいけません。

ですから、CSSで実現する以上は表示されない環境がある事は承知しておくべきと言えます。

ただ、シェアが高い環境で効果が無いのはと言うのであれば、インターネットエクスプローラ 5.5以降(マッキントッシュ版は5.0以降)でも対応出来る方法も検討すべきと言えます。

応用。

要素の前か後にアイコンを付ける場合の方法ですが、応用する事でアイコンを上に寄せたり下に寄せたりする事も出来ます。

これには、当該要素の上か下にもパディングを与えて背景画像を上または下にずらした位置に表示させるようにします。

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

ページ外へのご案内。

marguerite.site@gmail.com