勉強記録　～プログラマーへのいばら道～　progate：HTML&CSS上級編（３）

今回は、HTML&CSS上級編の復習その3となります。

内容は【footerの位置調整、SNSボタンの調整、フォントのレスポンシブ化、画面サイズが大きい時への対応、スマートフォンのヘッダーレイアウトを整える】です。

　また、スマートフォンサイズではfooterが中央寄せになるように配置する。

　responsive.cssの@media（スマートフォンサイズ）のfooterに、text-align: center;を記

　述する。

　スマートフォン環境でもボタンをタップしやすいように、ボタンの幅を画面いっぱい

　に広げる必要がある。ボタン間のmarginも調整する必要がある。

　ボタン幅が100%になるようwidthを記述し、ボタン間隔marginを調整する。

　画面が小さいときは、フォントサイズを小さくした方が読みやすくなる。

　responsive.cssで端末毎の「@media (max-width)」にfont-sizeを記述していく。

　タブレットやスマートフォンなどの小さい画面でも綺麗なレイアウトでひょじできる

　様にresponsive.cssを記述していくと、大きい画面幅で表示した際に要素の位置が画面

　幅に応じて離れすぎて、見づらくなってしまうことがある。

　これを直すには、max-width: 〇〇pxと指定することで、画面幅を拡大しても、要素の

　幅の上限が〇〇pxとなる。

　スマートフォンでは、ヘッダーメニューを表示しきれないため、メニューをアイコン

　に変更する。

　メニューアイコンはデフォルトでは非表示にし、画面幅がスマートフォンサイズの時

　のみに表示されるようにする。

　要素を非表示にするにはdisplay: none;を用い、非表示にした要素を表示させる時は、

　display:block;を用いる。

　でスマートフォン用のメニューアイコンを追加し、

　.menu-icon {

　 display: none;

　をstylesheet.cssに記述してデフォルトでは非表示に設定し、

　その後にresponsive.cssで

　.header-right {

　 display: none;

　}

　を記述しデフォルトのメニューを非表示にして、

　.menu-icon {

　 display:block

　}

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

ということで、本日はここまで。

次回からは「HTML&CSS Flexbox編」の復習を記録します。

ご一読を頂きまして、有り難うございました。