レスポンシブWEBデザインの概要とサンプル

最近、ホームページの話になると、「レスポンシブ対応で」と言われることが多い。
でも、話しを聞いていくと、認識がおかしい人がたくさんいる。
画像が切り替わったり、アニメーションしたりすることが「レスポンシブ」だと思っている人が多いらしい。
他のブログとか見てても似たような記事があるので、間違った認識でいる人は、ある程度いるのかもしれない。

この１ヶ月くらいで、３回もそんなことがあって、うち１回はwebデザイナーさんだったりする・・・。
素人の人ならわかるけど、さすがに業界の人はまずいだろうと思ったので、ちょっと書いてみる。

レスポンシブWEBデザインとは、１つの html ファイルで、様々な端末の画面サイズに対応すること。
様々な端末というのは、パソコンとか、タブレットとか、スマートフォンとか。
機種によって画面サイズが違うので、それぞれに最適化して作っていたらきりがない。
そこで、css でなんとか対応させてしまおうというのがレスポンシブデザイン。

例えば、こんな感じのホームページを作りたいとする。

まず、パソコン画面とスマホ画面を合体させたような html を作る。

次に css にパソコン画面の設定とスマホ画面の設定を書く。
css の内容は、こんな感じ。

【パソコン画面の場合】

フッターメニューを非表示にする

その他はすべて表示

【スマホ画面の場合】

ヘッダーメニューを非表示にする

本文を横幅100%にする

サイドのfloatを外し、横幅100%にする

フッターメニューを表示する

レスポンシブデザインのサンプル（sample.html）

<!DOCTYPE html>
<html lang="ja">
<head>
<title>レスポンシブ サンプル</title>
<meta charset="utf-8">
<meta content="width=device-width, user-scalable=yes, initial-scale=1.0, 
maximum-scale=2.0" name="viewport">
<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="wrapper">

		<div id="header">ヘッダー</div>

		<div id="header_menu">ヘッダーメニュー</div>

		<div id="main">本文</div>

		<div id="side">サイド</div>

		<div id="footer_menu">フッターメニュー</div>

		<div id="footer">フッター</div>

	</div>
</body>
</html>

レスポンシブデザインのサンプル（style.css）

@charset "UTF-8";
body{
	margin: 0;
	padding: 0;
	color:#fff;
	font-size: 20px;
	font-weight:bold;
	background-color:#fff;
	text-align:center;
}
.wrapper{
	width:800px;
	margin:auto;
	background-color:transparent;
}
#header{
	width:100%;
	padding:20px 0;
	display:block;
	background-color:#008000;
}
#header_menu{
	width:100%;
	padding:20px 0;
	color:#fff;
	background-color:#ff6600;
}
#main {
	width: 70%;
	height:200px;
	padding:20px 0;
	color:#000;
	background-color:#ffff00;
	float:left;
}
#side{
	width:30%;
	height:200px;
	padding:20px 0;
	color:#000;
	background-color:#00ffff;
	float:right;
}
#footer_menu{
	display:none;
}
#footer{
	width:100%;
	padding:20px 0;
	background-color:#008000;
	clear:both;
}

/*--- ディスプレイ幅800pxより小さい画面に使われるCSS ---*/
@media screen and (max-width: 800px) {
	html{width: 100%;}
	body{
		width: 100%;
		margin:0;
		padding:0;
	}
	.wrapper{
		width: 100%;
		margin:0;
		background-color: transparent;
	}
	#header_menu{
		display:none;
	}
	#main {
		width: 100%;
		height:200px;
		padding:20px 0;
		color:#000;
		background-color:#ffff00;
		float:none;
	}
	#side{
		width:100%;
		height:100px;
		padding:20px 0;
		color:#000;
		background-color:#00ffff;
		float:none;
	}
	#footer_menu{
		width:100%;
		padding:20px 0;
		display:block;
		color:#fff;
		background-color:#ff6600;
		clear:both;
	}
}

このサンプルでは、ディスプレイ幅800px で切り替わるようにしてみた。
細かく設定するのであれば、
　パソコンの場合（指定なし）
　タブレットの場合（ディスプレイ幅800px 以下）
　スマートフォンの場合（ディスプレイ幅480px 以下）
などを css に書けばいいんだけど、複雑になってサンプルとしてはわかりにくくなるのでやめました。

パソコンで表示して、ブラウザの横幅を動かすと、表示が切り替わるはず。
タグの意味は、ググってください（笑）。

１つの html ファイルで、いろいろな端末の画面サイズに対応できるレスポンシブWEBデザインですが、デメリットもあるので、なんでもかんでもレスポンシブ！というのは、違うと思っています。
その辺は、ホームページ作成者やwebデザイナーがちゃんと判断してくれるはず！？

レスポンシブWEBデザインの概要とサンプル

関連する記事