背景画像のロゴを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

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  2. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  3. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  4. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  5. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  6. CSS

    CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

コメント

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

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

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP