コピペで簡単!シンプルなHTMLとCSSで実装された17種類のヘッダのテンプレート -headers.css

新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。

ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。

17+種類のWebサイトのヘッダを実装するHTML+CSSのシンプルなテンプレート

headers.css
headers.css -GitHub

テンプレートは、以下に基づいて実装されています。

  • シンプルな実装
  • レスポンシブに完全対応
  • 簡単に編集できるようにSassを使用
  • アクセシブル

オープンソースのプロジェクトで、商用でも無料で利用できます。
2020年9月現在、17種類のヘッダがあり、今後さらに増やす予定とのことです。

ヘッダを実装するHTML+CSSのシンプルなテンプレート

ヘッダを実装するHTML+CSSのシンプルなテンプレート

テンプレートのヘッダを見てみましょう。
デザインは非常にシンプルです。

ヘッダのテンプレート

ヘッダのテンプレート 1

構造もロゴとナビゲーションでシンプルで、スマホなどの小さいスクリーンではナビゲーションがトグルボタンになります。ロゴを画像に変更したり、トグルをハンバーガーメニューに変更して利用できます。

ヘッダのテンプレート

ヘッダのテンプレート 2

ヘッダのテンプレート

ヘッダのテンプレート 3
虫眼鏡アイコンをクリックすると、検索フォームが表示されます。

ヘッダのテンプレート

ヘッダのテンプレート 4
ナビゲーションにアイコンを使用したものもあります。

ヘッダのテンプレート

ヘッダのテンプレート 5

ヘッダのテンプレート

ヘッダのテンプレート 6
サインアップやボタンが用意されたヘッダ。

ヘッダのテンプレート

ヘッダのテンプレート 7

ヘッダのテンプレート

ヘッダのテンプレート 8
ナビゲーションのアイテムが増えても、ロゴが中央配置されるようになっています。

ヘッダのテンプレート

ヘッダのテンプレート 9

ヘッダのテンプレート

ヘッダのテンプレート 10

ヘッダのテンプレート

ヘッダのテンプレート 11

ヘッダのテンプレート

ヘッダのテンプレート 12

ヘッダのテンプレート

ヘッダのテンプレート 13

ヘッダのテンプレート

ヘッダのテンプレート 14
ナビゲーションとユーティリティが必要な時もありますね。

ヘッダのテンプレート

ヘッダのテンプレート 15

ヘッダのテンプレート

ヘッダのテンプレート 16

ヘッダのテンプレート

ヘッダのテンプレート 17

sponsors

top of page

©2020 coliss