More than 5 years have passed since last update.

レスポンシブWebデザイン

Last updated at 2015-05-19Posted at 2015-05-19

レスポンシブWebデザインとは

・ユーザーが閲覧する端末の画面サイズに合わせて、ページのデザインやレイアウトを自在に操るウェブ制作の手法

・アメリカの Ethan Marcotte 氏が考案、命名したウェブ制作の手法
・日本でも2011年後半から、この手法を取り入れたウェブサイトが登場し始めた

・フレキシブル・グリッドをベースとしたレイアウト
　レイアウト幅が可変する段組みレイアウト

・フレキシブル・イメージ／メディア
　フレキシブル・グリッド内でサイズが可変するイメージやビデオ等のメディア

・メディアクエリ
　画面サイズを判別してスタイルを指定できるCSS3の機能

ユーザが求めるコンテンツを提供するには、最低限、以下の3つを知る（または想定できる）必要がある

これらを考え、調査し、想定することで、ユーザーに喜ばれるコンテンツが提供できる

画面サイズとして扱われるデバイスの横幅を設定する

viewportの設定例.html

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

参考サイト

3つの記述方法

CSSソース内に記述する場合

モバイル用のスタイルを記述例.css

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

タブレット用のスタイルを記述例.css

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

<head>内のlink要素のCSSに記述する場合

ウィンドウ幅768px以下の場合にmobailecssを読み込む例.css

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css" />

ウィンドウ幅768px以上の場合にtabletcssを読み込む例.css

<link rel="stylesheet" media="screen and (min-width: 768px)" href="tablet.css" />

CSSの@importに記述する場合

ウィンドウ幅768px以下の場合にmobailecssを読み込む例.css

@import url("mobile.css")screen and (max-width: 768px)

ウィンドウ幅768px以上の場合にtabletcssを読み込む例.css

@import url("tablet.css")screen and (min-width: 768px)

レスポンシブWebデザイン　テクニックブック