本日のアジェンダ
1限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
2限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
3限目
学科 HTML/CSS基礎⑨
テーブルタグについて
4限目
学科 HTML/CSS基礎⑨
フォームタグについて
5限目
学科 HTML/CSS基礎⑨
本日の講義のまとめ
本日のテーマ
レスポンシブWebデザインを理解しましょう
本日のレポート
マルチデバイス対応について
レスポンシブWEBデザイン（RWD）とは？
PC、タブレット、スマートフォンなど、デバイスの画面サイズよって「Responsive=反応する」WEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。
ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。
レスポンシブWEBデザインのための手順
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
ボックスモデルに関わるセレクタ
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
floatプロパティは、指定された要素を左「 left 」または右「 right 」に寄せて配置
ただし、左か右にしか配置出来なくなり中央に揃わなくなる
その他、特殊な仕様が多々ある
・使わない時は「 none 」にする。（これはよく使います。）
・コーディングで一番悩ましい存在、極力使わないというのがコツかも？！
・「 float 」したら「 clear 」を徹底する
・横並びになれば、横並びの合計値になるので、ボックスの数値をしっかり把握してみましょう。
・ややこしいが「 float 」が自在に使えればどんなレイアウトも自由自在
・「ネガティブマージン」と合わせたら更に強力！
clear（クリア）
初期値はnone
「float」プロパティの回り込みを解除する。
「float」 と「 clear 」はセットで考えると良いかも
・値に「left」「right」あるが一緒なので使うなら「both」
・使わない時は「none」にする。（これはよく使います。）
position（ポジション）
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置「relative」絶対位置「absolute」
を指定出来る。表示位置の指定には「top」「bottom」「left」「right」を併用して、基準位置からの距離
を設定する。
数値と「％」の値、負の値が使用可能 初期値は「 static 」
絶対位置への配置でスクロールしても位置が固定の「fixed」
・ヘッダーの固定や、ページトップへのボタンの固定に便利
・2つのセレクタを併用しなければならないのでややこしい
・負の値や、親子関係のがややこしい
・ややこしいが「 position 」が自在に使えればどんなレイアウトも自由自在
・「 float 」「ネガティブマージン」と合わせたら更に超強力！
overflow（オーバーフロー）
overflowプロパティはボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する。
初期値はvisible
autoはブラウザ依存があります。
・ まず「 float 」の親要素に「 overflow: hidden; 」が便利
・タッチデバイスのスクロールは操作しにくい
・初期値は「 overflow: visible; 」と「 height:auto; 」で縦長のページは、スマートフォンならOK！？
display（ディスプレイ）
displayプロパティは、ブロックレベル・インライン等の、要素の表示形式を指定する際に使用
inlineは（横幅の絶対値を持てない）
blockとinline-blockは（横幅の絶対値を持てる）
noneは要素が表示を隠す事が出来てしまう。
・要素の横並びの箇所（グローバルナビ等）には必須
・非表示「 display :none; 」の扱いには要注意
・表組「 table 」の解体に必要
感想
レスポンシブ対応がとにかく大事ということは分かった。
上記10個のセレクタについて、しっかり勉強する。
