iSARA模写①〜ヘッダー部分〜

基本的なHTMLとCSSの学習を終えてから、

模写に取り掛かりました。

iSARAです。

ソースコードを見たり、解説動画を見たりして作成しましたが

かなりのボリュームで、つまづくことも多かったです。

主に自分のつまづいたところをまとめておき、

今後に活かせるように記録します。

（コードは自分なりに作成したもので、オリジナルとは異なります。）

ヘッダー部分

↓ヘッダー部分を作成します。

まず

①レイアウトを確認。

②HTMLで要素を書き出し、

③CSSで文字の大きさ、色、配置などを作って見た目を整えていきます。

私はノートに書きます。

あとで見返せるし、この方法がしっくりきています。

HTMLで全ての要素を書き出します。

要素は縦並びとなりますが、後からCSSで見た目を整えます。

今回のポイントは、

☑️<div>要素を横並びにする

div③,div④{display:inline-block;}
div⑤{position:absolute;
    　right:0;}
div②{position: relative;}

→inline-blockについて知りたい方は、

の記事がおすすめ。

☑️ロゴと文字の高さを揃える

div③{vertical-align: bottom;}

見た目を同じにすることに専念し、

ボタンのhover時の色の変化や、

ヘッダーの固定(スクロールしても画面の上に固定して出る)などは、

後から実装することにします。

すぐにヘッダー固定を実装したい方には、

で解説しています。

↓解説②まで終えてから、

ヘッダー固定にいくのがおすすめです。

私は、ヘッダーだけで挫折しそうだったので、
まずは本や動画を見ながら、
全体をイチから作る練習をしました。

どこから手を付けたらいいかわからない人で、
本で学習するなら、下記がおすすめ。

動画で学習したいなら、下記がおすすめ。
通勤などで動画を見て、家に帰ってから手を動かすのが効率的です。

Udemy購入する際は、セール期間に購入しましょう！（20,000円→約1,750円）

たにぐちまことさんの教材はわかりやすい！
まずはたにぐちさんのYouTubeを見てみるのもいいと思う。