レスポンシブWEBデザインの概要とサンプル [html/css]
最近、ホームページの話になると、「レスポンシブ対応で」と言われることが多い。
でも、話しを聞いていくと、認識がおかしい人がたくさんいる。
画像が切り替わったり、アニメーションしたりすることが「レスポンシブ」だと思っている人が多いらしい。
他のブログとか見てても似たような記事があるので、間違った認識でいる人は、ある程度いるのかもしれない。
この１ヶ月くらいで、３回もそんなことがあって、うち１回はwebデザイナーさんだったりする・・・。
素人の人ならわかるけど、さすがに業界の人はまずいだろうと思ったので、ちょっと書いてみる。
レスポンシブWEBデザインとは、１つの html ファイルで、様々な端末の画面サイズに対応すること。
様々な端末というのは、パソコンとか、タブレットとか、スマートフォンとか。
機種によって画面サイズが違うので、それぞれに最適化して作っていたらきりがない。
そこで、css でなんとか対応させてしまおうというのがレスポンシブデザイン。
例えば、こんな感じのホームページを作りたいとする。
まず、パソコン画面とスマホ画面を合体させたような html を作る。
次に css にパソコン画面の設定とスマホ画面の設定を書く。
css の内容は、こんな感じ。
【パソコン画面の場合】
【スマホ画面の場合】
レスポンシブデザインのサンプル（sample.html）
レスポンシブデザインのサンプル（style.css）
このサンプルでは、ディスプレイ幅800px で切り替わるようにしてみた。
細かく設定するのであれば、
パソコンの場合（指定なし）
タブレットの場合（ディスプレイ幅800px 以下）
スマートフォンの場合（ディスプレイ幅480px 以下）
などを css に書けばいいんだけど、複雑になってサンプルとしてはわかりにくくなるのでやめました。
パソコンで表示して、ブラウザの横幅を動かすと、表示が切り替わるはず。
タグの意味は、ググってください（笑）。
１つの html ファイルで、いろいろな端末の画面サイズに対応できるレスポンシブWEBデザインですが、デメリットもあるので、なんでもかんでもレスポンシブ！というのは、違うと思っています。
その辺は、ホームページ作成者や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デザイナーがちゃんと判断してくれるはず！？
コメント 0