メディア掲載_Web Designing

Web Designing 2012年11月号

執筆:黄 思嘉 執筆:黄 思嘉

CSSLab.2012年11月号

CSSでグローバルナビゲーションを作る

グローバルナビゲーションを実現するにはさまざまな方法がある。 今回はユーザビリティや更新のしやすさ、印刷表示などを考慮し、CSSで作ることのメリットとデメリットを理解した上で作ってみよう。

いろいろなシーンに対応したグローバルナビを作る

コンテンツ数が多くなってきた時によく用いられるのがグローバルナビゲーションだ。ユーザーを迷うことなくスムーズに目的のコンテンツへ導くために、Webサイトの各ページに共通して設置されていることが多い。サイトにグローバルナビを設置することでコンテンツを整理できるだけでなく、サイトの全体像とユーザーの現在位置を把握するのにも役立つ。
実装するにあたってJavaScriptなどで制御する場合も多いが、CSSのみでも実装できる。CSSで実装した場合、以下のような3つのメリットがある。

まず、HTMLソースコードがシンプルになるので、運用・管理がしやすくなること、次にCSSのスタイル設定でデザイン部分を切り離し、見た目を一元管理できること。3つめは、ブラウザ側でJavaScriptがオフの場合でも、問題なく動作することだ。
CSSならではのメリットを活かしつつ、コンテンツが増えても管理しやすいグローバルナビ用のサンプルとして、メニューボタンの部分のみ(01、02)を実装する。一階層下のローカルナビゲーション部分との連携については今回は省略する。

01ラフ段階のコンテンツ

01 ラフ段階のコンテンツ。

コンテンツ数が増えるとメニュー項目が増えて複雑になる。
メニュー部分をコンパクトにするため、赤い枠線内「会社概要」「事業概要」「お問い合わせ」をグローバルナビゲーションとして設置する

02表示イメージ

02 表示イメージ

ブラウザ上での表示イメージ。赤く囲んだ部分がグローバルナビゲーション

「CODING FACTORY」

「CODING FACTORY」

「CODING FACTORY」のサイトもCSSをベースとしたグロバールナビゲーションを使用している

IDEA1 li要素で作る基本的なグローバルナビゲーション

IDEA1 float時にmarginが2倍になる問題

基本的なグローバルナビゲーションメニューの実装方法として、li要素を使う方法がある。まずはシンプルなグローバルナビを作ってみよう。

テキスト要素のみでグローバルナビを作る

まず、 ul、liタグとa要素を用いてHTMLを記述し(01)、次にCSSの設定を行う。ulタグ「id="gNavi01"」を設定して、 #gNavi01内のliタグすべてを「インライン要素で表示し、リストマークは非表示」になるよう指定しよう。ロールオーバー色を設定すれば、完了だ(02)。ブラウザ上では、03 のように表示される。HTMLを記述する際には、全体を把握しやすいように、liタグを改行したり、インデントをつけたりするのが一般的だが、 ブラウザによっては、HTML内の改行によってソースコードの間に広いスペースができて見にくい場合もある。その問題については各行間をコメントアウトしておくことで解決できる。

01HTMLソース

01 HTMLソース

HTMLソース自体はシンプル。ブラウザによって行間が空いてしまうのが気になるのであれば、このようにコメントアウトを使うのも有効な手段だ

03表示サンプル

03 表示サンプル

テキスト要素のみで実装したグロバールナビ

02CSSソース

02 CSSソース

