HTMLとCSSでヘッダーを作る！基本のデザインを解説

こんにちは。

いつかサルを飼いたくていろいろ調べたら、めちゃくちゃ噛まれると知って完全にビビってしまったぷのこです。

さて、今回はHTMLとCSSで作るヘッダーについて。

Webサイトでよく見るシンプルなヘッダーを作りながら、手順を解説していきます。

ぜひ参考にしてみてくださいね。

HTMLで作るヘッダーの役割

ヘッダーとは、Webページの上の方にある、サイトタイトルやナビゲーションメニューがある部分のことです。

ヘッダーの作り方の前に、まずはヘッダーの役割について説明していきます。

サイトを印象付ける

ヘッダーは、ユーザーがサイトを開いた時にまず目に入る部分なので、最初の印象として大きな影響があります。

実際にサイトを開いた時に「あれ、なんか違うなあ」と思ってページを離れてしまったことはありませんか？

ページを離脱されないように、最初に目に入るヘッダーでユーザーの目を引きつける必要があります。

今いるサイトがすぐわかる安心感

固定ヘッダーは、サイトのどのページを開いても常に表示される部分です。

常に表示されることで、ユーザーが今どのサイトにいるのかがわかり、安心感を与えることができます。

見たいページにすぐ飛べる利便性

サイト内のリンクをナビゲーションメニューに載せることで、サイトのどこにいても見たいページをすぐに開くことができます。

メニューを見ればサイトの構成がわかるという利点もあります。

HTMLとCSSで基本のヘッダーを作ろう

ヘッダーの役割について、なんとなくおわかりいただけたのではないかと思います。

ここからは実際に、HTMLとCSSでヘッダーを作っていきましょう。

完成サンプルはこちらです。

わかりやすいように、ヘッダー部分は緑色の背景にしています。

HTML

それでは早速、HTMLのコードから見ていきましょう。

headerタグを書く

まずはヘッダーを表すheaderタグを書きましょう。ヘッダーの中身は全てheaderタグ内に書きます。

<header>
    ヘッダーの中身
</header>

ヘッダーの中身

</header>

h1タグでサイトタイトルを書く

サイトタイトルをh1タグで囲みます。h1の中にaタグでトップページへのリンクを入れましょう。

<header>
    <h1><a href="index.html">SAMPLE</a></h1>
</header>

<h1><a href="index.html">SAMPLE</a></h1>

</header>

ナビゲーションメニューを作る

まずはナビゲーションを表すnavタグを書きます。

<header>
    <h1><a href="index.html">SAMPLE</a></h1>
    <nav id="top-nav">
        ナビゲーションメニューの中身
    </nav>
</header>

<h1><a href="index.html">SAMPLE</a></h1>

ナビゲーションメニューの中身

</nav>

</header>

navの中にメニューの中身を書いていきます。

リストを表すulタグの中に、liタグでメニューの項目を入れていきます。メニューをクリックしたらそのページに飛べるように、liの中にaタグでサイト内のリンクを入れます。

<header>
    <h1><a href="index.html">SAMPLE</a></h1>
    <nav>
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="index.html#about">ABOUT</a></li>
            <li><a href="index.html#menu">MENU</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </nav>
</header>

<h1><a href="index.html">SAMPLE</a></h1>

<nav>

<ul>

<li><a href="index.html#about">ABOUT</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</nav>

</header>

これでHTMLは完成です。

表示

HTMLが完成したのでブラウザで表示してみましょう。

このような表示結果になるはずです。

CSS

次に、CSSで見た目を整えていきましょう。

リセット用のCSSを書く

まず、要素の余計な余白を取り除いたりするためにリセット用のCSSを書きます。

共通で設定したい文字色や背景色なども書いておきます。

body {
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  font-family: 'Noto Sans JP', sans-serif;
  background: #f6f5f4;
}

body {

margin: 0;

padding: 0;

color: #1a1a1a;

font-family: 'Noto Sans JP', sans-serif;

background: #f6f5f4;

}

headerのスタイル

それではheaderタグにスタイルを当てていきましょう。

widthを100%にして左右にpaddingをつけて余白を持たせます。

