HTML & CSS 道場コース上級編 1. ヘッダーをレスポンシブ対応させよう！

ヘッダーをレスポンシブ対応させよう！

目的１：タブレット・スマートフォン様にヘッダーを調整する。

作業達成目標

・モバイル用アイコンを表示させる

・デフォルトメニューを隠す

・メニューアイコンを表示させる

上記の工程目標が見えていれば、分からなくても調べるのは簡単なはず。

作業工程と一緒に・・

HTML & CSS 道場コース上級編を並行確認しつつ作業。

分からなければググるかProgateをスライド確認。

追記 2021.1.4

第一回目は、スマートフォン向け調整を行うこと。これを踏まえた上で２周目を開始する。（※１回目書いたとき、汚いコード書いてしまったのでやり直ししました。）

1.先ずは確認しよう [重要]

１-1，viewportの設定の確認作業

では、どこに設置すればよいか？

'HTML<head>内の見やすい位置に設置する'

このように覚える。

モバイル閲覧時のメディアクエリを正常起動させるために、設置は必須。

分からなかったら下記URL参考

https://prog-8.com/slides?displayed_id=1516&lesson=16&word=viewport%E3%81%AE%E8%A8%AD%E5%AE%9A

１-２、全要素にCSSを適用しているか確認

２点確認する。

・アスタリスク（＊）を適用

・box-sizing: border-box; を使う。タブレット・スマートフォンに適応するため。レイアウト崩れを防ぐ効果がある。

書いていなかった場合、この２つを使用しCSSに適用する

２，responsive.cssを適用するための準備・設置する

HTML内にモバイル対応responsive.cssを設置する

responsive.cssを適用することで、スマートフォン CSS・タブレット CSSそれぞれ使いやすくなる。

書き方

<link rel="stylesheeet" href="responsive.css">

・HTMLに貼り付ける

・<head>内です

・ヘッダーを隠し、新たなボタンを設置する。その為書く場所はヘッダーロゴ付近に設置

この様に覚える

参照

ログイン | プログラミングの入門なら基礎から学べるProgate[プロゲート]

３ .メニューアイコンの設置

こう書く。

・HTML内に設置

・配置場所は「ヘッダーロゴを表示させているクラスの上」に設置

4、メニューアイコンCSSを完成させる

難しい場合、下記URLをチェック

（過去演習問題では言われるがままに貼り付けただけだった）

https://prog-8.com/html/study/3/12#/25

メニューアイコンは、

・アイコン色

・配置(float)はどこ(right,left,top,bottom)にするのか

・メニューアイコンのフォントサイズは？何ｐｘ？

・パディング（padding)の位置決めについて。上記の数値通りにするか、画面を見ながら調整すること。

・display: none; こちらは必須

5，responsive.cssを調整する

モバイル向けのアイコン調整

デフォルトメニューを非表示・設置したアイコンの表示

　　・デフォルトメニューを非表示

.クラス {

　　　　display: none;

　　}

.クラス {

　　　 display: block;

　・設置したアイコンはこのように表示させる

・ただし、「モバイル向けのみに適用」すること

※感想※

メニューアイコン付ける作業に手間取ってしまった。

上級編ではコピペし、貼り付けるだけの作業になってしまったため、覚えるまで苦労した。

対策：暇な時、色んなアイコン貼り付けて遊ぼう。徐々に覚える。