くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[スマートフォンサイト]スマートフォンサイト制作の前提の知識

スマートフォン用サイトのサイズについて

2つのサイズがある

  • CSSピクセル(csspx)  :ディスプレイのサイズ 
  • デバイスピクセル(dpx):解像度のサイズ

Retinaディスプレイ登場以前はこの2つは同じだった。

<iPhone3と、Retinaディスプレイ搭載iPhone4の比較>

      
iPhone3  ディスプレイサイズ:3.5インチ 解像度:320×480
iPhone4 ディスプレイサイズ:3.5インチ 解像度:640×960

⇒ ディスプレイサイズは同じだが、画像解像度が2倍になった ⇒ 2倍の大きさが必要


Retinaディスプレイ対応のためには、デバイスピクセル基準で画像を用意すること

ベンダープレフィクス

「プレフィクス」とは?  ⇒ 接頭辞

CSS3をブラウザで動作させる為に属性につける接頭辞のこと。
ブラウザごとに異なる。

-webkit- Google Chrome、Safari
-moz-     Firefox
-o-       Opera
-ms-      IE 

スマートフォンのシェアで言えばiPhoneSafari)とAndroidChrome)で90%以上を占めるため、-webkit-でほぼカバーできる。
ベンダープレフィクスあり・なしの両方の表記をする。

www.htmq.com

CSS3のプロパティのブラウザ対応状況を調べるには、以下のサイトが便利
Can I use... Support tables for HTML5, CSS3, etc

background-sizeについて

スマートフォン用サイトで特に重要。背景画像のサイズを指定する場合に使うCSSのプロパティ
background-imageまたはbackgroundプロパティと一緒に指定する必要がある

主に使われる値

background-size: contain;
縦横比を保持しつつ領域内に収まる最大サイズになる


background-size: cover;
縦横比を保持しつつ、背景を全て覆う大きさになる(拡大する)画像が切れる場合がある


background-size: auto;
初期値

その他、パーセント指定・ピクセル指定も可能

スマートフォンサイトに必須・viewportの設定

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • width=device-width :ディスプレイ幅を自動感知し、その幅を最大幅とする機能
  • initial-scale  :ディスプレイの方向を変えた場合の拡大倍率の設定。

向きを変えるとディスプレイ幅に合わせて拡大するのが初期設定。
変えたくない場合は initial-scale=1.0 とする。
値を2.0とすると2倍拡大になる。

  • user-scalable=no :指で拡大縮小(ピンチイン・ピンチアウト)できるようにするかどうかの設定

値を1(yes)か0(no)とする場合もある