※サポートされているブラウザは現在調査中です。
iconプロパティは、要素のアイコンを指定する際に使用します。
文書内のテキストなどが多すぎて閲覧の邪魔になる場合、
iconプロパティで任意の要素にアイコンを割り当てることで閲覧しやすくなるかもしれません。
iconプロパティの値には、URIでアイコンファイルを指定します。
アイコンファイルはカンマ区切りで複数指定することができますが、異なるフォーマットのアイコンを指定しておくことで、
様々なプラットフォームやメディアに合わせて、アイコンを使い分けることができます。
ユーザーエージェントは、カンマ区切りで指定されたURIを1つずつ参照して、描画可能なアイコンを表示します。
描画可能なアイコンが無い場合には、autoと同じ表示となります。
iconプロパティで指定する要素のアイコンは、contentプロパティの値がiconに設定されているときに有効となります。
※メモ：iconプロパティについては、動作を確認中です。上記の説明は大体合っていると思いますが、以下のサンプルはイマイチ自信がありません。
■値
- auto
- ユーザーエージェントの提供する一般的なアイコンが使用される（初期値）
- URI
- URIで1つ以上のアイコンファイルをカンマ区切りで指定する
- inherit
- 親要素の値を継承する
■初期値・適用対象・値の継承
- 初期値
- auto
- 適用対象
- すべての要素
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（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=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/htmq.swf” width=”88″ height=”31″>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” alt=”イラスト”>
</p>
<h4>iconプロパティを適用した場合</h4>
<p>
<embed class=”sample” src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/htmq.swf” width=”88″ height=”31″>
<img class=”sample” src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” width=”128″ height=”128″ alt=”イラスト”>
</p>
</body>
</html>
ブラウザ上の表示
iconプロパティを適用しない場合
iconプロパティを適用した場合
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（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=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/htmq.swf” width=”88″ height=”31″>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” alt=”イラスト”>
</p>
<h4>iconプロパティを適用した場合</h4>
<p>
<embed class=”prefix_sample” src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/htmq.swf” width=”88″ height=”31″>
<img class=”prefix_sample” src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” width=”128″ height=”128″ alt=”イラスト”>
</p>
</body>
</html>
ブラウザ上の表示
iconプロパティを適用しない場合
iconプロパティを適用した場合
