CSS Spriteの使い道
1年以上前の記事です。内容が古い可能性があります。
「DesignWalker」さんや「コリス」さんで「CSS Sprite」という技術が紹介されています。
□CSS Spriteを活用しよう – DesignWalker
□[CSS]複数の画像を一枚で表示できるジェネレーター -CSS Sprite Generator | コリス
これは様々なパーツを一枚の画像に収めて、CSSで必要な部分を表示させる技術です。
具体的には、background-positionで画像の座標を指定することで実現します。
この技術を使うことで場合によってはホームページの容量を減らすことができるそうです。
ではCSS Spriteは容量を減らすだけしか使い道はないのでしょうか？
ここで話をちょっと変えます。
SEOに力を入れ始めてずいぶんたち、SEOコーディングは当たり前になってきています。
そのポイントの一つとして「ソースはすっきりさせ、無駄なタグは省く」ということが言えるでしょう。
（SEOコーディングに関するポイントは今度あらためてじっくり解説してみようと思います。）
そのために僕はFireworksやDreamweaverで書き出されたソースはそのまま使いません。
中でもJavascriptはかなり容量を喰うため、大概は外部スクリプトに書き換えます。
ただ、ロールオーバーのプレロード部分に関しては、bodyタグにonloadで画像ファイルごとにスクリプトを書き込むしかないため（僕の技術力の問題か？）、かなり長いスクリプトになってしまうのです。
そこで今までは「最近ではどこもブロードバンドだし、プレロードは無しでいいや。」
で済ましてきていたのですが、CSS Spriteを使うことで解決できるような気がしてきました。
つまりこういうことです。
通常時とロールオーバー時、場合によってはオンクリック時の画像を一枚画像にします。
「#id名 a:hover」や「#id名 a:active」に対しCSSでそれぞれ適切な画像を表示させます。
これだと、一枚画像なのでプレロードの必要がなくCSSを外部に用意すればソースを汚すこともありません。
いかがでしょうか？
あくまでも記事を読んで思いついただけなので、もしかしたらうまくいかないかもしれません。
そのうち、実践してみますのでそのときまたご報告させていただきます。
アドセンス広告メイン
関連記事
-
-
Yahoo! ジオプラスからのドメイン移管
1年以上前の記事です。内容が古い可能性があります。Yahoo!ジオプラスの無料ド …
-
-
「子宮頸がんワクチン」は一先ず打たないほうがいい。副作用の原因は脳障害？
1年以上前の記事です。内容が古い可能性があります。うちの娘も見送らせてもらってま …
-
-
大地震で死なないために持っておきたい3つのアイテム
1年以上前の記事です。内容が古い可能性があります。画像転載系ブログ「あごひげ海賊 …
-
-
WordPress（ワードプレス）+Google Analytics（グーグルアナリティクス）ですべてのリンククリック（クリックイベント）を計測する設定
1年以上前の記事です。内容が古い可能性があります。WordPress（ワードプレ …
-
-
OpenOffice Impressのスライドウインドウを元の位置に戻す方法
1年以上前の記事です。内容が古い可能性があります。最近は、DreamWeaver …
-
-
46分に注意。阪神・淡路大震災と東日本大震災の共通点
1年以上前の記事です。内容が古い可能性があります。本日は阪神・淡路大震災が起こっ …
-
-
これはノーベル賞もの。スマホのバッテリー寿命を格段に伸ばす方法を大学院生が偶然発見。なんと、数百年持つらしい
1年以上前の記事です。内容が古い可能性があります。随分進化したスマートフォンです …
-
-
iPhoneでツイッターアカウントを削除、追加する方法（iOS6編）
1年以上前の記事です。内容が古い可能性があります。以前、これの「iOS 5」編を …
-
-
Facebookの「いいね！」が減っている。非アクティブなアカウントの削除が進んでいるらしい
1年以上前の記事です。内容が古い可能性があります。以前は、本名以外のアカウントの …
-
-
Illustrator（イラストレータ）のピクセルにスナップ（ピクセルグリッドに整合）を解除する方法 【DTP】
1年以上前の記事です。内容が古い可能性があります。以前、Illustrator（ …
- PREV
- モバゲータウンでペナルティを受けた
- NEXT
- お見積もり無料は当たり前？
Comment
>通常時とロールオーバー時、場合によってはオンクリック時の画像を一枚画像にします。
これって普通に、みんなやっていますよ…。
今更すぎる・・・ネタ？？？