新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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を外部に用意すればソースを汚すこともありません。
いかがでしょうか?

あくまでも記事を読んで思いついただけなので、もしかしたらうまくいかないかもしれません。
そのうち、実践してみますのでそのときまたご報告させていただきます。

 - SEO・SEM, 覚え書き

アドセンス広告メイン

Comment

  1. N より:

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

  2. 名無し より:

    今更すぎる・・・ネタ???

N へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

  関連記事

キーワード調査は「Googleアナリティクス」ではなく「ウェブマスターツール」を使え

1年以上前の記事です。内容が古い可能性があります。アクセス解析といえば「Goog …

WordPress(ワードプレス)のヘッドライン表示は「query_posts」じゃなくて「get_posts」 #wp

1年以上前の記事です。内容が古い可能性があります。プログラムのプロではないのです …

ネットバンク(ネット銀行)はどこがいい?

1年以上前の記事です。内容が古い可能性があります。僕の場合、実はアフィリエイトや …

「NISA(ニーサ)」とは「NEET(ニート)」とも「ニーソ」とも違う投資非課税制度だった

1年以上前の記事です。内容が古い可能性があります。新語・流行語大賞で初めて聞いた …

no image
SEOは終わらない、手法が変わってくるだけ

1年以上前の記事です。内容が古い可能性があります。Google及びBingが、F …

忘れたパスワードを確認できる「SeePasswd」

1年以上前の記事です。内容が古い可能性があります。先日記事にした「パスワード「● …

no image
IEだけCSSが適応されないときに疑うこと

1年以上前の記事です。内容が古い可能性があります。なんか知らない間にプロット・フ …

「Aterm WM3600R」でインターネットに繋がりにくくなったときに確認したほうが良い設定

1年以上前の記事です。内容が古い可能性があります。この頃、モバイルWi-Fiルー …

楽天アフィリエイトは儲かるらしい

1年以上前の記事です。内容が古い可能性があります。アフィリエイトリンクを入れる際 …

no image
お風呂でiPhone(アイフォーン)を使う方法

1年以上前の記事です。内容が古い可能性があります。ツイッター(twitter)っ …

血液型オヤジ