-本日のアジェンダ-
1限目
実技 WEBデザイン実習②
RWD 対応のサイトについて
◆手順
幅広デザインでの Web ページを作成します。
viewport 定義を指定します。コピペでOK
横幅変動時のコンテンツ幅を設定します。
widthなど出っ張っている部分を検証ツールで探し修正。widthをmax-widthにするなど
Media Querie を使用してデザインを整えます。
画面サイズに合わせた表示部品を導入します。
・viewport 定義の指定：head内
viewport-fit=cover
入れるとカメラが画面に入り込んでいるタイプのスマホでカメラの横部分まで入り込む。
ポイント
全部合わせて100を超えないように
％やmaxwidthを使う
mediaqueryを使ってレイアウトを変える
ハンバーガーメニューなどの部品で整える
・Viewport
viewport 定義は、表示領域を定義。viewport 定義をすることでスマホの画素数に合わせた表示（横スクロール表示）が行える。
2限目
実技 WEBデザイン実習②
メディアクエリについて
3限目
実技 WEBデザイン実習②
Webページ制作実践
4限目
実技 WEBデザイン実習②
Webページ制作実践
パソコンとスマホ、好きなサイズへの切り替えができるボタン
ここを押すとサイズが出てくるのでブレイクポイントを設定して検証ツールで見てみると良い。
5限目
実技 WEBデザイン実習②
本日の講義のまとめ
本日のテーマ
Webページ制作実践で作成したページをRWD対応させましょう
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
・trainning-5
RWD対応穴埋め問題
trainnig5内のtrainning4の変更
ハンバーガーメニューをつけ、ハンバーガーメニューに重ならないよう変更しました。
今日学んだこと
レスポンシブ対応の手順
ハンバーガーメニュー
感想
本日はレスポンシブ対応の実習でした。
やっと手順の理解がざっくりですができました。
①viewpointをHTMLに書く
②ブレークポイント(760pxおすすめ)の画面に検証ツールでしてはみ出したものを調整
横スクロールバーをなくす
③iphone SEなど最小の画面で検証ツールで見て不自然な部分を@media・・で修正
この手順の順番を忘れないようにしたいです。