-本日のアジェンダ-
1限目
実技 WEBページ制作実習②
レスポンシブWebデザインについて
2限目
実技 WEBページ制作実習②
RWD 対応のサイトについて
3限目
実技 WEBページ制作実習②
Webページ制作実践
4限目
実技 WEBページ制作実習②
Webページ制作実践
5限目
実技 WEBページ制作実習②
Webページ制作実践
Box model
「 マルチデバイス対応」のサイトの特徴は固定値からの解放。
横幅の合計値をデバイスの画面幅（100%）を超えなければ、横スクロールのバーは出ない。
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」の解体に必要
まとめ
極端に言ってしまえば、下記の１０種類のセレクタさえしっかりと覚えてしまえば、CSSで何でもできる。
ボックスモデルを理解してしまえば、後はそのまま書けば見た目が変わるセレクタしかない。
★レスポンシブWEBデザイン（RWD）
↓このコマンドは大事
<meta name=”viewport”content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>
★ブレイクポイント
・メディアクエリは同じものだけ使う
・ブレイクポイントは同じ数値で切り分ける
・記述箇所はセレクタの直下が好ましい
・プロパティと値は出来るだけ統一する
・「.css」のファイルは1ファイルが理想
・インデント・{}をしっかり揃える
・そもそもHTML文書に無理が無いのかを確認
↓本日の進展
