背景画像のロゴを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だけを使ったストライプの作り方「Stripes in CSS」が…

  2. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  3. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  4. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  5. Epic Spinners

    CSS

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

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

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

    CSS

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

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

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP