レスポンシブデザインとは、アクセスした人の画面サイズを判別し、最適なレイアウトに切り替えるWebサイト表示の手法です。

Webのジャンルによりますが、最近はスマホでインターネットをする人が増えています。スマホだけでなく、タブレットを使う人もいるし、スマホの画面サイズも様々です。

レスポンシブデザインのメリット

管理が楽になる

1つのWebサイトを作るときにスマホ対応をしようとすると、2つ以上サイト(ファイル)を作らなければいけません。それを切り替えて表示させます。

レスポンシブデザインでは、1つのサイト(ファイル)で管理ができます。そのため、修正するときも1つのファイルのみ変更を加えればOKです。

SEOに有利

スマホ対応ができていないサイトはGoogleからの評価が低くなり、検索でサイトが表示されにくくなってしまいます。そのためスマホ対応ができているレスポンシブデザインはSEO(検索エンジン最適化)に良いといわれています。

レスポンシブデザインの作り方

最近では、簡単にレスポンシブデザインが作れるようになりましたが、基本は全て同じです。簡単に作る方法は次回、紹介しようと思います。

1.ビューポートを設定

まずはheadタグにビューポートの設定をします。ビューポートとは表示領域のことで、下記コードをいれておくことで表示領域がうまく調整されます。

2.画面幅に合わせてCSSを変更

あとはCSSを画面幅によって変更をするだけです。どういうことかというと幅が800px以上ではこのCSS、幅が500px以上ではこのCSSといったように使い分けをします。

例えば、画面幅が479px以下のときに文字色を赤くするにはこのように記述します。

◯◯{
 color:black;
}
@media screen and ( max-width:479px ){
　　◯◯{
　　　　color:red;
　　}
}

この場合、画面幅が0px~479pxの時に文字色が赤くなり、画面幅が480px以上の時に文字色が黒くなります。

メディアクエリとは？

メディアクエリ(@media screen…)とは、CSSで表示された画面環境に応じて適用するスタイルを切り替える機能です。

例えば、スマホ対応させるには以下の2点の方法があります。最近では、スマホのサイズもバラバラなので、タブレット以下で設定したほうが自然にいくかもしれません。

479px以下(スマホ)の場合：

@media screen and ( max-width:479px ){
}

89
767px以下(タブレット以下=スマホ)の場合：

@media screen and ( max-width:767px ){
}

タブレットや狭いブラウザ向けのデザインではこのように記述します。

768px〜1020pxの場合：

@media (min-width: 768px) and (max-width: 1020px){ 
}

試しに作ってみよう！

デモページ

デモページで画面の幅を小さくしたり大きくしたりしてみましょう。

まずはHTMLを準備です。

HTML







タイトル


	
	

		

			
画面幅を狭くすると文字色が白くなるよ

		

		
	

	

		
フッター

やることはfloatで左右に振り分けられているarticleとasideを画面幅に合わせて変更します。

768px以上のときはfloatを有効にし、767px以下のときはfloatを無効にします。同時に横幅を画面いっぱいにするためにwidthを100%に変更します。

CSS

/* reset.cssの変わり */
*{
	margin: 0; /* 全要素のmarginリセット */
	padding: 0; /* 全要素のpaddingリセット */
}
/* 全要素にbox-sizingを適用 */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
#header{
	background: #FFD464; /* 背景色変更 */
	height: 300px; /* 高さを300px */
	padding: 30px; /* 内側の余白30px */
}
#article{
	background: #F26964; /* 背景色変更 */
	height: 300px; /* 高さを300px */
	width: 70%; /* 横幅70% */
	float: left; /* 左寄せ */
	padding: 30px; /* 内側の余白30px */
}
#side{
	background: #1253A4; /* 背景色変更 */
	height: 300px; /* 高さを300px */
	width: 30%; /* 横幅30% */
	float: right; /* 右寄せ */
	padding: 30px; /* 内側の余白30px */
}
#footer{
	background: #F27398; /* 背景色変更 */
	height: 300px; /* 高さを300px */
	clear: both; /* レイアウト崩れ防止 */
	padding: 30px; /* 内側の余白30px */
}
/* 画面幅767px以下のCSS */
@media screen and ( max-width:767px ){
	#article,#side{
		float:none; /* 左寄せ、右寄せを解除 */
		width: 100%; /* 横幅を100% */
	}
	#article{
		color:#fff; /* 文字色変更 */
	}
}