HTMLとCSSを使ったヘッダーの作り方とコツ【2024年最新版】

多くのWebサイトで設定されているヘッダーはHTMLとCSSで作成可能ですが、具体的な作り方が分からないという方も多くいらっしゃるでしょう。そこで今回は、ヘッダーの役割や基礎知識と合わせて、HTMLとCSSによるヘッダーの作り方、作成時に押さえておくべきポイントなどを分かりやすく解説します。

【関連ページ】
ホームページ制作・Web制作にかかる費用・相場感や、あなたの目的別にホームページ制作・Web制作会社をお探しいただけます。 
コーディングの費用・相場
コーディングのみ対応可能なホームページ制作会社一覧 

本来、ヘッダーとは文書や資料の先頭に配置される情報のことを指します。転じて、Webサイトにおけるヘッダーは、ページ内の最上部に位置するスペースのことを意味します。

ヘッダーは全ページで共通の内容を表示するのが大きな特徴で、一般的にはWebサイトのタイトルや企業のロゴなど、Webサイトを象徴する表記を入れ込むケースが多くなっています。ヘッダーを設定することでWebサイト全体の統一感、デザイン性を高めやすくなります。

ヘッダーに含むべき情報は以下の2点です。

・Webサイトのタイトル
・グローバルナビゲーション

グローバルナビゲーションとは、サイトの主要なページへの案内リンクのことで、訪問者がどのページに滞在していても目的のページへスムーズに遷移するサポートを行います。また、Webサイトのタイトルにはトップページへのリンクを付けていつでもトップページへ遷移できるようにするのが基本です。

ここでは、HTMLとCSSによるヘッダーの作り方を解説するとともに、具体的なコーディング例を紹介します。

HTMLとCSSによるヘッダーの作り方を紹介します。

1.HTMLでヘッダーのひな型を作成
2.CSSでスタイリングする
　1.画面上部にヘッダーを固定
　2.余白のためのインナー要素を設ける
　3.ヘッダー内容の要素を上下中央揃えにする
　4.ロゴとナビゲーションを左右に離して設置
　5.ナビ要素同士に間隔を設ける

こちらはあくまで基本的なヘッダーの作り方なので、実際には訪問者への印象や操作性などを考慮してデザインを行います。

参考までに、ヘッダーの実際のソースコードを以下に記載します。お手本として参照しながら、なぜこのソースコードなのか？ほかのソースコードはないか？といった点を考えながらソースコードを読んでみましょう。

【HTML】
<div class="header">
 <div class="header__inner">
 <img class="header__logo" src="https://placehold.jp/bbbbbb/ffffff/100x35.png?text=LOGO">
 <div class="header__navgroup">
 <div class="header__navitem">TOP</div>
 <div class="header__navitem">ABOUT</div>
 <div class="header__navitem">BLOG</div>
 <div class="header__navitem">CONTACT</div>
 </div>
 </div>
</div>　※

【CSS】
.header{
margin-top: 20px;
position: fixed;
top: 0;l
eft: 0;
width: 100%;
height: 70px;
background: #333;
display: flex;
flex-direction: column;
align-items: center;
}
.header__inner{
max-width: 1152px;
width: 90%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.header__logo{
flex: none;
width: auto;
height: 35px;
}
.header__navgroup{
margin-left: auto;
display: flex;
flex: none;
}
.header__navgroup > * + *{
margin-left: 60px;
}
.header__navitem{
font-size: 16px;
color: #fff;
}　※

※ 出典：eclairのブログ　HTMLとCSSでヘッダーのコーディング方法を解説！　https://eclair.blog/make-header-with-html-and-css/

ここでは、HTMLとCSSを使ってヘッダーを作る際に心がけたい5つのポイントを紹介します。各ポイントを押さえながらヘッダーを作ることで適切なヘッダーの実装に役立つので、ひととおりチェックしてみましょう。

適切なヘッダーを作るためには、そもそもヘッダーがどのような役割を持っているのか正しく理解することが大切です。まず、ヘッダーはページの最上部に位置することから、訪問者が一番初めに目にする部分です。そのためヘッダーを見た瞬間に、ユーザーがどのような印象を抱くかを客観的に分析してデザインすることが大切です。

ヘッダーの画像をインパクトの強いものにして強く印象付ける、親しみのあるデザインにして安心感を高めるなど、方法はさまざまですが、ユーザー目線での印象を大切にしながらデザインや配置を工夫しましょう。

ヘッダーは全ページに共通して表示される特徴を持っており、「Webサイトのタイトル＝トップページへのリンク」「グローバルナビゲーション＝主要ページへの案内リンク」を設定してユーザーのスムーズな動きをサポートします。しかし、ユーザーの使いやすさを重視するとこれだけで十分とは限りません。

ページをスクロールしてもヘッダーだけは表示され続ける「固定ヘッダー」、グローバルナビゲーションを選択すると下層ページのリンクまで表示される設計など、ユーザーニーズを踏まえた工夫を凝らすことでより使いやすいWebサイトに近付くでしょう。

Webサイトを運営する場合、ユーザーに多くのページを閲覧して欲しいと考えるのは自然な発想です。また、ユーザーの使いやすさに配慮するのも大切です。しかしながらそうした理由からヘッダーに含める項目を増やし過ぎると、かえってユーザーにとって「分かりにくい、使いにくい」と感じさせてしまうリスクが高まり逆効果を招きかねません。

ヘッダーはあくまでメインコンテンツではなく補助的な役割を担う傾向の強いパーツなので、項目はあえて絞り込んですっきり見せることも大切です。

Webサイトを開いた瞬間、画面にはさまざまな情報が表示されますが、ユーザーはそのすべてを一瞬で認識するわけではありません。人間の視線の動きを表す「Zの法則」によれば、視線の動きはアルファベットの「Z」を書く際の流れと同じく、左上、右上、左下、右下へと進みます。

また、情報が均等に配置されていない場合にはアルファベットの「F」の形に沿って視線が動く「Fの法則」と呼ばれるものもあります。これらの傾向を踏まえて、ヘッダーを作る際には最も重要なWebサイト名やロゴを一番左側に配置するなど、レイアウトを工夫しましょう。

今回はHTMLとCSSを用いたヘッダーの作り方を解説してきましたが、この方法はあくまでHTMLとCSSというWebページの構築に用いられる言語を理解していることが大前提です。もちろんHTMLとCSSを習得していなくても、ヘッダーの作成だけはできるかもしれません。

しかしながらWebページを構成する要素はヘッダー以外にも膨大に存在するため、専門的なノウハウが十分でない場合はWeb制作会社に依頼するのがおすすめです。無理に自分で作成すれば時間や労力というコストを膨大に費やしますし、不適切なデザイン、レイアウトに仕上がってしまうリスクも高くなります。

つづいては、ホームページ制作にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。 

ホームページ制作・Web制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

Webサイトにおけるヘッダーは訪問者が一番初めに目にする部分であるとともに、ユーザーの動きをサポートする重要な役割を担っています。HTMLとCSSを使うことでヘッダーは作成可能ですが、専門的なノウハウが求められるため自社対応が難しい場合はプロの手を借りることを検討しましょう。アイミツでは、ホームページ制作に強い会社の情報を多数取り揃えていますので、まずはお気軽にお問い合わせください。

【相談前にまずは会社一覧を見たいという方はこちら】
コーディングの費用・相場

【費用感を知りたいという方はこちら】    
コーディングのみ対応可能なホームページ制作会社一覧