●レスポンスWebデザインとは？
PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWebデザインという意味で、Webサイトを単一のHTML（ワンソース）で実現する制作手法。
ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意すること なく、マルチスクリーンに対応したWebサイトを制作できる。
様々なデバイスに対応出来るため、多くのサイトで採用されている技術である。

メリット	デメリット
・1つのHTMLファイルで複数デバイスに対応できる。 ・更新、修正やサイト制作の作業工数を軽減出来る。 ・各デバイスのURL統一化SEO対策に効果的になる。	・設計やデザインが複雑になる。 ・PCとモバイルの内容が同じなので、ページの読み込みが重くなる可能性がある。 ・常に新しいデバイスの登場に対応が必要になる。

★「 マルチデバイス対応」のサイトの特徴は固定値からの解放。

レスポンスWebデザインを考えるときは、CSSのBox modelの理解が必至。
・ボックスモデルに関わるプロパティ：
width / height / padding / margin / border
・ボックスをレイアウトさせるプロパティ：
float / clear / position / overflow / display

width
・初期値はauto
・数値と%の指定が可能
・負の値は指定できない
・HTMLのテキスト、画像（img）の適用される箇所
★デザインの都合が可能な限り％を使用する。
★「max-width」「min-width」が便利。

height
・初期値はauto
・数値と%の指定が可能
・負の値は指定できない
・HTMLのテキスト、画像（img）の適用される箇所
★デザインの都合が可能な限り初期値にする。
★「width」と違い%は使い難い。

padding
・上下左右まとめての指定が可能
・数値と%の指定が可能
・負の値は指定できない
・CSSで「backgroud」が適用される箇所
★「box-sizing: border-box;」を使えばだいたいは解決する。
★数値を入れれば絶対に余白を持つ（効かない場合別の何かが必ず間違っている）。
★背景「backgroud」に画像を持たせる時に有効。
★余白の取り方に悩んだら「padding」で指定すると良い。

margin
・上下左右まとめての指定が可能
・数値と%の指定が可能
・負の値が指定できる
・CSSで「backgroud」が適用されない箇所
★「marginの相殺」がややこしい。
★「ネガティブマージン」がややこしい。
★「他のセレクタとの関係性」がややこしい。
★CSSが嫌わる原因はこれ…だが、理解すると自由自在のレイアウトが可能。

border
・ボーダーのスタイル/太さ/色の指定が可能
・上下左右まとめての指定が可能
・数値と%の指定が可能
・負の値は指定できない
・初期値で「backgroud」を含む箇所だが、「box-sizing」で調整可能
★「box-sizing: border-box;」を使えばだいたいは解決する。
★横スクロールの原因探しで最後まで見つからないことが多い。

float
・初期値はnone
・指定された要素を左「left」または右「right」に寄せて配置
・ただし左か右にしか配置出来なくなり中央に揃わなくなる
・その他、特殊な仕様が多々ある
★使わない時は「none」にする。（よく使う）
★コーディングで一番悩ましい存在、極力使わないのがコツ
★「float」したら「clear」を徹底する。
★横並びになれば横並びの合計値になるので、ボックスの数値をしっかり把握する。
★ややこしいが「float」が自在に使えればどんなレイアウトも自由自在。
★「ネガティブマージン」と合わせたら更に強力。
※現在はあまり使われていないプロパティ

clear
・初期値はnone
・「float」プロパティの回り込みを解除する
・「float」 と「clear」はセットで考えると良い
★値に「left」「right」あるが、一緒なので使うなら「both」。
★使わない時は「none」にする。（よく使う。）

position
・ボックスの配置方法（基準位置）に相対位置「relative」か絶対位置「absolute」を指定可能
・表示位置の指定には「top」「bottom」「left」「right」を併用し基準位置からの距離を設定
・数値と%の値、負の値が使用可能で初期値は「static」
・絶対位置への配置で、スクロールしても位置が固定されるのが「fixed」
・指定は親に対して行う
★ヘッダーの固定やページトップへのボタンの固定に便利。
★2つのセレクタを併用しなければならないのずややこしい。
★負の値や親子関係がややこしい。
★ややこしいが「position」が自在に使えればどんなレイアウトも自由自在。
★「float」「ネガティブマージン」と合わせたら更に強力。
※多用は禁物。
横並びは極力「padding」「margin」で対応するのが良い。

overflow
・ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定
・初期値は「visible」
・autoはブラウザ依存がある
・親要素に指定する
★「float」の親要素には「overflow: hidden;」を使うと便利。
★タッチデバイスのスクロールは操作しにくい。
★初期値は「overflow: visible;」と「height:auto;」で、縦長のページはスマートフォンならOK！？

display
・ブロックレベル、インライン等の要素の表示形式を指定する際に使用
・「inline」は横幅の絶対値を持てない
・「block」と「inline-block」は横幅の絶対値を持てる
・noneは要素が表示を隠すことが出来てしまう
★要素の横並びの箇所（グローバルナビ等）には必須。
★非表示「display :none;＝非表示」の扱いには要注意。
★表組「table」の解体に必要。
↓主な使い方まとめ

●RDWの歴史

●RWD 対応のサイト制作手順
幅広デザインでWebページを作成
→viewport定義の指定
→横幅変動時のコンテンツ幅を設定
→Media Querieでデザインを整える
→画面サイズに合わせた表示部品の導入

★4つのポイント

①Box model：上記

②Viewport：「表示領域」
例えばブラウザウインドウの表示領域＝viewportであり、その表示のされ方を指定できるのがmeta要素のviewport。
　・いまのところパターンは数えるほど
　・コピペして使う事が多いのか現状
　・実機検証を最後に忘れずに
↓

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

③Media Queries：Webページのデザインを記述するCSSのうちの1つ
メディアクエリを使用すると画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できる。
　・使うコツは整理整頓
　・初期値の把握
　・複雑にしない
　・特に行き当たりばったりはNG
　・使用する前にバックアップ必須、デバイスごとの保存を推奨

★ブレイクポイント
メディアクエリでは「Aの場合」「Bの場合」とデバイスサイズに応じた指定を行うが、そのデバイスサイズに指定する数値のことをブレイクポイントと言う。
一般的には、スマートフォンで320px～600px、タブレットで600px～1024px、PCで1024px以上。

＜ブレイクポイント設定のポイント＞
・メディアクエリは同じものだけ使う
・ブレイクポイントは同じ数値で切り分ける
・記述箇所はセレクタごと、画面幅ごとが多い
・プロパティと値は出来るだけ統一する
・「.css」のファイルは1ファイルが理想
・インデント・{}をしっかり揃える
・そもそもHTML文書に無理が無いのかを確認
・大きいサイズから記載するのが一般

④UI/UX：「User Interface」「User Experience」
さまざまデバイスに対応したコンテンツを作るには、環境・時間・空間・性別・年齢・人数等、ユーザーの理解が必要不可欠。
「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみる。

　■タッチデバイスを意識したボタン（リンク）
　　・タッチデバイスではボタンの領域を広く取る。
　　　<a href=“xxxx”>～</a>はインライン要素になり、幅と高さ
　　　を持たせる為に「display :block;」を上手く活用する。
　　・ポインターが無いことを踏まえ、リンク箇所のデザインル
　　　ールをサイト全体で統一して変えてみる。
　　・リンクの付いたバナーデザインはより解りやすく

　■迷子にさせない導線
　　・画面の面積が少ないデバイスでは解りやすい導線を組む。
　　　設計の段階で無駄なリンクやページは排除するのが理想。
　　・ 1クリック動作で1割のユーザーが離れると言われている。
　　　1ページの内容（ストーリー）を充実させることが重要。
　　・ファーストビューで「最優先のコンテンツ」、フッターで
　　　「各ページ」へ。
　　　ページを開いて最初に見えるのが「目的の内容」
　　　⇒深く読み進めて「次への誘導」
　　　興味のない方には「他の興味」へ案内できるように。

　■ページの表示スピード対策「画像」
　　・Retinaディスプレイや4Kテレビ等々への対応
　　　Retinaディスプレイの場合解像度が2倍になるため、2倍の
　　　サイズの画像を用意し50%サイズで指定する。
　　　ただし容量には要注意。
　　・ imgとbackground-imageの違いを確認する。
　　　「img」要素はHTMLの文章構造で存在する意味が必要。
　　　「background-image」は背景のCSSのため、文法上の意味
　　　はない。
　　・Webアイコンや「canvas」「SVG」を上手く取り入れる
　　　jpg,gif,png以外の画像表示やコンテンツの実装を上手く取
　　　り入れてみる。
　　　ただし、実機検証やブラウザ依存には要注意。

　■ページの表示スピード対策「プログラム」
　　・動的プログラムは表示スピードを低下させる。
　　　JavaScriptはとても便利な一方、プログラムとしてはペー
　　　ジの表示速度を低下させる。
　　　ユーザビリティ、アクセシビリティという部分を考えて最
　　　低限の利用方法を考えてみる。
　　・CMS等のテンプレートについて
　　　簡単にWebサイト作成をしてくれるツールは理想だが、便
　　　利な分「何かしらの処理」が行われ表示スピードに影響す
　　　ることが多い。
　　・誤ったプログラムも表示スピードの低下に繋がる
　　　HTMLやCSSの記述が誤っていてもブラウザは独自解釈し
　　　て表示してくれる。
　　　ただ表示スピードの低下に影響し、SEOにもマイナス。

　■とにかく使い易さの追求
　　・Webフォントの利用
　　　日本語に対応したWebフォントも多く出てきており、上手
　　　く取り入れるのが良し。
　　・ jQury の利用
　　　HTML5やCSS3で実現できない動きはまだまだある。
　　　ページを重くするという問題はあるものの、それよりも優
　　　先すべき「使い易さの追求」なのであれば、上手くjQuery
　　　を取り入れる。
　　・Googleアナリティクスの利用
　　　ページのアクセス数や表示スピード、滞在時間等のデータ
　　　取得を無料でできる。

★Webの技術には柔軟に対応するべし。
まずは、仕組みの理解をして簡単でシンプルな方法で実装してみる。
その基礎知識を身に着けた後に、様々な方法を見て触れて調べて受けて学んでいくことが重要。

●本日のまとめ