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

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  2. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  3. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  4. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  5. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

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

    CSS

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

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

コメント

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

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

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP