レスポンシブデザインのポイント

 

こんにちは。

昨日は財布を忘れて朝からプチパニックでした!
定期に1000円をもしもの時の為に挟んでいて良かった。

そんなこともあるので、定期に1000円を入れておくのはおススメですよ。

 

 

最近は、スマフォ需要がかなり多くなってきてますね。

以前はパソコン用、スマフォ用、タブレット用など表示サイズによって異なるページを制作する必要があり ました。
「単一のURL(HTMLファイル)であらゆるデバイスに最適化されるデザイン」で「レスポンシブデザイン」は制作でもよく使用されてますね。
私も以前から興味のありましたデザインです♪

今回のサイト制作に使用をしてみてますので、「レスポンシブデザイン」のポイントをいくつかお話しします。

 

Viewportを記述する

 

Viewportを記述することにより、それぞれのデバイスの画面に合わせて調整して表示をしてくれるようにな ります。
index.htmlなどhtmlの<head>タグの間に入れます。
metaタグなので、文字設定のmetaタグの下に入れておくと分かりやすいと思います。

<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″ />

 

 

media queriesを使用して切り替える

 

色々と制作方法はあるとは思いますが、私が学校で習った方法はPCサイズでサイトを制作した後にデバイスごとにCSSを分けて制作しました。

※制作前に各画面でどのように見せるかを考えておくことが重要となります。
切り替えとなるブレイクポイントも決めておきます。

 

 

 

CSSの名前の付け方は色々だと思いますが、今回は例として下記にしてます。
それぞれのメディアクエリーの中にCSSを記述していきます。

 

・common.css (全体にかかるCSS)

すべてのデバイスに共通するCSSを記述する。

 

 

・pc.css (パソコンのみにかかるCSS)

@media screen and (min-width : 769px){

中にCSSを記述してくださいね!

}

 

 

・tablet.css (タブレットのみにかかるCSS)

@media screen and (max-width : 768px){

中にCSSを記述してくださいね!

}

 

 

・smart.css (スマートフォンのみにかかるCSS)

@media screen and (max-width : 640px){

中にCSSを記述してくださいね!

}

 

 

画像サイズの調整

画像サイズは、デバイスに合わせて調整が必要となります。
下記の記述を共通のCSS(common.css)に入れてます。

 

img{
max-width:100%;
height:auto;
width /***/:auto;
}

 

 

width /***/:auto;

Internet Explorer 8用に記述してます。「/***/」はE8のみ有効で他の人は無効という意味です。
私は入れ忘れていて、「画像が思ったようになぜ変わらないの・・・」と格闘してしまいました。
一つ一つの確認が大事ですよね。
画像はそれぞれのデバイスで「%」で設定をしてます。
その為、HTMLでは画像サイズを入れる必要はないですよ。

 

 

まだまだ色々とありますが、少しだけ「レスポンシブデザイン」のポイントを載せさせていただきました。

デバイスにより見え方が変わってきますので、それぞれのCSSで調整をして整える必要があります。

様々なデザインを制作してみて「レスポンシブデザイン」を少しずつ身につけていく必要があると実感しました。
ただ、メディアクエリーの欠点は、元が大きい写真をPC、タブレット、スマフォなどに合わせて小さく表示 しているので、データーが大きいままなんです!

・・・・容量が重いのでスマフォなどでは読み込みに時間が掛かってしますのでデメリットですね。
画像の多い場合は違うデザインにした方がいいですね。

見やすく快適に使用できるようにそれぞれのデザインの特徴を掴んでサイト制作に取り組んでいきたいと思います。

 

本日もありがとうございました!