スマホ向けサイトデザインのポイント2

Web Design

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

前回のメモ(デザイン編)の続き。

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

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

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

■実際の大きさが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: ,

Comments are closed.

�g�уA�N�Z�X��� Google Analytics Alternative