レスポンシブWebデザイン


レスポンシブWebデザイン

1つのHTMLで、デバイスの特性(主に画面横幅)に応じてレイアウトやデザインを変更する方法を指します。

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

メリット
画面サイズが合えば、現存しないデバイスにも対応可能
URLが同じためSEO的に有利
特的デバイス向けサイトへのリダイレクトが発生しないため、サイトの読み込み時間を短縮できる
HTMLが1つで済むのでコストを削減できる可能性がある
デメリット
1つのHTMLを複数のCSSで使い回すのは設計・製造と難易度が高く、逆に高コストになる可能性がある
モバイル向けには動画や画像も切り返す必要があり難しい
画面フローの変更には対応できない
HTML/CSSのサイズが増加し、ページや動作が重くなる可能性がある

レスポンシブWebデザインに必要な技術

CSS Media Queries メディアクエリ

HTMLのlink要素でmedia属性を使用する方法

例:
link rel="stylesheet" media="screen and (max-width: 480px)" href="style.css"

CSSで@mediaを使用する方法

CSSの仕様の1つで、デバイスの特性に応じてCSSを切り替える

@media
例:
@media screen and (max-width: 480px) {
color: #f00;
}
メディアタイプ
メディア特性
を指定する

Fluid Grid 可変グリッド

グリッドレイアウト

Fluid Image 可変イメージ

画像幅をウィンドウ幅に応じて変更する手法
img要素のmax-widthプロパティを100%にすることで実現できる

ビューポート

ブラウザの表示領域のこと。
HTMLのmeta要素で設定可能。
例:
<meta name="viewport" content="width=device-width, initial-scale=1">

リセットCSS

Webブラウザには、デフォルトでスタイルが設定されている。
このデフォルトスタイルがブラウザ毎に異なるため表示差異の原因の1つ。
リセットCSSはこのデフォルトスタイルを整えるもの
2種類ある。
デフォルトのCSSを数多く初期化するもの
例:
Yahoo User Interface Libraryのreset.css
https://yuilibrary.com/yui/docs/cssreset/
ある程度のスタイルは残し、表示の差異となる箇所を揃えるもの
例:
normalize.css
http://necolas.github.io/normalize.css/