-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
レスポンシブWEBデザイン（RWD）：
PC、タブレット、スマートフォンなど、デバイスの
画面サイズよってResponsive=反応するWEBデザイン
WEBサイトを単一のHTML（ワンソース）で実現する制作手法
Box model：
「 マルチデバイス対応」のサイトの特徴は固定値からの解放です。
【ボックスモデルに関わるセレクタ】
☑ width☑ height ☑ padding ☑ margin ☑ border
【ボックスをレイアウトさせるセレクタ】
☑ float ☑ clear ☑ position ☑ overflow ☑ display
●width
初期値はauto
数値と%の指定が可能
負の値は指定できない
・デザインの都合が可能な限り「％」を使用しましょう。
・「max-width」「min-width」は便利
できるだけ横スクロールしないデザインが良い
→max-widthや％（100%以下）にするとよい
●height
初期値はauto
数値と%の指定が可能
負の値は指定できない
・デザインの都合が可能な限り「初期値」にしましょう。
・「width」と違い、「％」は使い難い。
●padding
上下左右まとめての指定が可能
数値と%の指定が可能
負の値は指定できない
CSSでbackgroudが適用される箇所
・「box-sizing: border-box;」を使えばだいたい解決するかも
・数値を入れれば絶対に余白を持ちます。（逆に効かない場合は別の何かが間違っています。）
・背景「backgroud 」に画像を持たせる時に有効
・余白の取り方に悩んだらpaddingで指定すると良いかも？！
●margin
上下左右まとめての指定が可能
数値と%の指定が可能
負の値が指定できる
CSSでbackgroudが適用されない箇所
・「marginの相殺」がややこしい
・「ネガティブマージン」がややこしい
・「他のセレクタとの関係性」がややこしい
・CSSが嫌わる原因はこれ…だが、理解すると自由自在のレイアウトが可能
2限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
・Medire Query
＠media screen and(max-width: 760px){
header{
margin: 0px auto;
}
}
・ブレイクポイント
見るデバイスに合わせてデザインが変わるサイズポイント
3限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
4限目
学科 HTML/CSS基礎⑨
本日の講義のまとめ
5限目
学科 HTML/CSS基礎⑨
本日の講義のまとめ
本日のテーマ
レスポンシブWebデザインを理解しましょう
本日の課題
本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。
本日学んだこと
レスポンシブWEBデザイン（RWD）について
marginはmarginの相殺やネガティブマージンがあり難しいが、paddingでうまくいかないときはミスをしている可能性が高い
最近は横にできるだけスクロールしないデザインが操作しやすいため、できるだけ横スクロールしないデザインが良い
→max-widthや％（100%以下）にするとよい
感想
本日はレスポンシブウェブデザインについて主に学びました。理解できた部分といまいちよくわからない部分とありましたが、
動画で講師でも理解するのに2年かかったとのことだったので、実践しながら身に着けていければと思いました。