背景画像のロゴを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のやり方でした。

WordPressのログイン時のツールバーWordPressで投稿スラッグを指定して特定の記事だけを表示させる関数を作ってみた前のページ

スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」次のページSwipeshow

関連記事

  1. CSS

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

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

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

    CSS

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

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

  3. CSS

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

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

  4. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  5. CSS

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

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

  6. CSS Only Fab Icon Menu

    CSS

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

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

コメント

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

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

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP