So-net無料ブログ作成

レスポンシブWEBデザインの概要とサンプル [html/css]

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

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


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


例えば、こんな感じのホームページを作りたいとする。
レスポンシブ01.jpg

まず、パソコン画面とスマホ画面を合体させたような html を作る。
レスポンシブ02.jpg

次に 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 に書けばいいんだけど、複雑になってサンプルとしてはわかりにくくなるのでやめました。

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


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



nice!(1)  コメント(0) 
共通テーマ:パソコン・インターネット

nice! 1

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。