トップページ  > CSS3  > icon

★CSS3リファレンス

icon …… 要素のアイコンを指定する
※サポートされているブラウザは現在調査中です。

iconプロパティは、要素のアイコンを指定する際に使用します。 文書内のテキストなどが多すぎて閲覧の邪魔になる場合、 iconプロパティで任意の要素にアイコンを割り当てることで閲覧しやすくなるかもしれません。

iconプロパティの値には、URIでアイコンファイルを指定します。 アイコンファイルはカンマ区切りで複数指定することができますが、異なるフォーマットのアイコンを指定しておくことで、 様々なプラットフォームやメディアに合わせて、アイコンを使い分けることができます。 ユーザーエージェントは、カンマ区切りで指定されたURIを1つずつ参照して、描画可能なアイコンを表示します。 描画可能なアイコンが無い場合には、autoと同じ表示となります。

iconプロパティで指定する要素のアイコンは、contentプロパティの値がiconに設定されているときに有効となります。

※メモ:iconプロパティについては、動作を確認中です。上記の説明は大体合っていると思いますが、以下のサンプルはイマイチ自信がありません。

■値

auto
ユーザーエージェントの提供する一般的なアイコンが使用される(初期値)
URI
URIで1つ以上のアイコンファイルをカンマ区切りで指定する
inherit
親要素の値を継承する

■適用対象・値の継承・初期値

初期値
auto
適用対象
すべての要素
値の継承
しない

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

img.sample, embed.sample {content:icon;}

img.sample {icon:url(../images/icon_image.png);}
embed.sample {icon:url(../images/icon_embed.png);}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<h4>iconプロパティを適用しない場合</h4>
<p>
<embed src="../images/htmq.swf" width="88" height="31">
<img src="../images/img002.gif" alt="イラスト">
</p>

<h4>iconプロパティを適用した場合</h4>
<p>
<embed class="sample" src="../images/htmq.swf" width="88" height="31">
<img class="sample" src="../images/img002.gif" width="128" height="128" alt="イラスト">
</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

iconプロパティを適用しない場合

イラスト

iconプロパティを適用した場合

イラスト

■ベンダープレフィックスを付けた場合の使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

img.prefix_sample, embed.prefix_sample {
content:icon;
content:-moz-icon;
content:-webkit-icon;
content:-o-icon;
content:-ms-icon;
}

img.prefix_sample {
-moz-icon:url(../images/icon_image.png);
-webkit-icon:url(../images/icon_image.png);
-o-icon:url(../images/icon_image.png);
-ms-icon:url(../images/icon_image.png);
}
embed.prefix_sample {
-moz-icon:url(../images/icon_embed.png);
-webkit-icon:url(../images/icon_embed.png);
-o-icon:url(../images/icon_embed.png);
-ms-icon:url(../images/icon_embed.png);
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<h4>iconプロパティを適用しない場合</h4>
<p>
<embed src="../images/htmq.swf" width="88" height="31">
<img src="../images/img002.gif" alt="イラスト">
</p>

<h4>iconプロパティを適用した場合</h4>
<p>
<embed class="prefix_sample" src="../images/htmq.swf" width="88" height="31">
<img class="prefix_sample" src="../images/img002.gif" width="128" height="128" alt="イラスト">
</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

iconプロパティを適用しない場合

イラスト

iconプロパティを適用した場合

イラスト

▲ページ先頭へ
トップページ  > CSS3  > icon
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