どうもみなさんこんにちは！ryutaです！今回はヘッダーの作成について解説していきます。
では早速行って見ましょう
ヘッダーの枠組み
ヘッダーには枠組みがあります。その枠組みの中にロゴのdivやヘッダーリストのdivが入っています。まぁここはそこまで重要なことではないのでへぇーそうなんだ〜くらいに思っておいてもらえればokです
ヘッダーの中身を横並びにする
では早速ヘッダーの制作に入っていきましょう。まずheadの他にheaderlist というcssを作っておきます。これを使って色々中身をいじっていきます。まずはヘッダーを横並びにした方が見栄えがいいので横並びにしていきましょう。header-listの中のli要素をflat:leftとするとヘッダーが横並びになります。
余白を調整
ここで余白を調整していきます。余白の調整は完全に見栄えを良くするためのものなんですが、この余白でサイトの印象がガラッと変わったりするので手を抜かずにやっていきましょう！
やり方は簡単でpadding;数値をcssに導入するだけです。この数値を変えて更新変えて更新を繰り返していきましょう！
このpaddingは最大で四個の数字を導入できます。四個横に並べると、上、右、下、左となります。
まとめ
ここまでやれば簡易的かつ見やすいヘッダーが完成です！余白の数字などを自分好みに変えて行って見ましょう！
コメント