【要参考】
・「マルチデバイス対応の教科書①②.pdf」参考
↑大事な10点をよく理解する
【ボックスモデルに関わるセレクタ】
width、height、padding、margin、border
【ボックスをレイアウトさせるセレクタ】
float、clear、position、overflow、display
レスポンシブWEBデザイン（RWD）とは？
「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。
サンプルページ（レスポンシブWebデザイン基礎）
【ワンポイントアドバイス】
昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。
【参考サイト】
- 【入門】レスポンシブWebデザインとは？概要と作り方を丁寧 …
- Responsive Web Design JP | 日本国内の秀逸なレスポンシブ …
- レスポンシブWebデザインとは？メリットとデメリット …
Viewport とは？
viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。
【ワンポイントアドバイス】
viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。
【参考サイト】
- 実践！スマホサイトのviewport設定 | 第1回 viewportとは …
- viewportを理解して正しいレスポンシブデザインを設定しよう …
- viewportとは？HTMLのmeta要素の設定方法など徹底解説！
Media Queries とは？
メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。
【ワンポイントアドバイス】
メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。
【参考サイト】
メモ
◆【Retinaや4K対応のために画質を2～3倍などで出力する方法】
※「マルチデバイス対応の教科書②.pdf」参考
Photoshopの場合（出力したいレイヤーごとでパーツごとに出力も可能）
レイヤーが指定された状態で、レイヤーパネル右上の三本メニュー→書き出し
書き出し画面左上のサイズ欄で、2X（2倍）や3X（3倍）などで書き出しできる
◆marginは相殺させない（ぶつけない）のがコツ
ボックス同士のtop、bottomがぶつかった部分が相殺（マイナスマージン）になり、レイアウトがうまくいかないことが多いので、marginの上下幅を指定するときはtopで指定したら他のボックスでもtop指定、bottomなら他で指定するときもbottomという風に統一するほうが良いとのこと
◆width=ウィズと読む（先生とかはウィズスに慣れてるからそれで読んでるとのこと）
◆none=ナンと読む
◆calc関数
半角スペース入れて記入する（例： calc(10px – 5px) のような感じ）
◆これから新規につくるサイトは、（新しいので）displey flexを使う
ただ、昔はfloatで作られたものが多く修正もできるようにならないといけないので、理解しておく
floatは使えるようになるが、新規に作成するときには使わず、display flexを使うのがコツとのこと
◆idは、ページ内リンクやJavaScriptの動作を指定するときなど限定的なときのみ使用し、極力使わないようにする
idは点数が
◆メディアクエリは初期値を把握し、複雑にしない
整理整頓してわかりづらくならないようにして、点数に注意して記入、バックアップもする
◆ブレイクポイント（このポイント、例えば画面幅等になったらこの表示指定する、等）をばらばらに設定したり、書き方を突然省略するなど変えたりしない（点数が変わってしまい下に書いたものが点数低いと上書きされなくなってしまうため）
◆様々なサイズのスマホが販売されるため、ブレイクポイントに決まりはなくトレンドも変動するので、「ブレイクポイント 2023 トレンド」などで検索して設定するのがいい（その人の主観になる）
◆min-widthは、小さい順（例：640px→960px→1280pxなどの順）に記載する
max-widthは、大きい順（例：1280px→960px→640pxなどの順）に記載する
（得点が同じ場合は、下に書いたものが通常上書きされるルールのため）
◆max-widthはPC→モバイルの順に作成するとき、min-widthはモバイル→PCの順に作成するとき
◆最低でも文字の1.3倍くらいのline-height（行間）にする
