

そんな悩みにお答えします。
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タグの初期値はdisplay: inline。要はインラインレベルの要素です。
display: inlineである場合、内側のコンテンツ(テキスト)以上のサイズに大きくなることはありません。
よって「display: block;」として高さを稼がないとクリック領域は大きくできないのです。
ヘッダーの高さ分の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;」としています。
* {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;
}
まとめ:ヘッダーを作ろう!
今回は最もシンプルなヘッダーの基本形を作ってみました。
サイト制作ではヘッダーは必ずといっていいほど作ることになりますので、しっかりと自分のものにしましょう。
上達するには何度も作って自分なりに試行錯誤するのが一番の近道だと思います。
投稿者 トシ
コメントを残す