HTML/CSS

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

「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;
}

出力してみましょう。

画像と文字が表示されました。

追加したコードの説明をします。

まず、「width: 100%;」「height: 500px;」とし、画像を貼るためにヘッダーの大きさを設定しました。次に、header要素にbackground-imageプロパティを使って背景画像を設定しました。

文字に関してはh1タグを使って書きました。また、ここではmarginで文字の位置を調整しました。

以上が、基本的なヘッダーの作り方になります。

デザインについてもっと知りたい人は、実力のある会社のサイトのヘッダーをたくさん見てヘッダーのパーツ(写真、イラスト、ロゴ、ボタン、文字など)に注目してみてください。

最後に、ヘッダーを作るときの考え方に関して軽く説明します。

(補足)ヘッダーを作るときの考え方

ヘッダーはWebサイトを訪れた人が、一番最初に見る部分です。

なので、ヘッダーはWebページの中でも特に重要なパーツにであるといえます。

よって、ヘッダーを作るときは、ユーザーの心をつかんだり、Webサイトからユーザーが離脱するを防いだりするための工夫をする必要があります。

例えば、ヘッダーの画像を印象がいいものにしたり、あるいはインパクトのあるものにするという工夫が挙げられます。

文字でいえば、ヘッダーのタイトルのキャッチコピーを、サイトを訪れるユーザーがどんな人たちかを想定して考えるということも重要になってきます。

また、ヘッダーを見た時や見た後にどこに視線誘導させるかを考えながらデザインをするということも必要です。

ヘッダーは、ユーザーが一番初めに見る場所で、重要なパートだということを覚えておいてください。

まとめ

いかがでしたでしょうか。

ヘッダーの作り方が前よりもクリアになったことでしょう。

今回の知識をもとに、ぜひ実際に手を動かしてヘッダーを作ってみてください。

また、様々なサイトのヘッダーを見て設計を学ぶこともおすすめです。

今回の知識が役に立てば幸いです。