今話題のレスポンシブデザインでスマホに対応したサイトにする方法

 
responsive

レスポンシブデザインは、PCとスマホでwebサイトの見た目を変更することでwebサイトをスマホに対応させる手法ですが、面倒くさそうで実装してない人も多いでしょう。

 

このブログもスマホに対応していますが、やはりスマホでのアクセスが全体の4割を占めるという今の世界で、これは必須でしょう。

 

ここでは、レスポンシブデザインの制作方法と、Viewport、mediaqueryについて説明しよう。

 

Viewport

スマートフォンで一般的なPCサイトを見ようとすると、原則的に横幅980pxで全体を表示する設定になっている。

 

これはiPhoneでも多くのandroid端末でもおんなじで、大きく縮小されて表示されるため、とても見にくくなる。

responsive 1 thumb1 今話題のレスポンシブデザインでスマホに対応したサイトにする方法

 

こんな表示のサイトを見てくれるユーザーなんてそういないですよね。

 

少なくとも縮小ではなく、原寸サイズでwebサイトは見たいものです。

 

こんな感じで、端末で決められている表示設定をViewportといいます。

 

そこで、最初から縮小されて表示されないように、Viewportの設定をしておきます。

 

 

 

device width thumb1 今話題のレスポンシブデザインでスマホに対応したサイトにする方法

 

それぞれ端末のディスプレイは、まず横幅のピクセル数でよくあらわされる。

 

1080×1920など、これが商品説明などで一番目にする表示だろう。

 

そして、高解像度になるほど、1pxが物理的に小さくなってしまうので、端末の2×2=4pxを使って1pxを表示したり、3×3=9pxを使って1pxを

表示できるようになる。

 

この比をピクセル解像度や、デバイス・ピクセル比なんて言ったりする。

 

device-widthは実際の横幅のピクセル数/ピクセル解像度で表される。

 

スマートフォンだと、だいたい320pxから360px程度になる。

 

そこで、このdevice-widthでサイトを表示すれば、縮小表示にはならないので、これを適用したのが…

 

viewportの設定

<meta name=”viewport” content=”width = device-width”>

これで、画面幅にdevice-widthを代入しました。

 

これで表示は解決です。

 

次は、PCとスマホで表示を変える方法を説明します。

 

メディアクエリー

pcとスマホで別のCSSを用意し、振り分ける方法というのが昔は主流だったが、読み込み時間などの面で近頃は使われていない。

 

ひとつのCSSのなかで、スマホとPCのCSSを両方記述してしまうのが一般的だ。

 

PCとスマホのCSS振り分けは先ほどの画面幅で行う。

@media screen and (max-width: 360px) { 
  #wrapper {width:98%;} //スマートフォンのみに適用する部分 
}

 

上の場合、横幅が360px以下の端末の場合、{}で囲まれた部分のCSSを適用するということだ。

 

この{}は通常のCSSより優先される。

 

この、CSSの変わり目をブレークポイントなんて言ったりする。

 

通常、ブレークポイントは2つほどでいい。

 

スマホ、タブレット、PCの3つに対応させる。

 

通常タブレットの横幅は768pxのため、320pxと768pxでメディアクエリーを使うといい。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>メディアクエリー デモ</title>
<meta name="viewport" content="width=device-width">
<style>
/*すべてに適用されるスタイル*/
article {
	width:400px;
	background-color:#6CF;
	text-align:center;
	margin:auto;
	height:600px;
}

@media screen and (max-width:640px) {
	article {
	width:100%;
	background-color:#933;
	text-align:center;
}
}

</style>
</head>
<article>
<p>article</p>
</article>
<body>
</body>
</html>

ブレークポイントを640pxにし、背景色と配置が変わるように設定しました。

 

 

今回はCSSもHTMLに既述したが、もちろんCSSに書いてもよい。

 

スマホ対応は大切

さっきも言ったけど、webサイト訪問の4割はスマホやタブレットなどの端末からだということで、そこからわざわざ見に来てくれる人に見にくいデザインを見せるのではアクセスも減ってしまいますよね。

 

すこし頭がこんがりそうですが、あきらめずに一度やってみるといいと思います。

You may also like...