htmlとcssを使ったメニューバー

質問

ＨＰのメニューバーをhtmlとcssを使用して作成したいのですが、どういう風に調べてよいのかもわからないので、アドバイスだけでもいいので教えてもらえると助かります。

例えば下のようなメニューを作成するとします。
（「□トップ」という一つ一つの画像だと思ってください）

□トップ
□日記
□写真
□リンク

これをフレームページの左側に表示させます。

トップページを右側に表示させている時、メニューのトップというところの画像がいれかわり、

■トップ
□日記
□写真
□リンク

上のように表示させ、日記ページを右側に表示させている時も同様に

□トップ
■日記
□写真
□リンク

と、現在見ているページのメニュー画像のみを入れ変えるという設定にしたいです。

できるのなら、cssとｈｔｍｌの記述例を教えてくださると大変助かります。
よろしくお願いします。

回答No.2

DrFell · ベストアンサー

まず、フレームで楽をしようという考え方は捨ててください。
ｈｔｍｌ+ｃｓｓでは、ｈｔｍｌで文章の構造（見出しとかリンクとか段落とか箇条書きなど）をｃｓｓではそれらの見た目（デザイン的要素、大きさ、色、背景、太さ、空き、罫線など）をそれぞれが担当します。html+cssではページが変わったらなんて判断はしません。毎ページにメニューも入れなければなりません。毎ページに同じ場所に同じデザインで左メニューあるなら、フレームのように見えるかもしれません。

ップページを右側に表示させている時、メニューのトップというところの画像がいれかわり、

■トップ　　　トップ用の文章はこちらにいれます。入れ替えなくて、もともと
□日記　　　左のように作ってください。そしてメニューと本文合わせて1ペ
□写真　　　－ジを作成し、例えば、index.htmlとします。
□リンク

上のように表示させ、日記ページを右側に表示させている時も同様に

□トップ　　　ページの数だけお手間でしょうがセットを変えて、左の様
■日記　　　に作ってください。日記の内容とメニュー合わせて1ページ　　　
□写真　　　作ります。トップの場所のリンクはindex.htmlとします。
□リンク

では、どのようにメニューを左に、本文を右にするのか？見た目をどうするのかですから、ｃｓｓの出番です。メニューグループと中身のグループに大きくわけます（つまり、2段）。メニューはulが、コンテンツはdiｖが適しています。いろいろ手法がありますので、「2カラム css」とか「段組 css」などで検索してみてください。表でもないものには、デザインの為に表は使いません。もしフレームのようにスクロールしても同じ場所にとどまるメニューをご希望でしたら、段組のことを理解してから、「疑似フレーム　ｃｓｓ」を検索してみてください。

現在のブラウザに対応していない場合がありますので、いろいろなブラウザで確認してから使うものを選ばれることをお勧めします。

お礼

見た目が気に入ったのでフレームにしたかったのですが、考えが甘かったようですね。デザインを考え直そうと思います。
検索方法も教えてくださって、助かりました。

回答ありがとうございました！

回答No.1

Randomize

最も簡単に解決するのであれば、外部cssなしで実装可能です。
HTMLにこのように記述してください。

<table style="メニューを格納する表に適用したいスタイル">
<tr>
<td style="backgroundImage:url(○○○○);" onmouseover="this.style.backgroundImage='url(△△△△)'" onmouseout="this.style.backgroundImage='url(○○○○)'">
<a href="リンク先" target="表示させたい場所">
<div style="width:100%;">
メニューに表示させたい文字 (思い浮かばない場合は本当は良くないけど全角スペース)
</div>
</a>
</td>
</tr>
・・・メニューの数だけ繰り返す・・・
</table>

きれいに実装したい場合は必要部分を外部cssにまとめて書き出すとHTMLも美しくなるので、その場合はくくり出しを検討をしてみてください。
原理は、画像のイメージを入れ替えるのではなく、目的の部分の領域の背景画像をcssを応用してすりかえることで実現しています。

実はこの技法、画像は背景なので、画像に文字入れを行わなくても、文字入れした画像に見せることも可能なのが利点です。
さらに、外部cssに書き出してしまってスタイルをクラス名で切り替えると、同時に文字の色や太さなどを変更することも可能になります。
参考までにクラス名で切り替える場合はtdタグを下のように書きます。
<td class="○○○○" onmouseover="this.className='△△△△'" onmouseout="this.className='○○○○'">

あと、一見必要そうに見えない幅を100％に設定しているdivタグですが、これは必要です。外すと分かるのですが、無いと範囲の中に記述した文字の上しかリンクが張られなくなるので、divタグで領域全体にリンクを設定する為のものです。

お礼

ロールオーバーのようになって可愛かったのですが、うまく設定できませんでした。
せっかく教えて頂いたのにも関わらず、活用できずにすみません。もう少しちゃんと勉強してから再チャレンジしてみます。

回答ありがとうございました！