はじめてのホームページ作成 ホームページ作成

HTML+CSSでヘッダーメニューを作成してみよう! - 新米web担のためのホームページの作り方 | 第23回

さて、今回はホームページに欠かせなヘッダーメニューの作成を行なってみましょう。この記事の末尾にサンプルコードもつけています。コピー&ペーストでも設定できますので、ぜひトライしてみてください。

 

 

ヘッダーメニューとは?

これは大抵どのホームページにも設定されている、同じWebサイト内にある他のページへのリンクが張られたメニューバーのことです。

 

 

ヘッダーメニューはなぜ必要なのか?

HTMLは本来、項目ごとにページを分けて作成することが想定されています。 それで、1ページの中に書きたい情報すべてを挙げるのではなく、それぞれを大きな項目に分け、それぞれ別々のページとするほうが望ましいのです。これはユーザーにとって見やすく理解しやすいようにとの配慮からです。

そのようなわけで、必然的に通常一つのWebサイトは、複数のページから構成されることになります。

それで、通常トップページはこれらのWebサイトへの入り口となり、そのトップページからユーザーは希望する情報が載せられている別のページへと誘導されることになるわけです。

その際に、別のページへの移動を簡単にするとともに、自分の今いるページが全体のWebサイトの中のどこなのかを一目で理解してもらうためのメニューが通常ページの上部に設けられます。

 

ではさっそく、メニューバーをホームページ上に配置してみましょう。

以下の手順の通りに進めると以下の画像のようなヘッダーメニューが作成できます。

 

 

ヘッダーメニュー作成方法

※ このようなメニューバーの作成方法はいくつもありますが、今回はリストスタイルを活用して作成してみます。

 

 

手順1:ヘッダーメニューを表示するエリアを作成する

今回は、HTML5に用意されている<header>タグを活用しましょう。もちろん<div>を用いて適当なクラス名を付けても同じ結果になります。

HTML

 

CSS

ここに記されている数値や色を変えると、いろいろと自由に調整できますので、活用してみてください。

なお、「box-shadow: 」(影)を付けていますが、これによって、メニューバーが背景から少し浮き上がったあように表示され視認性が高まります。

 

 

手順2:メニューバーの中にリストを作成する

上記で作成した<header>のエリアの中に、リストを作成しメニューの項目を作ってみましょう。

そうすると以下のようになります。

HTML

※ お気づきのようにリストスタイルは<ul>と<li>という二つのタグによって構成されます。

CSSでこのリストのスタイリングを行ないましょう。

 

CSS

※ この<li>のスタイルで「display: inline-block;」を指定することによって、通常縦にリストの項目が並ぶものを、横並びにすることができます。

 

 

手順3.リストの中にリンクを配置する

リンクを張る方法は <a href="リンク先のURL">リンクの文字列</a> です。

HTML

CSSでリンクのスタイリングを行ないましょう。

 

CSS

※ ちなみに text-transform: uppercase; とは、すべての文字を大文字にするという指定です。 そのためHTML側で「Home」と記していても、ブラウザでは「HOME」とすべて大文字で表示されます。

 

 

手順4.リンクにさらにスタイリングを行なう

これは必須ではありませんが、上記のままでは「今自分がWebページ全体の中のどのページを見ているのか」わかりづらいですので、閲覧しているページにアンダーラインを引いてみたいと思います。

加えて、他のメニューにマウスが乗った時に表示を変化させてみましょう。

HTML

以下のようにリンク(a)にクラス名を指定していきます。

 

CSS

 

 

手順5.動作確認

「HOME」のメニューだけ青のラインが引かれ、他のメニューにマウスのカーソルが乗った時に、ラインが出てくるように表示されていれば問題なく設定できています。

色や、文字の大きさ等々自由に調整してみてください。

 

 

補足:サンプルコード

では念のために上記の表示を実現するためのすべてのコードを記しておきます。わかりずらい場合はまずコピー&ペーストして、いろいろいじってみましょう。

 

HTML

 

CSS

 

 

まとめ

以上のようにヘッダーメニューはリストスタイルを用いることによって簡単に実現できます。

そして、スタイリングを行なう際には「display: inline-block;」を用いることによって、簡単に横並びにすることができます。

ホームページの多くでヘッダーメニューが採用されています。WordPressなどのCMSを使うと特に意識することなく簡単にメニューを作成できますが、今回は、HTMLとCSSで作成する方法をご紹介しました。参考にしていただけますと幸いです。

-はじめてのホームページ作成, ホームページ作成

Copyright© コアースのブログ , 2022 All Rights Reserved.