HTML/ CSS 〜Progate道場コース中級編（headerのレイアウト）〜

残り目標時間、1ｈ50ｍ！

【ヘッダーのレイアウト】

🍀rgbaの復習

🍀 line-heigh→文字をヘッダーの中心の高さに持っていきたい(文字の縦の幅とヘッダーの縦の幅を同じにしたい) 時。

⚠️本来は行間の調整だが、要素の縦方向の中央に文字を配置する機能も

🍀transitionのアニメーション→ボタンのカーソルを合わせて時の変化

🍀🍀🍀<a href="#" class="login">ログイン</a>

　→サンプル上は<p>ぽかったけど…「ログイン」ボタンなんですよね(￣◇￣;) href対応、すっっかり忘れてました。

⚠️ <div class="header-left">
　　<img class="logo" src="">

と、

　<div class="header-right">
　<a href="#" class="login">

ここでdivが働く要素とは？！→<a>がblock要素になったから、divっていらないんじゃ…

→⚠️ divがあると、<a>のclass名でコーディングしても、display:block;が反映されなかった。→.header-right  a{　だと可能

CSSのdisplay:block;とは？ブロック要素について詳しく解説 | 侍エンジニアブログ

このサイトで、ボタンの作り方にdivを使わず、<a>のblock設定でやっていた。→divなしでコーディングしてみる。

→こーゆーことやってたので、時間かかちゃって、この道場演習で1h10ｍかかってしまった😱（途中、共に4時起きしてた娘がPoopした💩★）

でも、この指定で、

コーディング出来たよ⭐️

＜イメージ参考＞

https://digipress.info/tech/how-to-fix-line-broken-inline-block/

🍀ヘッダーの固定→position:fixed;　top:0;　z-index:10;

最後に、width:100%はめっちゃ大事❗️❗️