li要素の文字色は通常時は黒(A)、マウスオーバー時は赤に設定(B

li要素をブロック要素として表示

グローバルナビのli要素をブロック要素としてメニューボタンの背景に表示させる場合、floatプロパティを用いた方法は設定がやや複雑になる。HTMLは前とほぼ同じ(04)。次に、CSS(05)では、overflowプロパティでhidden(非表示)設定するのは、li要素のfloatの回り込みを解除するためだ。li要素のリストスタイルを非表示にし、各メニュ-ボタンを左寄せにする。a要素に「display: block;」を追加すれば完成だ(06)。CSSを利用することで、デザインの変更があってもCSSを修正するだけですむので、メンテナンス性は高くなるだろう。複雑なデザインの場合、imgタグで画像を配置する方法もあるが、デザインの変更などにおけるメンテナンス性は低下してしまう。また、その方法で実装した場合、マウスオーバーでの挙動にJavaScript等を利用するため、さらにメンテナンス性が下がる。

04HTMLソース

04 HTMLソース

HTMLソースは、コメントアウトを除いただけで01とほぼ同じ

05CSSソース

05 CSSソース

ul要素に対してoverflowプロパティではhidden(非表示)に設定する(A)。Bでリストスタイルを非表示にして各メニューボタンを左寄せにしている(C)。li、a要素をブロック要素にすることで背景画像(bg_off.gif、bg_on.gif)を表示させる

06表示サンプル

06 表示サンプル

li要素のブロック要素として背景画像を表示させたグロバールナビ

IDEA2 CSSスプライトを使って表示の効率化をはかる

IDEA2 CSSスプライトを使って表示の効率化をはかる

ここからはCSSスプライトを使って、画像の座標値を切り替えることでグローバルナビを表示する方法を解説したい。

CSSスプライトのための素材作り

CSSスプライトとは、複数の画像を1つにまとめ、CSSでそれぞれの表示位置を指定する方法だ。今回はメニューボタンにこのCSSスプライトを導入し、マウスオーバー時に座標値を変化させることで画像が切り替わるようにしてみよう。CSSスプライトのメリットは読み込む画像が一つですむため、サーバへのリクエスト数が減り、ページ表示速度の高速化が見込めることだ。
最初にメニュー全体の通常時の画像とマウスオーバー時の画像を一つにまとめてCSSスプライト用の画像を制作しよう(01

01表示サンプル

01 表示サンプル

通常時とマウスオーバー時のメニューボタンを一つにまとめた画像「gnavi.gif」

CSSスプライトの実装手順

今回のHTMLソースでは、Ulタグ内の各li要素にidを振り、テキストをリンクで囲む(02)。CSSでは、まずメニュー全体のサイズを指定する。次にli要素は各メニューボタンのサイズを設定し、「float:left;」によって横並びにする。「display: block;」も忘れずに設定を行おう。マウス操作によってメニューボタン画像が変化するように、表示させたい部分の座標をbackground-positionプロパティで指定している(03)。これによって座標値が変わり、表示されるメニューボタン画像も変わる。

グローバルナビを正しく表示するには、「text-indent:-9999px;」または「display:none;」を使って、画像部分に重なるテキストを非表示化する必要がある。「text-indent:-9999px;」は、テキストを画面の外に飛ばし、「display: none;」は、特定の要素を非表示にする。そのため、「display: none;」を使うと音声ブラウザでは内容が読みあげられないため、「textindent: -9999px;」と比べると、アクセシビリティが悪くなるので注意が必要だ。

02HTMLソース

02 HTMLソース

各メニューの項目に対してid(gNavi01~03)をつける(A

03CSSソース

03 CSSソース

メニューボタン用画像(A)を表示。表示される画像の座標の値を通常時(B)とマウスオーバー時(C)で切り替える

各メニューボタン画像と座標位置

各メニューボタン画像と座標位置

 
ホーム
(#gNav01)
会社概要
(#gNav02)
事業紹介
(#gNav03)
通常時
(X軸、Y軸)
0px、0px
-100px、0px
-100px、30px
マウスオーバー時
(X軸、Y軸)
0px、-30px
-200px、0px
-200px、-30px

各メニューボタン画像と座標位置一覧(通常時とマウスオーバー時)

IDEA3 ネガティブマージンとCSSスプライトを用いたカレント設定

IDEA3 ネガティブマージンとCSSスプライトを用いたカレント設定

次に、imgタグを使ってCSSスプライトを実現する方法を紹介しよう。また、ユーザーがどこのページを閲覧しているのかを明確にするメニューボタンのカレント方法の設定も解説する。

ネガティブマージンを使って実装

引き続きIDEA2で使ったメニューボタン用画像「gnavi.gif」を使ってHTMLをコーディングする。今回は各li要素に対する記述が異なる。各メニューボタン画像はIDで振り分け、「gnavi.gif」をimgタグで囲んでいる(01)。

続いてCSSは、まずメニューボタン1つ分(li要素)のサイズと「overflow: hidden;」を設定する。次に、a要素に「display: block;」を設定する。各メニューの画像の表示はネガティブマージンを設定することで位置をずらしていく(02)。ネガティブマージンを使うことによって、印刷時に背景を印刷しない設定にしていたとしても印刷されるようになる。ただし、画像名もしくはパスが変更された場合、すべてのHTMLに手を加えなければならず、管理しにくくなる場合もあるので注意が必要だ。

01HTMLソース

01 HTMLソース

メニューボタン画像を各メニューごとにリンクしていく(A)。カレント設定を行う場合はBを加える

02CSSソース

02 CSSソース

マウスオーバー時の座標値をネガティブマージン(マイナス値)で設定する(BC)。

カレント機能を加える

body要素にIDやクラスを名付けて、それを利用したスタイルを振り分けておくと、効率よくメニューボタンのカレント設定を制御することが可能になる。まずbody要素にid属性やclass属性を付けておく(01)。次にナビゲーションのリスト項目にもIDを振っておこう。
最後にハイライト表示のCSSソースのbody要素のクラスとナビゲーションのリンクのIDを対応させる。background-positionでの背景画像のカレント設定は03を、ネガティブマージンを使用したカレント設定は04を参考にしてもらいたい。

自分が閲覧しているコンテンツの場所を明示してくれるカレント機能

自分が閲覧しているコンテンツの場所を明示してくれるカレント機能

03CSSソース

03 CSSソース

カレント機能を実装(02-B部分と差し替え)

04CSSソース

04 CSSソース

カレント機能をネガティブマージンを使って実装(02-B部分と差し替え)

お問い合わせはこちらからどうぞ