Yahooのトップページで利用しているアイコンについて

質問

Yahooのトップページで利用しているアイコンについて

いつもお世話になっております。
Yahooのトップページにある、ニュース欄の最新のところに「new」とアイコンが表示されていますよね。
これを右クリックで保存したのですが、保存した画像を見てみると、Yahooで利用されているアイコンが全部集まった画像になっていました。
どうやってnewアイコンなど、指定したものだけを表示していたのでしょうか？

技術的に、どうやったら実現できるでしょうか。
分かる方がいましたらお願いします。

回答No.1

qualheart · ベストアンサー

表示する箇所にSpanタグを置き、このSpanの背景画像として指定されてますね。
Newアイコンだけが表示されるのは、CSSにてSpanに対してbackgroup-position、height、widthの値を指定して、背景画像の表示位置、縦幅、横幅を指定して、調度Newアイコンの部分だけが表示されるように調整しているためです。

ご参考まで。

お礼

回答ありがとうございます。
なるほど、background-positionでそんな事が出来たのですね！
試してみて、実現できました。ありがとうございました！

以下、実現した方法をメモしておきます。

//////////CSS記述部分
.aaa
{
　　/* サンプルにはYahooの画像をそのまま利用しました */
　　background-image:url('image.png');
　　background-position-x:0px;
　　background-position-y:-58px;
　　width:25px;
　　height:15px;
}

//////////HTML記述部分
<span class="aaa"></span>

回答No.2

DIooggooID

もう一度、よくご覧いただきたいのですが、・・・

Yahoo の トップページで表示している new は、アイコンではなく、

<span class="iconNew" title="NEW">NEW</span>

このようにして、 NEW をカラフルに表示しているだけです。

参考URL：

http://www.kanzaki.com/docs/html/htminfo14.html#S13.2