htmlとcssでメニューバーを作る

今回は、webページのほとんどに実装されているヘッダーメニューを作ってみたいと思います。メニューバーは、同じWebサイト内の別ページに遷移させる機能です。

こんなやつです。

ユーザーが、知りたいことがどこにあるかを判別させるために重要な機能です。

作り方は、ヘッダーメニューとなるリストをhtmlで作成し、そこにCSSで好みのデザインを反映させるという流れになります。リストは通常自分のWebサイトへのURLが入ります。

htmlだけでヘッダーメニューの基本形をつくる
1. ひな形のhtmlを作成
2. htmlだけでメニューバーを作成する
CSSでデザインを適用する
まとめ

htmlだけでヘッダーメニューの基本形をつくる

ひな形のhtmlを作成

まずは、Webページの構造のみを記述した以下のようなhtmlファイルを用意します。本文内に一般的な構成のヘッダーと本文とフッターをそれぞれ<div class=””>タグで配置しています。

<!DOCTYPE html>
<html lang="ja">
<!--headタグ-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>メインメニュー</title>
</head>
<body>
  <!--ヘッダー用-->
  <div class="header">

  </div>
  <!--本文用-->
  <div calss="main">

  </div>
  <!--フッター用-->
  <div calss="footer">
    
  </div>

</body>
</html>

htmlだけでメニューバーを作成する

ひな形ファイルができたので、さっそくメニューバーを作成したいと思います。ヘッダー用要素に以下の内容を追記します。メニューバーはWebサイトの目次であり、その実体はリンクを張ったリストの集合体です。

   <nav>
      <ul>
        <li><a href="#">TOP</a></li>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>

<!DOCTYPE html>
<html lang="ja">
<!--headタグ-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>メインメニュー</title>
</head>
<body>
  <!--ヘッダー用-->
  <div class="header">
    <nav>
      <ul>
        <li><a href="#">TOP</a></li>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>

  </div>
  <!--メイン用-->
  <div calss="main">

  </div>
  <!--フッター用-->
  <div calss="footer">
    
  </div>

</body>
</html>

<nav>タグ

navタグ自体に何かの機能を持っているわけではなく、このタグをつけることによってこのタグ内に書いている内容がメニューバー(ナビゲーションメニュ)であることを表しています。

<ul>タグと<li>タグ

unordered list（順序がないリスト）の略で順序がないリストを作るときに使用するタグです。
リストの項目自体は<li>タグで記述します。

<a>タグ

[a]は,anchor(アンカー)の略です。<a href=”URI”>でURIで示したサイトへリンクされます。
例えば,<a href=”https://yahoo.co.jp”>だとyahooのホームページへジャンプします。

※今回はリンク先は指定せずに#にしています。

記述したHTMLを開くと以下のように表示されると思います。

一応これでメニューバーとしては機能しますが、いまいちデザインがしっくりきませんよね?!

修正したい点として、以下が真っ先にあがると思います

黒い点や下線は、いらない。
メニューバーに色を付けたい。
メニューバーを横並びにしたい。　など

これから先は,cssで設定する必要があります。

CSSでデザインを適用する

黒い点と下線を消す

まずは、現時点でメニューバーとして表示されているリストで黒い点や下線がいらないので消します。
ここからは、css側で設定するのでhtmlからcssファイルを読み込めるようにして別ファイルからcss情報を取得します。htmlファイルが存在するフォルダ内にcssフォルダを作成して、そのcssフォルダ内にstyle.cssのファイルを作成します。

あとは、htmlに以下の1行を追加すれば、style.cssファイルからcssの設定を取得することができます。

<link rel="stylesheet" href="css/style.css">

次にstyle.cssに以下を記述します。

ul {
	list-style: none;
}

li a {
	text-decoration: none;
}

ulタグに適用しているlist-style: none;で黒い点を削除しています。
li aタグに適用しているtext-decoration: none;で下線を削除しています。

これで余計な黒い点と下線が消えると思います。

文字や背景色のスタイルを変更する

今度は文字の背景色などを変更します。例として

リスト背景色を青色
真ん中揃い
テキスト文字色を白色
テキスト文字を太字

にしてみます。

ul {
	list-style: none;
}

li {
	text-decoration: none;
	text-align: center;
	background-color:blue;
}

li a {
	text-decoration: none;
	text-align: center;
	color:white;
	font-weight: bold;
}

background-color:blue;で背景色
text-align: center;で真ん中揃い
color:white;で文字色を変更
font-weight: bold;で文字色を太字

メニューバーを横並びにする

最後にメニューバーを横並びにします。横並びにする方法はいろいろありますが今回はcssのflexを使った横並びの方法でやってみます。

ul {
	list-style: none;
	display: flex;
}

li {
	text-decoration: none;
	text-align: center;
	background-color:blue;
	margin-right: 5px;
}

li a {
	text-decoration: none;
	text-align: center;
	color:white;
	font-weight: bold;
	padding: 20px;
}

横並びはdisplay: flex;
margin-right: 5px;領域外の余白を設定する。
padding: 20px;領域内の余白を設定する。

これで見栄えが良くなりました。

後の細かい設定はピンキリなのでいろいろ試してみることをお勧めします。

まとめ

メニューバーの基本形は<ul>タグと<li>タグで作られたリスト
list-style: noneで黒の点を消すことができる。
text-decoration: noneで下線を消すことができる。
横並びのメニューバーを作りたいときは,display: flexを使う。
margin(領域外余白)とpadding(領域内の余白)を使ってメニューバーを整える。

htmlとcssでヘッダーメニューを作る