さて、今回はホームページに欠かせなヘッダーメニューの作成を行なってみましょう。この記事の末尾にサンプルコードもつけています。コピー＆ペーストでも設定できますので、ぜひトライしてみてください。
ヘッダーメニューとは？
これは大抵どのホームページにも設定されている、同じWebサイト内にある他のページへのリンクが張られたメニューバーのことです。
ヘッダーメニューはなぜ必要なのか？
HTMLは本来、項目ごとにページを分けて作成することが想定されています。 それで、1ページの中に書きたい情報すべてを挙げるのではなく、それぞれを大きな項目に分け、それぞれ別々のページとするほうが望ましいのです。これはユーザーにとって見やすく理解しやすいようにとの配慮からです。
そのようなわけで、必然的に通常一つのWebサイトは、複数のページから構成されることになります。
それで、通常トップページはこれらのWebサイトへの入り口となり、そのトップページからユーザーは希望する情報が載せられている別のページへと誘導されることになるわけです。
その際に、別のページへの移動を簡単にするとともに、自分の今いるページが全体のWebサイトの中のどこなのかを一目で理解してもらうためのメニューが通常ページの上部に設けられます。
ではさっそく、メニューバーをホームページ上に配置してみましょう。
以下の手順の通りに進めると以下の画像のようなヘッダーメニューが作成できます。
ヘッダーメニュー作成方法
※ このようなメニューバーの作成方法はいくつもありますが、今回はリストスタイルを活用して作成してみます。
手順１：ヘッダーメニューを表示するエリアを作成する
今回は、HTML５に用意されている<header>タグを活用しましょう。もちろん<div>を用いて適当なクラス名を付けても同じ結果になります。
HTML
<header>
</header>
CSS
header{
z-index: 10;
height: 64px;
position: absolute;
top: 300px;
background-color: #333;
width: 100%;
text-align: center;
z-index: 2;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}ここに記されている数値や色を変えると、いろいろと自由に調整できますので、活用してみてください。
なお、「box-shadow: 」（影）を付けていますが、これによって、メニューバーが背景から少し浮き上がったあように表示され視認性が高まります。
手順２：メニューバーの中にリストを作成する
上記で作成した<header>のエリアの中に、リストを作成しメニューの項目を作ってみましょう。
そうすると以下のようになります。
HTML
<header>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</header>※ お気づきのようにリストスタイルは<ul>と<li>という二つのタグによって構成されます。
CSSでこのリストのスタイリングを行ないましょう。
CSS
ul {
overflow:hidden;
list-style:none;
margin: 0 auto;
z-index: 20;
}
ul li {
display: inline-block;
padding: 26px 10px 20px 10px;
}※ この<li>のスタイルで「display: inline-block;」を指定することによって、通常縦にリストの項目が並ぶものを、横並びにすることができます。
手順３．リストの中にリンクを配置する
リンクを張る方法は <a href=”リンク先のURL”>リンクの文字列</a> です。
HTML
<header> <ul><li><a href="#">Home</a></li> <li><a href="#">料金のご案内</a></li> <li><a href="#">車両のご案内</a></li> <li><a href="#">ご利用事例</a></li> <li><a href="#">よくある質問</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">会社概要</a></li> </ul> </header>
CSSでリンクのスタイリングを行ないましょう。
CSS
a {
color: #fff;
text-transform: uppercase;
}※ ちなみに text-transform: uppercase; とは、すべての文字を大文字にするという指定です。 そのためHTML側で「Home」と記していても、ブラウザでは「HOME」とすべて大文字で表示されます。
手順４．リンクにさらにスタイリングを行なう
これは必須ではありませんが、上記のままでは「今自分がWebページ全体の中のどのページを見ているのか」わかりづらいですので、閲覧しているページにアンダーラインを引いてみたいと思います。
加えて、他のメニューにマウスが乗った時に表示を変化させてみましょう。
HTML
以下のようにリンク（a）にクラス名を指定していきます。
<header>
<ul>
<li><a href="#" class="btn2">Home</a></li>
<li><a href="#" class="btn4">料金のご案内</a></li>
<li><a href="#" class="btn4">車両のご案内</a></li>
<li><a href="#" class="btn4">ご利用事例</a></li>
<li><a href="#" class="btn4">よくある質問</a></li>
<li><a href="#" class="btn4">お問い合わせ</a></li>
<li><a href="#" class="btn4">会社概要</a></li>
</ul>
</header>
CSS
.btn4{
text-transform: uppercase;
text-align: center;
position: relative;
text-decoration: none;
display:inline-block;
}
.btn4::before {
content: '';
position: absolute;
bottom: -2px;
left: 0px;
width: 100%;
height: 2px;
background: #3367ff;
display: block;
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}
.btn4:hover::before {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1)
}
.btn2{
text-transform: uppercase;
text-align: center;
position: relative;
text-decoration: none;
display:inline-block;
border-bottom: 2px solid #3367ff;
}
手順５．動作確認
「HOME」のメニューだけ青のラインが引かれ、他のメニューにマウスのカーソルが乗った時に、ラインが出てくるように表示されていれば問題なく設定できています。
色や、文字の大きさ等々自由に調整してみてください。
補足：サンプルコード
では念のために上記の表示を実現するためのすべてのコードを記しておきます。わかりずらい場合はまずコピー＆ペーストして、いろいろいじってみましょう。
HTML
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="このページでは初心者でもホームページを作成できるようになるためのお役に立つ情報を提供しています。自分だけのおしゃれなホームページを作ってみませんか。">
<title>はじめてのホームページ | トップページ</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="shortcut icon" href="画像のURL.png">
<link rel="stylesheet" href="css/style.css">
<meta name="format-detection" content="email=no,telephone=no,address=no">
</head>
<body>
<div class="top-image-area">
<header>
<ul>
<li><a href="#" class="btn2">Home</a></li>
<li><a href="#" class="btn4">料金のご案内</a></li>
<li><a href="#" class="btn4">車両のご案内</a></li>
<li><a href="#" class="btn4">ご利用事例</a></li>
<li><a href="#" class="btn4">よくある質問</a></li>
<li><a href="#" class="btn4">お問い合わせ</a></li>
<li><a href="#" class="btn4">会社概要</a></li>
</ul>
</header>
</div>
<div class="main">
<div class="main-contents">
<h1>トップページ</h1>
<div class="slanting">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,0 50,50 100,0"/>
</svg>
</div>
<div class="spaser"></div>
<div class="slanting">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0,0 Q50,50 100,0"></path>
</svg>
</div>
<div class="spaser"></div>
<div class="slanting">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,0 100,100 0,100"/>
</svg>
</div>
<div class="spaser"></div>
<div class="slanting">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,100 100,0 100,100"/>
</svg>
</div>
<div class="spaser"></div>
<div class="contents">
<h2></h2>
</div>
</div>
<div class="right-navi">
右側のカラム
</div>
</div>
<div class="left-navi">
左側のカラム
</div>
<div class="footer">
ここにはフッターメニューが入ります
</div>
</body>
</html>
CSS
body{
background-color: lightyellow;
}
h1,h2 {
margin: 0;
padding: 1em 0;
text-align: center;
color: #ddd;
}
header{
z-index: 10;
height: 64px;
position: absolute;
top: 300px;
background-color: #333;
width: 100%;
text-align: center;
z-index: 2;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
a {
color: #fff;
text-transform: uppercase;
}
ul {
overflow:hidden;
list-style:none;
margin: 0 auto;
z-index: 20;
}
ul li {
display: inline-block;
padding: 26px 10px 20px 10px;
}
ul li:hover {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1)
}
.spaser{
height: 100px;
}
.top-image-area{
width: 100%;
height: 300px;
background-image: url("../img/topimage.jpg");
background-position: 50% 20%;
background-size: cover;
}
.logo-container{
width: 70px;
height: 70px;
margin-left: 10px;
}
.logo-container img{
height: 100%;
width: 100%;
}
.slanting {
position: relative;
height: 200px;
background: #ddd;
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
fill: #5f5f5f;
}
.contents {
}
.footer{
height: 200px;
background: black;
color: #fff;
clear: both;
}
.main-contents, .left-navi, .right-navi {
height: 100%;
}
.main-contents {
float: left;
width: 80%;
}
.left-navi {
background-color: blue;
color: #fff;
width: 20%;
float: right;
height: 400px;
margin-top: 64px;
}
.right-navi {
background-color: blueviolet;
color: #fff;
float: right;
width: 20%;
height: 400px;
}
.main{
width: 80%;
float: right;
margin-top: 64px;
}
@media screen and (max-width: 600px){
.main, .left-navi,.main-contents, .right-navi{
width: 100%;
}
}
.btn4{
text-transform: uppercase;
text-align: center;
position: relative;
text-decoration: none;
display:inline-block;
}
.btn4::before {
content: '';
position: absolute;
bottom: -2px;
left: 0px;
width: 100%;
height: 2px;
background: #3367ff;
display: block;
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}
.btn4:hover::before {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1)
}
.btn2{
text-transform: uppercase;
text-align: center;
position: relative;
text-decoration: none;
display:inline-block;
border-bottom: 2px solid #3367ff;
}
まとめ
以上のようにヘッダーメニューはリストスタイルを用いることによって簡単に実現できます。
そして、スタイリングを行なう際には「display: inline-block;」を用いることによって、簡単に横並びにすることができます。
ホームページの多くでヘッダーメニューが採用されています。WordPressなどのCMSを使うと特に意識することなく簡単にメニューを作成できますが、今回は、HTMLとCSSで作成する方法をご紹介しました。参考にしていただけますと幸いです。