スマホ向けサイトを作成した時にいろいろ調べたのでメモ。（コーディング編）

前回のメモ（デザイン編）の続き。

■全て要素を、デザインした時の半分の数値で。

なぜかは、前回のメモでさんざん書いたのでもういいですね。

以下指定方法です。
特にひっかるのは、画像だけだと思います。

■実際の大きさが600px x 400pxの画像の場合

<img src="hoge.jpg" width="300" height="200" alt="ホゲホゲ" />

■実際の大きさが60px x 60pxの背景画像の場合

div#hoge{
	background-image:url(hoge.jpg);
	background-size:30px 30px; //←ここで半分のサイズを指定
	background-repeat:repeat;
}

その他のdivやらfont-sizeはcssなどで、
レイアウトした時の半分の数値で指定するだけです。

ちなみに、この2倍の画像を半分の大きさで指定するやり方のいい所は、
用意する画像が一種類でいい所です。

他にも、retina用の画像と通常の画像2つ用意して、
CSSのメディアクエリを利用し使う画像を切り替える方法もありますが、
正直、非Retinaもモバイル端末で、画像を半分の大きさでしていする方法で
作成したページを見ても汚いとは思いませんでした。
参考でサンプルを用意しておきます。モバイルで見てみてください。
→サンプル

Tags: web design, スマホ

スマホ向けサイトを作成した時にいろいろ調べたのでメモ。（デザイン編）

■デザインする時は、横幅640pxで作成しましょう。

なぜならiphone5、4sのRetinaが640pxだから。
正確には320pxの画面で640pxの画像をギュッとして見てる。
だから綺麗的な。

■デザインをチェックする時は、50%表示。

上で少し触れたように、実際は幅320pxで画面表示されるので、
実際のサイズ感をチェックするときは50%縮小で確認する必要があります。

ということは、作成する時は、いつもの倍で作らなくてはいけません。
本文の級数を10ptにしたければ、FW上は20ptにするという感じです。

■デザインする時は、必ず2の倍数で。

これは実際の端末で表示される幅320pxを基準に考えると普通のことですが、
いつもの感じでFW上の640px基準で考えると、よく起こるミスです。

例えばメイン画像を300px x 100pxにしようと考える時の順番が、

○Ａの場合
実際の大きさが300×100　→　だから、600×200でレイアウトしよう。
これはOKな例です。

○Ｂの場合
レイアウト上の全体のバランス的に、600×200でレイアウト　→　実際は300×100か、よしそんなもんだな。
これはNGの例です。

というのも、Retinaなど高解像度の画面は大きい画像を半分に縮小して見るため、
画像の幅が555pxとかになっていると、表示する際、少数点が発生してしまい
せっかくの綺麗な画像がぼやけてしまいます。

Ｂの場合の考え方をしていると、奇数の画像が発生しかねないですよね。

Tags: web design, スマホ