【HTML&CSS】一般的なヘッダーの構成を紹介！

どうも皆さんこんにちは！kwです！

今回は、一般的なヘッダーの構成をご紹介していきます。

ヘッダーといえば以前作り方をご紹介しましたが、今回は構成の方をご紹介していきます。

ヘッダーの作り方はこちらです↓

ということで、やっていきましょう！

ヘッダーは、さまざまなデザインがあり、決まった方があるわけではないのですが、あくまで一般的によく使われている構成をご紹介していきます。

ヘッダーは、基本的にロゴとリストに分かれていて左端にロゴ、右端にリストといった感じです。

ここで言うロゴというのは、事業のロゴなどを指します。

ここで言うリストというのは、「ホーム」や「会社概要」、「お問い合わせ」などのメニューのことを指します。

では、次に作り方を見ていきましょう。

一般的な構成を作るには、<div>タグを使って、header-logoとheader-listというクラス名をつけたタグを用意します。

用意したら、header-logoクラスの要素の中に<img>タグ、また文字の場合は<h1>タグなどでもいいので配置します。

これで準備は完了なので、お好みで画像リンクなどを貼ってロゴを配置してみてください！

次にheader-listの方ですね。

こちらは、<ul>タグと<li>タグを使ってリストを作ります。

この際CSSからlist-style:none;としてあげた方が、見栄えがいいです。

これでリストの方も準備完了です。

あとは<a>タグを配置してリンクとして機能するようになったらヘッダーの完成です。

いかがでしたでしょうか？

少し難しい話になってしまったかもしれません。すいません。

ヘッダーがうまくつれるとサイトの印象もよくなるので、皆さんも是非、きわめて見てはいかがでしょうか？

ということで今回も、最後まで見てくれた方、ありがとうございました。

ぜひ、お手隙の際に他の記事もご覧ください！

また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。