長野県長野市・松本市ウェブ制作事業部 コンサルテイングFARM

CSSスプライトの考察する

ATFコンサルティングFARM

ATFコンサルティングFARM

マーケティングがあなたのビジネスの目標達成を支援します。

HubSPot+ ATFC担当に相談する

CSSスプライトとは複数の画像を一つの画像にまとめて、CSSのbackgroundプロパティで画像のポジションを指定することにより任意の画像を表示させる手法。
CSSで呼び出す背景画像を少なくすることでサイトの表示を高速化することができる。サイトの規模や内容にもよるが大手サイトでは積極的に使われている。例えば以下のようなサイトも使われている。

上記サイトのようにいろいろなサービスやツールを備えたサイトには非常に便利な手法だが、一般的な企業サイトや商店サイトではそれほど思い切って使えないような気がする。実際、携わった案件では上記サイトのような数十個以上の画像を一つにまとめて使ったことはない。そしてCSSスプライトにはデメリットもあります。

  1. 背景画像のリピートさせることができない
  2. CSSでサイズを変えると画像も変えなければならない

(1)は、すでに画像がいくつも並んでいるためリピートさせるようなポジショニングが難しくなる。(2)はCSSで対象範囲のサイズを変える場合は画像も変えなければならなくなる。逆の場合も同様に画像を変える場合はCSSも書き直さなければならない。すなわち改修する時に手間がかかってしまう。

導入できる箇所はある

大手サイトのような使い方は出来なくとも、グローバルメニューの背景やボタンなどCSSでマウスオーバー画像を変化させたい時にはCSSスプライトは有効だ。それほど一つのファイルに画像を集約する必要もないので(ボタンなら大体2種類くらいで済むだろう)画像をリピートさせることも出来る。
私はWordPressでサイトを作る際、グローバルメニューとなる部分は絶対にカスタムメニューを使いたいひとなのでCSSスプライトは多用する。

是非、お試しあれ。

SNS

Share on facebook
Share on twitter
Share on linkedin

千曲市の工務店のWebサイトリニューアル

更埴建設株式会社【住宅部】 リニューアルWebサイトへ 千曲市工務店のweb design(ウェブデザイン PC用) 長野県千曲市にある更埴建設株式会社様の住宅部のホームページをリニューアルしました。更埴建設様には住宅部

ブログを読む »
CRM

デジタル時代X新型コロナ時代のWeb制作

ホームページの概念を捨てよう!それがデジタル化の第一歩 デジタイル省が来年創設するようですね。日本はアジアでもデジタル化が遅れている国です。中国・韓国・シンガポールなど市民生活にデジタルが活用されています。日本ではWeb

ブログを読む »

HubSpotのすべて

ダウンロード