実技 WEBページ制作実習②【HTML&CSSの編集/RWD対応WEBページ制作】

CSS編集箇所
・メディアクエリの指定
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>

・メディアクエリの最大横幅指定
コンテンツの横幅指定を width プロパティから max-width プロパティに変更。（max-width: 〇〇〇px;）
ここでは(max-width: 760px)を指定。

↓Width(横幅):760×Height(高さ):752の場合

↓Width(横幅):761×Height(高さ):850の場合　※見やすくするためにHeight(高さ)を850pxに変更しました。

・幅を最大幅に変更 横幅がウィンドウ幅を超えないように max-width プロパティや横幅を%で指定する。

section {
padding: 0 0 60px 0;;
width: 960px;
margin: auto;
}
↓この場合だと横スクロールが表示されてしまう。

section {
padding: 0 0 60px 0;;
max-width: 960px;
margin: auto;
}
↓横スクロールが非表示になる。
※width:100%でも同様に横スクロールは非表示にはなるが、そうすると横幅が画面いっぱいに広がってしまうので不適切。

RWD対応用に作成し、ハンバーガーメニューを追加しました。