ヘッダーってどうやって作るの？
どんな内容にすればいい？
そんな疑問を解決します！
この記事ではヘッダーの役割から作り方、オシャレなデザイン見本まで紹介します。
ヘッダー作りをマスターしましょう！
ヘッダーの役割
ヘッダーとはホームページの一番上のメニューのことです。
ホームページを見るときに最初に目に入る部分ですので、とても重要です。
見る人が分かりやすいような内容にしましょう。
よくある内容は
・ホームページのタイトルやロゴ
・各ページへのリンク
・お問合せ
・サイト内検索
などです。
ヘッダーは見たい情報へすぐにたどり着けるように、目次のような役割を果たしています。
ヘッダーの基本構造
ヘッダーの構造は一番左にホームページのタイトルやロゴ、右端にお問合せなどのボタン、その間に各ページへのリンクがあることが一般的です。
各ページへのリンクはグローバルメニューと呼ばれます。
ロゴを強調したい場合は、ロゴが中央にあったり、グローバルメニューがアイコンでまとめられていると、グッと視認性が良くなります。
ヘッダーの基本的な構造を知っておくとともに、実際に作る時にはユーザーの視認性や強調したい部分を意識したデザインにすることが大切です。
ヘッダーを作ってみよう！
では、実際にヘッダーを作ってみましょう。
今回作るのは、こちらのシンプルなヘッダーです。
グローバルメニューにカーソルを合わせると色が変わったり、ボタンが押されているように見えるデザインもCSSで作ることができます。
1から丁寧に解説しますので一緒に作ってみましょう。
STEP1.表示したい項目をHTMLで作成する
↓
STEP2.CSSで装飾する
上記の2STEPに分けて解説します。
STEP1.表示したい項目をHTMLで作成する
まずは表示したい内容をHTMLで作成します。
ヘッダーに入れる内容は
・サイトタイトル：ハルブログ
・グローバルメニュー：トップページ、ハルブログについて、サービス、お知らせ
・ボタン：問い合わせ
の3項目です。
headerタグの中に書いていきましょう。
▼HTML
<body>
<header>
<h1>ハルブログ</h1>
<ul>
<li><a href="">トップページ</a></li>
<li><a href="">ハルブログについて</a></li>
<li><a href="">サービス</a></li>
<li><a href="">お知らせ</a></li>
</ul>
<div class="btn">
<a href="">問い合わせ</a>
</div>
</header>
</body>書けたらブラウザで見てみましょう。
下の図のようにHTMLで書いた内容が縦に表示されていればOKです。
STEP2.CSSで装飾する
次にCSSで装飾していきましょう。
装飾は
1.ヘッダー自体の装飾
2.サイトタイトル（h1）の装飾
3.グローバルメニューの装飾
4.ボタンの装飾
の4つにわけて解説します。
1.ヘッダー自体の装飾
headerのCSSは以下の通りです。
▼CSS
header{
width: 100%; /*幅を画面いっぱいに*/
height: 80px; /*高さを指定*/
background-color: #bfe3c6; /*背景色を指定*/
display: flex; /*要素を横並びに*/
font-family: sans-serif; /*フォントをゴシック体系に*/
font-weight: bold; /*文字を太字に*/
align-items: center; /*要素を上下中央に*/
}ヘッダーのCSSを書くと以下の図のようになります。
要素を横並びにしたのに、グローバルメニューが横並びになっていませんよね。
これはヘッダーの子要素を横並びにしているからです。
グローバルメニューのリストはulタグの子要素であり、headerから見ると孫要素になるので横並びにならないんですね。
2.サイトタイトル（h1）の装飾
次はタイトルを装飾しましょう。
今回はh1タグでタイトルを書きましたが、実際はロゴの画像などが入ることもありますよ。
では、h1の装飾を見てみましょう。
▼CSS
h1{
margin-left: 50px;
color: #50443c;
}margin-leftで左に少し余白を作り、colorで文字色を指定しました。
文字色は指定しない場合、黒で表示されますが、デザインで黒は使わない方がいいので、少し茶色系の色にしています。
黒は視認性が高く、目が疲れやすいため、どうしても目立たせたい理由がある場合を除いて使いません。
3.グローバルメニューの装飾
次はグローバルメニューの装飾です。
先ほど説明しましたが、メニューが横並びになっていないので、display: flex;を指定してから装飾しましょう。
▼CSS
ul{
display: flex; /*要素を横並びに*/
margin-right: 30px; /*メニュー自体の右に余白*/
margin-left: auto; /*左の余白をautoにすることでメニューを右寄せに*/
}
ul li{
list-style: none; /*リストの「・」を消す*/
margin-right: 20px; /*リスト一つ一つの右に余白*/
}
ul li a{
text-decoration: none; /*リンクの下線を消す*/
color: #50443c; /*文字色を指定*/
}
ul li a:hover{
color: #ab5115; /*カーソルを合わせた時の文字色を指定*/
}少し長くなってしまいましたが、書けたでしょうか。
ここまでできたら以下の図のように完成に近くなってきましたね。
4.ボタンの装飾
最後にボタンの装飾です。
ボタンは押せる風のデザインにしてみましょう。
▼CSS
.btn{
width: 120px; /*ボタンの幅*/
height: 50px; /*ボタンの高さ*/
background-color: #a99689; /*ボタンの色*/
box-shadow: 0 3px #50443c; /*ボタンの影*/
border-radius: 10px; /*ボタンの角の丸み*/
margin-right: 50px; /*ボタンの右の余白*/
text-align: center; /*ボタンの中身を左右中央に*/
padding-top: 15px; /*ボタンの内側上部の余白*/
}
.btn:hover{
box-shadow: none; /*カーソルを合わせた時ボタンの影を消す*/
margin-top: 5px; /*カーソルを合わせた時ボタンを下にずらす*/
}
.btn a{
text-decoration: none; /*リンクの下線を消す*/
color: #fff; /*文字色*/
}box-shadowの指定方法は一つ目の値が左右、二つ目の値が上下となっています。
今回はそのあとに影の色も指定しています。
上記の場合だと一つ目が0なので、左右には影はなし、二つ目の値が3pxなので下向きに影を付けています。
ブラウザで表示すると、以下の図のようになっているはずです。
これでヘッダーの完成です。
コード全文を載せておきます。
▼HTML
<body>
<header>
<h1>ハルブログ</h1>
<ul>
<li><a href="">トップページ</a></li>
<li><a href="">ハルブログについて</a></li>
<li><a href="">サービス</a></li>
<li><a href="">お知らせ</a></li>
</ul>
<div class="btn">
<a href="">問い合わせ</a>
</div>
</header>
</body>▼CSS
header{
width: 100%;
height: 80px;
background-color: #bfe3c6;
display: flex;
font-family: sans-serif;
font-weight: bold;
align-items: center;
}
h1{
margin-left: 50px;
color: #50443c;
}
ul{
display: flex;
margin-right: 30px;
margin-left: auto;
}
ul li{
list-style: none;
margin-right: 20px;
}
ul li a{
text-decoration: none;
color: #50443c;
}
ul li a:hover{
color: #ab5115;
}
.btn{
width: 120px;
height: 50px;
background-color: #a99689;
box-shadow: 0 3px #50443c;
border-radius: 10px;
margin-right: 50px;
text-align: center;
padding-top: 15px;
}
.btn:hover{
box-shadow: none;
margin-top: 5px;
}
.btn a{
text-decoration: none;
color: #fff;
}ヘッダーを固定する方法
スクロールしてもページ上部に固定されたままのヘッダー、よく見ますよね。
これ、簡単にできます。
例えば先ほど作ったヘッダーのCSSに以下のように追加してください。
▼CSS
header{
position: fixed; /*←この行を追加*/
width: 100%;
height: 80px;
background-color: #bfe3c6;
display: flex;
font-family: sans-serif;
font-weight: bold;
align-items: center;
}「position: fixed;」を指定するだけでヘッダーを固定できます。
しかし、注意点もあります。
例えば、ヘッダーの下にメインの画像や文字がある場合、ヘッダーの下にかぶって表示されます。
ですので、必ず次の要素にはヘッダーと同じ高さの余白を設定しておきましょう。
ヘッダーのレスポンシブ対応
先ほど作ったヘッダーはパソコン画面で見る前提で作りましたが、タブレットやスマホから見るとどうでしょうか。
デベロッパーツール（F12）でスマホ画面にしてみてみると、グローバルメニューが文字の途中で改行されていたりしませんか。
パソコン画面だけでなく、タブレットやスマホから見てもデザインが崩れないようにすることをレスポンシブ対応と言います。
ヘッダーのレスポンシブ対応は主にハンバーガーメニューで行われます。
パソコン画面ではすべて表示していたグローバルメニューや問い合わせボタンなどを三本線のメニューの中に入れてしまいます。
ハンバーガーメニューの作り方は下記の記事で紹介していますので、ぜひ挑戦してみてください。
ヘッダーのデザイン見本
この章では、ヘッダーのさまざまなデザインを紹介します。
浮き上がったヘッダー
浮き上がったヘッダーは影をつけることで作れます。
ヘッダーのCSSに「box-shadow」を追加してみましょう。
上記で作ったヘッダーに濃い緑の影をつけます。
▼CSS
header{
width: 100%;
height: 80px;
background-color: #bfe3c6;
display: flex;
font-family: sans-serif;
font-weight: bold;
align-items: center;
box-shadow: 0 2px 3px #5d8666; /*←この行を追加*/
}透明感のあるヘッダー
透明感のあるヘッダーは透明度をつけることで作れます。
CSSに「opacity」を追加しましょう。
透過がわかりやすいように画像も設定しておきます。
HTMLに「img」で好きな画像を追加してからCSSの設定をしてみましょう。
▼CSS
header{
position: fixed; /*ヘッダーの位置を固定*/
width: 90%; /*幅を90％に*/
height: 80px;
background-color: #fff; /*背景色を白に*/
display: flex;
font-family: sans-serif;
font-weight: bold;
align-items: center;
margin-top: 30px; /*ヘッダーの上に余白*/
margin-left: 5%; /*ヘッダーの左に余白*/
opacity: 0.7; /*0が透明、1が不透明*/
}ヘッダーの幅を90％にして、左に5％の余白を設定しているので、右の余白も5％あり、ヘッダーの位置がちょうど真ん中になります。
アイコンを使ったヘッダー
アイコンを使うと、わかりやすくておしゃれなデザインになりますよね。
今回は「home.png、about.png、service.png、info.png」の4つのアイコンイラストを用意しました。
上の2つよりは少し難しいデザインになります。
▼HTML
<body>
<header>
<h1>ハルブログ</h1>
<ul>
<li><a href=""><img src="images/home.png" alt=""><br>トップページ</a></li>
<li><a href=""><img src="images/about.png" alt=""><br>ハルブログについて</a></li>
<li><a href=""><img src="images/service.png" alt=""><br>サービス</a></li>
<li><a href=""><img src="images/info.png" alt=""><br>お知らせ</a></li>
</ul>
<div class="btn">
<a href="">問い合わせ</a>
</div>
</header>
</body>▼CSS
ul li{
list-style: none;
width: 120px; /*リスト一つ一つの幅を指定*/
text-align: center; /*リストの中身を中央寄せ*/
}
ul li a{
text-decoration: none;
color: #50443c;
font-size: 12px; /*メニューの文字を小さく*/
}
ul li a img{
width: 30px; /*アイコンの幅を指定*/
height: auto; /*高さは幅に合わせる*/
}HTMLでは画像と文字の間にbrタグを入れて改行しています。
「ul li」のCSSにあったmargin-rightは削除しています。
HTMLは上記で全文ですが、CSSはわかりにくいと思うので、全文載せておきます。
▼CSS全文
header{
width: 100%;
height: 80px;
background-color: #bfe3c6;
display: flex;
font-family: sans-serif;
font-weight: bold;
align-items: center;
}
h1{
margin-left: 50px;
color: #50443c;
}
ul{
display: flex;
margin-right: 30px;
margin-left: auto;
}
ul li{
list-style: none;
width: 120px;
text-align: center;
}
ul li a{
text-decoration: none;
color: #50443c;
font-size: 12px;
}
ul li a:hover{
color: #ab5115;
}
ul li a img{
width: 30px;
height: auto;
}
.btn{
width: 120px;
height: 50px;
background-color: #a99689;
box-shadow: 0 3px #50443c;
border-radius: 10px;
margin-right: 50px;
text-align: center;
padding-top: 15px;
}
.btn:hover{
box-shadow: none;
margin-top: 5px;
}
.btn a{
text-decoration: none;
color: #fff;
}まとめ
ヘッダーを自作する方法はわかったでしょうか。
一番最初に目に入るところですので、デザイン性が求められる部分でもありますよね。
影や透明度、余白などの要素を追加することでオシャレに見えることもあります。
色々なデザインを試して「これだ！」と思えるヘッダーを作っていただけたらと思います。
この記事が勉強中のみなさまのヒントになれば幸いです。
コメント