web-dev-qa-db-ja.com

IMGタグでスプライトを使用していますか？

スプライトの使用方法は理解していますが、IMGタグに「src」属性は必要ありませんか？常にSPANまたはその他のタグを使用してbackground/width/etcを設定できますが、意味的には正しくありません。

基本的に、IMGタグのSRCを省略してスプライトだけを使用したいのですが、HTMLが原因で技術的に有効でないことが心配です。ありがとう。

htmlcsscss-spriteshtml-validation
61
Ryan Peters

意味的な正確性について：

画像に意味的な意味がある場合、コンテンツとみなされる場合、IMGタグを使用する、スプライトなしで、正しくALTをセットアップします。

画像が単なる装飾である場合、ボックスの背景、ボタンの背景、メニューオプションの背景など、意味的な意味がないため、 CSSのSPAN、DIVなどの背景として使用します。この場合、スプライトを使用できます。

57
kapa

スプライトを使用することは、必ずしもcssバックグラウンドでスプライトを定義する必要があることを意味しません。また、IMGタグスプライトを使用して、基本的に画像をトリミングする必要があります。その手法を説明する2つの良い記事があります。

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

CSSとIMGの両方のメソッドには確かに独自の利点があるため、どちらがより適しているかを把握する必要があります。

59
wdev

Srcには1x1の透過gif（いわゆるスペーサー）を使用します。次に、そのimgタグの背景画像を対応するbg位置に設定します。このようにして、スプライトの速度を利用し、コードのセマンティクスを維持します（alt属性を引き続き使用できます）

7
Faisal Debouni

常にSPANまたは他のタグを使用してbackground/width/etcを設定できますが、意味的には正しくありません

実際には、CSSを使用してspanまたはdivの背景を設定することに何の問題もありません。それはタグの全体的なポイントであるため、画像からsrcを省略することは実際には構文的に間違っています。標準には、テキストをスパン内に配置する必要があるということはありません。構文的に言えば、要素の背景を変更するのが最も正しい方法です。

W3Cでのimgタグの参照は次のとおりです。 http://www.w3.org/TR/html401/struct/objects.html#h-13.2

そして、少し余分な読書： http://www.w3.org/TR/html4/struct/global.html#h-7.5.

これらの要素は、コンテンツをインライン（SPAN）またはブロックレベル（DIV）に定義しますが、コンテンツに他の表現上のイディオムを課しません。したがって、作成者はこれらの要素をスタイルシート、lang属性などと組み合わせて使用​​し、HTMLを自分のニーズや好みに合わせて調整することができます。

5
Richard Key

CSSの背景、または HTML Canvas 要素を使用して、動的に描画できます。キャンバスを使用すると、画像を簡単にサブセット化して、 ブレンドモード効果 を実行できます。

3
Phrogz

これを解決するには、オプションを再考します。

<a>またはdisplay:block;で<div>で定義された領域を作成し、overflow hidden;を使用してオーバーフローとposition:relative;を非表示にします。

次に、<img>イメージスプライトを絶対配置の内側に配置します。これは、親を配置したため可能です。

次に、画像で:hoverを使用して位置を変更します。

これで、スプライトはimgタグに基づいているため、altテキストを使用できます。

次の例は、それぞれ50px x 50pxの2つのバージョンのアイコンを備えたFacebook Spriteに基づいています。画像の合計の高さは100pxです。

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="Sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
1
Paul