HOME > > > ブラウザサイズでデザイン変更「レスポンシブWebデザイン」の基本

ブラウザサイズでデザイン変更「レスポンシブWebデザイン」の基本

レスポンシブWebデザイン

レスポンシブWebデザインとは

最近ではスマートフォン、iPadの様なタブレット、PCサイトとWebサイトを展開するデバイスが沢山あります。
合わせて専用のコンテンツを用意する。
こうなるととても大変になってきます。
レスポンシブWebデザインとは1つのコンテンツで多様なデバイスに対応する事ができる手法です。
ブラウザのサイズに対応して各デバイスにデザインがフィットすればいくつも専用コンテンツを作る必要は無くなります。
ただ、1つのデバイスで簡単にデザインが変更できるというものではありません。
スマートフォン専用コンテンツが必要であれば、必要な制作物もあります。
あくまで「多様なデバイスに対応できるWebサイト」という事です。

動きのサンプルはこちら

レスポンシブWebデザインに必要な素材

なんとなく動的に思えるレスポンシブWebデザイン。何かJqueryが必要かな?と思われると思います。
レスポンシブWebデザインに必要なのは、cssをhtmlに読み込むだけです。
ここで読み込むcssは各ブラウザサイズで対応するcssです。
例えばスマートフォン・タブレット・pcの3つに対応するとしたら、

・ブラウザサイズ480pxまでのcss(スマートフォン用)
・ブラウザサイズ481px~768pxまでのcss(タブレット用)
・ブラウザサイズ769px以上のcss(pc用)

という様なサイズで3つのcssが必要です。
※細かく言うとスマートフォンを横にした場合のサイズなど色々とありますが、今回は解りやすく3つ用意します。

htmlの記述

htmlには各cssを読み込みます。

<link rel="stylesheet" media="screen and (min-width: 769px)" href="style_pc.css" />
<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 481px)" href="style_tb.css" />
<link rel="stylesheet" media="screen and (max-width: 480px) and (min-width: 0px)" href="style_sp.css" />

CSSの記述

PC用css

PCサイズ用のcss

@media screen and (min-width:769px){
pc用のcssを記述
}

タブレット用css

タブレットサイズ用のcss

@media screen and (min-width:481px) and (max-width:768px){
タブレット用のcssを記述
}

スマートフォン用css

スマートフォンサイズ用のcss

@media screen and (max-width:480px){
スマートフォン用のcssを記述
}

HTML5に対応する

このままではHTML5に対応していません。
ですので、下記のソースをhead内に記述します。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

IE8に対応する

さらに、このままですとIE8以下に対応していません。 ブラウザの種類が多いと大変です。 こちらのjqueryを読み込んでください。

Respond.jsをダウンロード

<script src="respond.src.js"></script>

スマートフォンのサイズに合わせる為に必要なviewport

上記までの設定で各サイズに合わせてデザインが変わります。
ですが、スマートフォンで見た時に横幅を超えて画像が飛び出たりしてしまいます。
ぴったり合わせる為にhead内に下記を記述します。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1" />

設定は以上です

まずはこれでレスポンシブWebデザインの基本設定は完了です。
cssの設定や、デバイスの種類によって細かな設定が必要になってくると思います。
それはまた今度の記事でご紹介します。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket