【HTML/CSS】基本的なヘッダーの作り方【初心者でもわかるように徹底解説】

HTML

ヘッダーの作り方
ヘッダーの作り方がわからない

そんな悩みにお答えします。

 

HTML/CSSを学び初めて最初いきなりつまずくのがヘッダーです。

「ヘッダーがうまく作れない…」そう思っている方はきっと多いはず。

なぜなら僕もそうだったからです。

最初ヘッダーを作るだけで何時間も費やしました。

それでも思うようにはできていないなんてことは数多くありました。

 

今回はタイトルとメニューが横並びの定番のヘッダーを、初心者の方にもわかるようにやさしく解説します。

読み終える頃にはきっとヘッダーが作れるようになっているはずです。

制作するヘッダーのデザインを確認

今回のゴールはこちらです。

ヘッダーデザイン

 

よく見かけて且つ、最もシンプルなヘッダーです。

最もシンプルだからこそ汎用性も高いです。

まずはこれを目指しましょう。

 

補足

ヘッダーエリアとメインエリアをわかりやすくするために、ヘッダー背景に白(#fff)、メイン背景にグレー(#DDDDDD)を設定しています。

 

HTMLでヘッダーをコーディング

まず基本形を書く

まずはいつもの基本形を書きます。

<!DOCTYPE html>
<html lang="ja">
　　<head>
　　　　<meta charset="UTF-8" />
　　　　<title>ゴリゴリコード</title>
　　　　<meta name="viewport" content="width=device-width, initial-scale=1" />
　　　　<meta name="description" content="ゴリゴリとコーディングしてWeb制作" />
　　　　<link href="css/style.css" rel="stylesheet" />
　　</head>
　　<body>
　　　　<header></header>
　　　　<main></main>
　　　　<footer></footer>
　　</body>
</html>

 

ヘッダーにクラスをつけておき下のように配置します。

<header class="header">
ここにタイトルやナビメニューを書きます
</header>

それではヘッダータグの中にすべての記述をしていきます。

 

インナーを作る

インナーを設けたいのでそれ用の箱を作ります。

<header class="header">
  <div class="header-inner">
  ここにタイトルやナビメニューを書きます
  </div>
</header>

さらにインナー幅を1000pxとした「inner」という共通クラスを作っておきます。

.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}

padding: 0 40px;はこれがないとインナーの外側とぴったりくっついてしまうので余白を入れています。

 

このinnerクラスをheader-innerクラスにもつけておきます。

<header class="header">
  <div class="header-inner inner">
  ここにタイトルやナビメニューを書きます
  </div>
</header>

 

h1タグを使ってサイト名を表示する

ヘッダーの左側に配置するサイト名をh1タグで囲みます。

タイトルを押すとTOPページへ遷移するようにaタグを入れ込みます。

<header class="header">
  <div class="header-inner inner">
    <h1 class="header-title"><a href="#">GORIGORICODE</a></h1>
  </div>
</header>

 

ナビゲーションメニューを設置する

ナビゲーションメニューを入れる箱を用意します。

<header class="header">
  <div class="header-inner inner">
    <h1 class="header-title"><a href="#">GORIGORICODE</a></h1>
    <nav class="header-nav">
    ここにナビの項目を追加します
   </nav>
  </div>
</header>

 

ナビゲーションメニューの項目を追加する

リストタグ「ul」「li」を使ってナビゲーションメニューの項目を追加します。

liタグの中の文字はaタグで囲って、それぞれのページに遷移できるようにします。

<header class="header">
  <div class="header-inner inner">
    <h1 class="header-title"><a href="#">GORIGORICODE</a></h1>
    <nav class="header-nav">
      <ul class="header-nav-list">
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">About</a></li>
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">Service</a></li>
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">News</a></li>
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">Blog</a></li>
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

 

ブラウザで確認する

ここまで書けたらブラウザで確認しましょう。

下のように表示されていれば正しくコーディングされています。

ヘッダーの作り方

注意　以下のスタイルはすでに効かせています
  • ul {list-style: none;}
  • a {text-decoration: none;}
  • * {box-sizing: border-box;}

 

CSSで見た目を調整

ヘッダーを固定する

.header {
background: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
}

「position: fixed;」で画面の上部にヘッダーを固定します。

「top」「left」「right」のすべてを「0」で指定します。

 

タイトルとナビゲーションメニューを横並びにする

.header-inner {
display: flex;
align-items: center;
}

flexboxを使用してheaderの子要素「h1」と「nav」を横並びに配置します。

「align-items: center;」で子要素を縦方向の中心に配置します。

ヘッダーの作り方

 

タイトルの文字を調整する

.header-title a{
color: #333;
font-size: 24px;
font-weight: bold;
}

 

ナビゲーションメニューを右に配置する

.header-nav {
margin-left: auto;
}

「margin-left: auto;」でナビゲーションメニューを右に寄せます。

または

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}

でも同じ形になります。

 

リストタグ「li」を横並びにする

.header-nav-list {
display: flex;
}

以下のようになります。

ヘッダーの作り方

 

「li」タグにmarginをつける

.header-nav-item:not(:first-child){
margin-left: 40px;
}

先頭のliにはmarginはいらないので:not(:first-child)とします。

 

aタグの見た目を調整する

.header-nav-item-link {
display: block;
color: #333;
height: 80px;
line-height: 80px;
}

「display: block;」として高さや余白の指定ができるようにします。

「height: 80px;」と「line-height: 80px;」で縦中央揃えにします。

 

💡ポイント！　クリック領域を考慮する

なぜaタグに対してheightとline-heightを指定してるのかというと、クリック領域を考慮しているからです。

ヘッダー全体の高さを指定→中央寄せでも見た目上は同じになりますが、その場合のaタグのクリック領域は狭くなります。

 

aタグの性質

aタグの初期値はdisplay: inline。要はインラインレベルの要素です。

display: inlineである場合、内側のコンテンツ（テキスト）以上のサイズに大きくなることはありません。

よって「display: block;」として高さを稼がないとクリック領域は大きくできないのです。

 

aタグのクリック領域

 

ヘッダーの高さ分のpaddingを入れる

main {
padding-top: 80px;
}

ヘッダーを固定しているのでこのままだとヘッダーの高さ分隠れてしまう部分ができます。

よってmainに対してpadding-topをヘッダーの高さ分指定します。

そうすることですべてが表示されます。

 

インナー幅とbox-sizing

HTMLのところで

.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}

となっていましたが今回リセットCSSとして「box-sizing: border-box;」としています。

リセットCSS

* {box-sizing: border-box;}

 

そうするとひとつ問題点があります。

それはインナー幅がpadding分も含んでしまうということです。

今回でいうとインナーは「max-width: 1000px;」です。

ですが実際は920pxまでしかありません。

これはpaddingの80px(40px×2)が差し引かれているからです。

ヘッダーの作り方

 

これを解消するために「.inner」は「box-sizing: content-box;」とします。

.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
box-sizing: content-box;
}
ヘッダーの作り方

 

完成コード

最後に完成したコードを載せておきます。

<header class="header">
  <div class="header-inner inner">
    <h1 class="header-title"><a href="#">GORIGORICODE</a></h1>
    <nav class="header-nav">
      <ul class="header-nav-list">
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">About</a></li>
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">Service</a></li>
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">News</a></li>
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">Blog</a></li>
        <li class="header-nav-item"><a class="header-nav-item-link" href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
box-sizing: content-box;
}
.header {
background: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.header-inner {
display: flex;
align-items: center;
}
.header-title a{
color: #333;
font-size: 24px;
font-weight: bold;
}
.header-nav {
margin-left: auto;
}
.header-nav-list {
display: flex;
}
.header-nav-item:not(:first-child){
margin-left: 40px;
}
.header-nav-item-link {
display: block;
color: #333;
height: 80px;
line-height: 80px;
}

 

まとめ：ヘッダーを作ろう！

ヘッダーを作ろう

今回は最もシンプルなヘッダーの基本形を作ってみました。

サイト制作ではヘッダーは必ずといっていいほど作ることになりますので、しっかりと自分のものにしましょう。

上達するには何度も作って自分なりに試行錯誤するのが一番の近道だと思います。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

投稿者 トシ

ホーム > HTML > 【HTML/CSS】基本的なヘッダーの作り方【初心者でもわかるように徹底解説】