header {
  width: 100%;
  height: 100px;
  background: #b3d874;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

header {

width: 100%;

height: 100px;

background: #b3d874;

padding-left: 30px;

padding-right: 30px;

box-sizing: border-box;

}

ここでサイトタイトルとナビゲーションメニューを横並びにするために、Flexboxというものを使います。

Flexboxは、中にある要素を横並びにしたり高さを揃えたりできるものです。

display: flexを指定するとその要素はFlexboxになり、子要素の並び方を設定することができます。

Flexboxで使うプロパティ

align-items・・・垂直方向の位置を決める

justify-content・・・水平方向の位置を決める

align-items: centerで上下中央に揃え、justify-content: space-betweenで両端に配置しています。

headerに当てるCSSは以下の通りです。

header {
  width: 100%;
  height: 100px;
  background: #b3d874;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
  display: flex; /* flexboxを作る */
  align-items: center; /* 上下中央に揃える */
  justify-content: space-between; /* 両端に配置 */
  position: fixed;
  top: 0;
}

header {

width: 100%;

height: 100px;

background: #b3d874;

padding-left: 30px;

padding-right: 30px;

box-sizing: border-box;

display: flex; /* flexboxを作る */

align-items: center; /* 上下中央に揃える */

justify-content: space-between; /* 両端に配置 */

position: fixed;

top: 0;

}

この段階での表示はこんな感じです。

サイトタイトルのスタイル

サイトタイトルにはリンクをつけているので、デフォルトでつく文字色や下線の設定を変更します。

h1 a {
  color: #1a1a1a;
  font-size: 30px;
  text-decoration: none;
}

h1 a {

color: #1a1a1a;

font-size: 30px;

text-decoration: none;

}

サイトタイトルの見た目が変わりましたね。

ナビゲーションメニューのスタイル

最後にナビゲーションメニューです。

まずはulにlist-style: noneでリストの黒点を消しましょう。

そしてメニューの項目を横並びにしたいので、display: flexを指定します。

ul {
  list-style: none;
  display: flex;
}

ul {

list-style: none;

display: flex;

}

メニューは横並びになりましたが、このままだと余白がなくてギチギチです。

クリックできる範囲を広くするためにaタグに余白をつけて、文字色などのスタイルを当てていきましょう。

ul li a {
  padding: 10px 15px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: bold;
}

ul li a {

padding: 10px 15px;

color: #1a1a1a;

text-decoration: none;

font-weight: bold;

}

最後に、メニューにホバーした時に下線が出るように設定します。

ul li a:hover {
  text-decoration: underline;
}

ul li a:hover {

text-decoration: underline;

}

完成形

完成形は、このようになります。

HTMLの全コード

<header>
    <h1><a href="index.html">SAMPLE</a></h1>
    <nav>
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="index.html#about">ABOUT</a></li>
            <li><a href="index.html#menu">MENU</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </nav>
</header>

<h1><a href="index.html">SAMPLE</a></h1>

<nav>

<ul>

<li><a href="index.html#about">ABOUT</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</nav>

</header>

CSSの全コード

body {
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  font-family: 'Noto Sans JP', sans-serif;
  background: #f6f5f4;
}
header {
  width: 100%;
  height: 100px;
  background: #b3d874;
  display: flex; /* flexboxを作る */
  align-items: center; /* 上下中央に揃える */
  justify-content: space-between; /* 両端に配置 */
  padding-left: 30px;
  padding-right: 30px;
  position: fixed;
  top: 0;
  box-sizing: border-box;
}
h1 a {
  color: #1a1a1a;
  font-size: 30px;
  text-decoration: none;
}
ul {
  list-style: none;
  display: flex;
}
ul li a {
  padding: 10px 15px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: bold;
}
ul li a:hover {
  text-decoration: underline;
}

body {

margin: 0;

padding: 0;

color: #1a1a1a;

font-family: 'Noto Sans JP', sans-serif;

background: #f6f5f4;

}

header {

width: 100%;

height: 100px;

background: #b3d874;

display: flex; /* flexboxを作る */

align-items: center; /* 上下中央に揃える */

justify-content: space-between; /* 両端に配置 */

padding-left: 30px;

padding-right: 30px;

position: fixed;

top: 0;

box-sizing: border-box;

}

h1 a {

color: #1a1a1a;

font-size: 30px;

text-decoration: none;

}

ul {

list-style: none;

display: flex;

}

ul li a {

padding: 10px 15px;

color: #1a1a1a;

text-decoration: none;

font-weight: bold;

}

ul li a:hover {

text-decoration: underline;

}

まとめ

いかがでしたか？

今回は、HTMLとCSSで作る基本のヘッダーについて解説しました。

ヘッダーを作る際には、ぜひ参考にしてみてくださいね。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。