HTMLとCSSで作るウェブサイト作成入門
ウェブページの実装(３)ナビゲーション領域の実現
動画解説を見る
複数ページにわたるウェブサイトの利便性に決定的な影響を与えるナビゲーション領域、いわゆるメニューの作り方について検討しましょう。メニューについてもさまざまな作り方がありますが、よくあるのはメインビジュアルの上や下に、メニューが横並びになり、オンマウスで色が変化するような形です。ここでも、そのようなタイプのメニューの作成方法を確認します。
メニューは、通常、HTML側でリストで作成し、CSSで形式を整えて実現します。以下のサンプルを確認してください。
[HTMLサンプル] ※前資料の続き、基本タグ等は省略
<div id="menu">
<ul>
<li><a href="トップページHTMLファイル名">トップページ</a></li>
<li><a href="企業概要HTMLファイル名">企業概要</a></li>
<li><a href="製品紹介HTMLファイル名">製品紹介</a></li>
<li><a href="採用情報HTMLファイル名">採用情報</a></li>
</ul>
</div>
[CSSサンプル] ※前資料の続き、他のCSSは省略
#menu li {
list-style: none; /*箇条書きの先頭のマークを除去*/
float: left;
/*箇条書きの項目を左寄せ、右回り込み(横並びに)*/
}
[サンプルのブラウザ表示結果] ※全資料までのHTML・CSSも含めた結果
このサンプルでは、ID="menu"が設定された範囲内の箇条書きタグ<li>を、CSSで、箇条書きのマークを取って、横並びにしています。箇条書きのスタイルはこちら、横並び(浮動化)の設定はこちらを参照してください。メニューとしては、これでも一応の機能を果たします。とはいえ、これではあまりにも格好悪いので、それらしく装飾したいと思います。
[CSSサンプル] ※他のCSSは省略
#menu li {
list-style: none; /*箇条書きの先頭のマークを除去*/
float: left;
/*箇条書きの項目を左寄せ、右回り込み(横並びに)*/
}
#menu a {
display: table-cell;
/*インライン要素のaタグをテーブルセルと同様に扱う*/
width: 195px;
/*幅を195ピクセルに*/
height: 40px;
/*高さを40ピクセルに*/
text-align: center; /*文字を左右の中央に*/
vertical-align: middle; /*文字を上下の中段に*/
text-decoration: none; /*aタグ(リンク)の下線を除去*/
background-color: maroon; /*背景色を栗色に*/
color: white;
/*文字色を白色に*/
}
#menu a:hover { /*マウスオーバー時の設定*/
background-color: yellow; /*背景色を黄色に*/
color: navy;
/*文字色を紺色に*/
}
[サンプルのブラウザ表示結果] ※全資料までのHTML・CSSも含めた結果
それらしいメニューになりました。追加されたCSSは、ID="menu"領域のリンクタグ<a>と、その疑似クラスの:hoverについてスタイルを適用しています。:hoverとは「マウスオーバーでクリックしていない状態」を意味します。
設定内容のそれぞれについてはコメントの通りですが、まず、<a>タグを、displayプロパティで、インライン要素からテーブル(表)のセルと同じ要素として定義しなおしています。なぜこんなことをやっているかというと、リンクを張る対象を文字ではなく、「リンクの文字を含む四角形の領域」にしたいからです。インライン要素のままの場合、クリックする対象や、マウスオーバーする対象は、「文字だけ」になってしまいます。上記の結果イメージでは、マウスカーソルが「採用情報」という文字から離れたところにありますが、カーソルの形がクリックできることを示す「指先カーソル」に変化しており、文字から離れたこの位置でクリックしてもリンクが機能することを示しています。インライン要素(文字要素)であるはずの<a>タグを、テーブルのセルと同じような「面」を持った存在に変換しているのです。display: table-cellについては、こちらをご覧下さい。
また、display: table-cellによって、他の設定もできるようになります。テーブルのセルなので、widthとheightで幅と高さを設定できますし、text-alignとvertical-alignで上下左右の真ん中に内容を配置するという設定もできるようになります。なお、横幅のwidthは、ページの全体領域の横幅780ピクセルをメニューの項目数4で割った値です(全体領域の設定などは前資料を確認してください)。そのほかの設定内容は、コメントを確認してください。
一方、<a>タグの疑似クラス:hoverについては、背景色と文字色を、<a>タグとは異なるものにしています。こうすることで、マウスオーバーした際に色を変えることができます。
|