WEBサイトを作るにおいて、headerは欠かせない重要なパーツ。
今回はheaderを作成する際に便利なテンプレートを紹介します。
17個の種類があるので、是非headerを実装する際の参考にしてみてください!
headerのテンプレート「headers.css」の紹介!
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.00.09.png)
今回紹介するheaderのテンプレートは、「headers.css」です。
以下は、「headers.css」のWEBサイトに書いてある英語の紹介文を日本語に変換したものです。
フロントエンドの仕事ではCSSフレームワークを使わないので、新しいプロジェクトのたびに一からやらなくても、素早くヘッダーコンポーネントを構築する方法が必要でした。同じように考えているのは私だけではないと思います。
手始めに、若干の違いはあるものの、17個のヘッダーを作成してみました。これは進行中のプロジェクトなので、もっとたくさんのヘッダーが来ることを期待しています。
もし提案があれば、Githubのissueを使ってください、私は喜んでそれを実装します。
つまり、headerを作成する際に役に立つ17個のテンプレートをまとめてくれているWEBサイトってことです。
2021年1月現在は17種類ですが、今後増える可能性があるらしいです。
17個のheaderのテンプレートを1つ1つ見ていきましょう!
Header 1
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.03.31.png)
一番オーソドックスなheaderです。
かなり簡単な実装ですね。
Header 2
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.06.22.png)
このタイプのheaderは初めて見ました!
Header 3
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.08.26.png)
headerに検索バーがあるパターンです。
たまに見かけますね。
Header 4
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.12.08.png)
左に検索バーがあるパターン。
なかなか見ないレイアウトでした。
Header 5
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.13.33.png)
あんまり実務では見ないレイアウトですね。
海外のWEBサイトだと、よくあるレイアウトなのかも知れません。
Header 6
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.15.04.png)
2段になっているheaderです。
headerが2段になっているWEBサイトは多々ありますね。
Header 7
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.16.38.png)
headerの中のパーツを3つに分けるパターンです。
こういうheaderのWEBサイトもよくあります。
Header 8
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.18.53.png)
先程のheader7の中のパーツの順番が入れ替わったパターンですね。
Header 9
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.20.10.png)
headerの一番右にある部分がボタンになっている実装はかなり多いですね。
ページを開いた瞬間に見える部分なので、ここに「お問い合わせボタン」などを置いているケースが多い印象です。
Header 10
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.22.53.png)
こちらもheaderが2段になっているパターンです。
Header 11
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.24.47.png)
このheaderのレイアウトはあまり見たことがないです。
Header 12
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.26.38.png)
「menu」のボタンをクリックすると、メニューが出てくる実装になっています。
Header 13
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.30.24.png)
これも初めて見たheaderのレイアウトですね。
Header 14
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.31.37.png)
ログインボタンとショッピングカードのロゴが配置してあるheaderです。
ECサイトでよく見るレイアウトですね。
Header 15
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.33.23.png)
僕のポートフォリオサイトと一緒のレイアウトのheaderでした。
情報が中心にまとまっていて見やすいです。
Header 16
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.35.19.png)
こちらのheaderもよく見るレイアウトです。
縦線をナビメニューの左右につけることで、メニューの範囲が見やすくなっています。
Header 17
![](https://yujiromx.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-14-16.37.52.png)
斬新なデザインのheaderですね。
まとめ
以上が、headerのテンプレートである「headers.css」の紹介でした。
普段なかなか見ないレイアウトのheaderもあり、かなり見てて面白かったです。
「headers.css」のWEBサイトにGitHubのリンクが貼ってあるので、気になるheaderのHTMLとCSSのコードを知りたい場合はチェックしてみましょう。
WEB制作をしている方は、是非headerを作る際の参考にしてみてください!