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を外部に用意すればソースを汚すこともありません。
いかがでしょうか?
あくまでも記事を読んで思いついただけなので、もしかしたらうまくいかないかもしれません。
そのうち、実践してみますのでそのときまたご報告させていただきます。
アドセンス広告メイン
関連記事
-
-
mixi(ミクシィ)とFacebook(フェイスブック)を連携させる方法
1年以上前の記事です。内容が古い可能性があります。Facebookと連携シリーズ …
-
-
「ネットプリント」とはなんなのか?
1年以上前の記事です。内容が古い可能性があります。さてさて、今までセブンイレブン …
-
-
SEOツールまとめ
1年以上前の記事です。内容が古い可能性があります。最近、SEOからとんと離れてい …
-
-
Windows版Illustrator 8の初期設定の場所
1年以上前の記事です。内容が古い可能性があります。ちょっとしたトラブルがあったの …
-
-
地震の予兆現象、光柱(発光現象)、彩雲(虹)、地震雲
1年以上前の記事です。内容が古い可能性があります。先日の北海道で震度5弱を記録し …
-
-
2012年5月のヒットキーワードとヒットページ
1年以上前の記事です。内容が古い可能性があります。コツコツやっていくと必ずいいこ …
-
-
上野始発限定「高崎線」&「宇都宮線」時刻表
1年以上前の記事です。内容が古い可能性があります。熊谷(以北)に住んでいる通勤族 …
-
-
警察や検察から身を守る(冤罪を防衛する)、不当逮捕されないための方法
1年以上前の記事です。内容が古い可能性があります。これは個人的にもまとめておきた …
-
-
同一テーマからのリンクがYahoo!で上位表示させるコツ
1年以上前の記事です。内容が古い可能性があります。いいニュースを見つけました。Y …
-
-
打つ意味あんの?インフルエンザの予防接種の効果は2割
1年以上前の記事です。内容が古い可能性があります。なんと、インフルエンザの予防接 …
- PREV
- モバゲータウンでペナルティを受けた
- NEXT
- お見積もり無料は当たり前?








Comment
>通常時とロールオーバー時、場合によってはオンクリック時の画像を一枚画像にします。
これって普通に、みんなやっていますよ…。
今更すぎる・・・ネタ???