今日はマルチデバイス対応のサイトの作成方法を学びました。
まだ基本のPC用のサイトの作成方法がまだ頭に入ってないので、まずはそこから頭に入れて、今日は理論だけでも頭に入れておきたいです。
1.レスポンシブウェブデザイン（RWD）：
デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。
ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。
（参考）RWDできていない例
・画面を細くして横スクロールが発生
・スマホで表示させると文字が小さくなってしまう
2.主なプロパティ
■width(幅)
・初期値：auto
・推奨：「％」を使用する
・「max-width」 「mini-width」も使えると便利
■height
・初期値：auto
・推奨：初期値
※widthと違い％は使いずらい
■padding（要素の内側）
・負の値が指定できる
・CSSでbackgroudが適用される箇所
→記述したまま表示されやすい
■margin（要素の外側）
・負の値が指定出来る
・CSSでbackgroudが適用されない箇所
・marginの相殺が起こる
→記述したまま表示されずらい
■border（四角形に囲む）
・問題が起きたら「box-sizing: border-box;」を使えばだいたい解決する可能性大
■float（横並び）
・初期値：none
・極力使わない方がいい
※floatとclearはセットで使おう
■clear（要素の回り込みを解除）
・初期値：none
■position（位置の指定）
・ヘッダーの固定や、ページトップへのボタンの固定に便利
■overflow(ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定)
・初期値：visible
■display(ブロックレベル・インライン等の、要素の表示形式を指定する)
3.RWDに適したサイトの作り方（L11.2）
(1)viewport（表示領域を定義）（HTML）
・ viewport 定義が無い状態で Web ページをスマホで表示させると Web ページの横幅全体を画面に表示できるように縮小表示される
→文字が小さくなるのを防止するために使用
(2)横幅変動時のコンテンツ幅を設定
・width → max-width プロパティに変更
※max-width ：要素が取りうる横幅の最大値を指定
(3)Media Querie でデザインを整える
・Media Querie ：
画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更
（使用例）
- Media Queries を使ってウィンドウ幅が760px未満の時に以下の変更を行いました。
- トップ画像の上部に表示されるロゴの表示位置を中央にしました。
- トップ画像の下部に表示されるメッセージを非表示にしました。
- おもちゃの紹介を横4個並びから横2個並びに変更しました。
- 企業活動を横並びから縦並びに変更しました。
- フッターを横並びから縦並びに変更しました。
※タブレットの最小サイズ760pxをもとに、それより小さいサイズはスマホ対応にする
（4） 画面サイズに合わせた表示部品の導入
・例えば、ハンバーガーメニューを入れるなど
４．その他メモ
display: flex;縦並びを横並び（並列）にする