背景画像のロゴをRetinaに対応させるCSS

CSS

背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのやり方です。これから新しくサイトを作る場合なんかに役立つかと思います。Retinaディスプレイは解像度が縦横2倍(面積は4倍)なので、それ専用の画像を用意しておく必要があります。ということで、以下、やり方です。

[ads_center]

-webkit-min-device-pixel-ratioを使う

Retinaディスプレイかどうかを判別するには「-webkit-min-device-pixel-ratio: 2」を使っていきます。例えば、通常の背景画像のロゴを指定する場合には以下のようにするとします。

#logo {
     width: 200px;
     height: 100px;
     background: url(images/logo.png) no-repeat;
     display: block;
     text-indent: -9999px;
}

上記の場合は普通に横200px、縦100pxの画像(logo.png)を用意すればいいですよね。これと同時にRetinaディスプレイの場合のみ、それ専用のロゴ画像を表示させるには以下を上記のCSSの下に追加します。

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
#logo {
     width: 200px;
     height: 100px;
     background: url(images/logo-retina.png) no-repeat;
     background-size: 100%;
     display: block;
     text-indent: -9999px;
}
}

この場合は縦横ともに2倍の大きさのロゴ画像(logo-retina.png)を用意してあげます。ちなみにここでは横400px、縦200pxになります。

ポイントは縦横2倍にしたロゴ画像をwidthとheightを使って2分の1のサイズを指定して、さらにbackground-sizeを100%にすることで縦横2倍の画像を標準サイズに圧縮します。

これにより、Retinaディスプレイの場合のみ、高解像度のロゴが表示されるようになります。要するに、縦横2倍にした画像を用意して上記のCSSを加えるだけでRetinaに対応できるのでやっておいて損はないかと思います。

ロゴはスマホなんかでは一番最初に目に留まる場所でもあるので、ここだけでもRetinaに対応させておきたいですよね。

ということで、背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方でした。

関連記事

  1. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  2. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  3. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  4. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  5. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  6. Media Queriesの@media

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP