レスポンシブデザインへ

レスポンシブデザイン

レスポンシブデザインって？

レスポンシブデザインとはパソコンや携帯電話などの幅広いディバイスに適するように外観や操作性などを対応出来るようにしたデザインのことです。

メリット

デバイス毎のHTML文書を用意しなくても良く、同一のHTML文書を使うため管理がし易くなる。
上記の理由からデバイス毎にURLを分ける必要なくなる。

デメリット

サイト作成に手間が掛かる。
ブラウザに読み込まれるHTML文書とCSSファイルはPCもモバイル同じ物が読み込まれるため、異なるデザインにした場合、デバイスに合わせて非表示の部分が有っても、全て読み込まれる。

主要ディバイスの幅

ディバイス	横置き	縦置き
PC	768px以上
タブレット	768px	480px
スマートフォン	640px	320px

レスポンシブデザインに変更

mata要素にviewportを設定

viewportはスマートフォンやタブレットのための設定で、name属性とcontent属性を設定します。

content属性のwidthプロパティ（表示領域幅）には”device-width”（端末画面に合わせる設定）、initial-scale（初期ズームの倍率）は”1.0”（倍率１）に設定します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

セレクタのプロパティ値の変更と追加

レスポンシブデザイン用に固定値で設定している幅をシームレス用の値に変更し、max-widthプロパティを追加します。

body,#siteTitle,#nav,#footer{
                   ←  max-width:100%; を追加
  width:1024px;
}

#main{
  width: 719px;  ←  width:70.2%; に変更
  float: left;
  margin-right: 5px;
  padding-bottom:30px;
}

#side{
                 ←  width:29.2%; を追加
  width: 300px;  ←  max-width:300px; に変更
  float: right;
  padding-bottom:30px;
}

CSSにメディアクエリ（@media）を追加

メディアクエリ（@media）はメディアタイプと適用条件式が共にtrueの時に対応するスタイルが適用されます。スタイルシートに以下を追加します。

@media screen and ( max-width:847px ){
	#main{
  	float:none;
  	width:auto;
	}
	#side{
	  float:none;
  	width:auto;
	max-width:none;
	}
	#nav ul{
	  border:none;
  	background:none;
	}
	#nav ul{
  	list-style:none;
  	border-top: 1px solid #9932cc; 
	  border-left:1px solid #9932cc;
  	background:#dda0dd;
	}
	#nav li{
  	float:left;
  	width:50%;
	}
	#nav li a{
  	border-right:1px solid #9932cc;
	  border-bottom:1px solid #9932cc;
	  background:-webkit-gradient(linear,left top,left bottom,from(#fff5ee),color-stop(0.5,#ba55d3),to(#d8bfd8));
  	background:-o-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);
  	background:-moz-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);
  	background:linear-gradient(#fff5ee,#ba55d3,#d8bfd8);
  	-pie-background:linear-gradient(#fff5ee,#ba55d3,#d8bfd8);
  	behavior: url(js/PIE.htc);		
	}
	#side p{margin:0 15px 1.5ex}
	#side h1,main h2,main h3{
         margin:0 15px 1.5ex
	}
	.sideBlock{
	margin:0 15px;
	}
}

@media screen and (max-width:460px){
	 body{
	 	 font-size:90%;
   }
   #nav li{
     float:none;
     width:100%;
   }
}

サンプルページを見るにはここをクリック