HTML/CSS
html
ヘッダー

【HTML/CSS】基本的なヘッダーの作り方(作る時の考え方も)

2021/08/16

( 更新日：2022/04/19 )

「HTML/CSSでヘッダーを作りたいけど、何をすればいいかわからない…。」そんなお悩みありませんか？

コーディングを勉強したてのときは、何をすればいいか迷うこともありますよね。

この記事では、基本的なヘッダーの作り方と、補足としてヘッダーを作るときの考え方を説明していきます。

それでは、さっそくみていきましょう。

【HTML/CSS】基本的なヘッダーの作り方

コードを順に書きながら、基本的なヘッダー(シンプルで簡単なもの)の作り方を説明していきます。

まずは、下のようにコードを書きます。

<header class="header">
  <nav class="navigation"></nav>
</header>

<header>(headerタグ)と<nav>(navタグ)を書きました。

ヘッダーをつくる所にheaderタグを、ナビゲーションバーをつくる所にnavタグを書きます。

そうすることで、コードを見返すときに見やすくなり、かつSEO(検索エンジン最適化)にも役立ちます。

まずは、ナビゲーションバーのコードを書いていきます。

コードを以下のように書きます。

<header class="header">
  <nav class="navigation">
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">ABOUT</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
</header>

.navigation {
  width: 100%;
  height: 60px;
  background-color: #383737;
}
.navigation a {
  color: #fff;
}

この状態で出力してみましょう。

ナビゲーションバーの上に、3つのリンクが乗っているかたちになります。

バーは「width(横幅)」を100%、「height(高さ)」を60pxにして、背景色をグレーっぽい色にしています。また、リンクの色は白にしています。

この状態から、リンクの右にあるliタグの黒丸と、リンクの下線を取り除き、さらにリンクを横並びにしていきます。

CSSを以下のように書き足します。

.navigation {
  width: 100%;
  height: 60px;
  background-color: #383737;
}
.navigation ul {
  display: flex;
  list-style: none;
}
.navigation li {
  margin-right: 55px;
}
.navigation a {
  color: #fff;
  text-decoration: none;
}

出力してみましょう。

見た目が先ほどよりも整ったのがわかります。

「list-style: none;」とすることでリストの黒丸を消し、「text-decoration: none;」と書くことでリンクの下線を消しました。また、liの親要素であるulの「display: flex;」にすることで、liタグの要素を横並びにしました。ちなみに、それぞれの項目には右側に55px余白を入れました。

ただ、今の状態では、リンクがバーの上の方にきてしまっているので、ナビゲーションバーの上側に余白を入れ必要があります。

そこで、下のようにコードを書き足します。

.navigation {
  width: 100%;
  height: 60px;
  background-color: #383737;
  padding-top: 15px;
  box-sizing: border-box;
}
.navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
}
.navigation li {
  margin-right: 55px;
}
.navigation a {
  color: #fff;
  text-decoration: none;
}

表示してみましょう。

バーの上側に余白が入り、項目がバーの真ん中あたりまで移動しました。ここでは「padding-top: 15px;」とすることで、上方向に15pxの余白を入れています。また、「boxsizing: border-box;」と指定することで、padding-topを設定しても、バーの高さが変わらないようにしています。ちなみにulでデフォルトでついている余白がジャマだったので「margin: 0;」と書いて余白を消しています。

これで簡単なナビゲーションバーの完成です。

次に、ヘッダー画像とタイトルを加えていきます。

以下のようにコードを書きます。

<header class="header">
  <nav class="navigation">
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">ABOUT</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
  <div class="title-wrapper">
    <h1>これはヘッダーです</h1>
  </div>
</header>

.header {
  width: 100%;
  height: 500px;
  background-image: url(header-img.jpg);
}
.navigation {
  width: 100%;
  height: 60px;
  background-color: #383737;
  padding-top: 15px;
  box-sizing: border-box;
}
.navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
}
.navigation li {
  margin-right: 55px;
}
.navigation a {
  color: #fff;
  text-decoration: none;
}
.title-wrapper h1 {
  margin-top: 130px;
  margin-left: 120px;
  font-size: 50px;
}

出力してみましょう。