HTML/ CSS 〜Progate道場コース初級編（ヘッダーの作成）〜
これまでの学習を復習するために、自分でやり方コードを打ち直しながらWebページを作っていこうかと思っていたら！思っていたら！
神サイト✨Progate✨様には無用の心配でした。
既に用意してあった復讐への道★違った、復習への道⭐️
道場コースでは、懇切丁寧なガイドがない代わりに、親切丁寧なサポート体制の下、自分でコーディングをしていくことが可能です！
【ヘッダーの作成】
<head>部分は作成済で、<body>部分のヘッダーの作成から入ります。ここでは、忘れていたこと、復習確認したことをpickupします。
🍀.header{height:90px;}→範囲の確保を忘れてた。
※header内の文字色を統一する場合は、.headerからの指定でOK
🍀.header-logo{padding:20px 40px}→headerの範囲を90pxと指定した上で、header-logoのpaddingを指定し、中央に持ってくる。
※まだまだヒヨコなので、background-colorで範囲を確認しながら。
⚠️headerのheight:90;=header-logoの上下padding20(合計40)+font-size40 → はみ出ちゃう。
→font-size:36;で落ち着く… まだ間隔感覚が分からない…
⚠️.header-list li{padding:33px 20px}も同様。
🍀全体的に右寄せしたいとき
.header{padding:0 20px}で調整。
または、.header-logo{padding:20px 40px 20px 20px;}で微調整。
本日ここまで！！
所要時間、約30分。
この記事が気に入ったらサポートをしてみませんか？