使いやすいホームページの制作

使いやすいホームページ制作方法するためにナビゲーションに一工夫

Bナビゲーション 　　　　　

このサイトを見られている方は、ホームページ制作やSEOに関連した情報を探してきた方と考えられます。ホームページを訪問者が探している情報に早くたどりつくために、その道標となるナビゲーションを制作しましょう。
　　　　　 ここには、当然リンクを設置することになると思います。そうです、アンカータグ<a>リンク先ページ</a>のタグでマークアップしてゆきます。

    　　
  1. 同じフレーム<a href="../index.html" target="_self">同じフレーム</a>
    2. 　　
  2. 新しいウィンドウ<a href="../index.html" target="_blank">新しいウィンドウ</a>
    3. 　　　　　　
　　　　　　

1ではリンクしたページが同じウィンドウで開くためにtarget="_self をターゲット属性に記述しました。
　　　　　　 2ではリンクしたページが新しいウィンドウで開くためにtarget="_blankをターゲット属性に記述しました。
その他にも、target="_topの属性を使用してフレームに分割されている場合、分割を解除して表示する方法やtarget="_parentの属性を使用してフレームで分割されている場合、1段解除して親フレームに表示する方法があります。

ユーザビリティーを考えてリンクを分かりやすく表示しましょう

このサイトの右側のナビゲーションのリンクの部分にマウスカーソルを乗せた時に背景が変化して、文字カラーが変化すると、思います。（注意・・・対応していないプラウザもあります）。こうすることで、ここをクリックすると他のページに移動するぞということが分かります。マウスを乗せたら、文字が大きくなったり、⇒が動くサイトなど、色々な方法がありますが、本サイトの方法を解説します。 まず、ＣＳＳでレイアウトのページで解説したように、<div id="navi">　Bナビゲーションエリア;</div>に作成してゆきます。SEOを意識してこのサイトでは、各コンテンツページを<ul><li>の項目タグを使用してグループ化する記述方法をとりました。準備するものは背景となる画像とマウスが乗った時に入れ替わる画像ファイルです。
アンカー用マウスが乗っていない時に使用する背景画像はサイズ　200px×33px sample.gifと名前を付けimgフォルダに保存します。
アンカー ホバー用マウスが乗っている時に使用する背景画像はサイズ　200px×33px sample-h.gifと名前を付けimgフォルダに保存します。

実際のCSSとHTMLの記述方法

CSSには
#navi{float: left;height: 800px;width: 200px;background-color: #FFFF66;}
#navi ul{text-align: center;margin: 0px;padding: 0px;}
#navi li{list-style-type: none;height: 33px;width: 200px;background: url('img/sample.gif') no-repeat center center;}
#navi li a{font-size: 12px;color: #3C3C3C;font-weight: bold;text-decoration: underline;}
#navi li a:hover{color: #FF3300;height: 33px;width: 200px;background: url('img/sample-h.gif') no-repeat center center;display: block;}

htmlには
<div id="navi">
<ul><li><a href="rei.htm">サイト</a></li>
<li><a href="rei.htm">サイト</a></li>
<li><a href="rei.htm">サイト</a></li>
</ul></div>
これで、当サイトのようなナビゲーションが完成します。padding、marginの調整は、バランスを考えて行ってください。

inserted by FC2 system