ウォーターサーバーとコーヒーマシンが一体化した画期的マシン >>

懸案事項の一つは本日の質問で解決しましたので、もう一つも質問してみたいと思います。
<やりたい事>
HPのナビゲーション:スタイルシートで<UL><LI>を使ってメニュー項目を定義し、対応するリンクを張りたい。
<現状>
<MAP><AREA>を使っています。
<メニュー>
TOP|AAAA|BBBB|CCCC|という画像。
※頭が悪いので「スタイルシートの勉強が先決」という手の回答ではなく、具体的な書き方のヒントをお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

ナビゲーションは画像で指定する予定ですか。


それとも画像とテキスト、あるいはテキストのみで指定する予定ですか。

例えば背景に画像を使用して、その上にナビゲーションの文字だけを置くとすると、
----------------------------------
CSSの記述
----------------------------------
#navi {
background: url(images/navibar.jpg) no-repeat;
width: 600px; height: 30px;
}
#navi ul {
list-style: url(images/circle.gif) disc inside;
}
#navi li {
float: left; /* リストを左に並べる */
margin: 3px 1em; /* 上下・左右の外側の余白 */
}
----------------------------------
リストのマーカーを表示しない場合は「list-style: none」などとしてください。

----------------------------------
HTMLの記述
----------------------------------
<div id="navi">
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</div>
----------------------------------
テキストではなく画像ならば<img src="images/aaa.gif" alt="AAA" width="画像の幅" height="画像の高さ">となります。
が、もし、AAAの下に背景画像を指定して上に文字をのせるだけでしたら、
CSSに「#navi li」の指定に「background: url(images/navibar.jpg) no-repeat;
width: 画像の幅; height: 画像の高さ;」などを加えてください。
また、文字サイズを「font-size: 14px;」などのように指定してやらないと、ブラウザで文字の大きさなどを変更した場合には、背景画像からはみ出してしまったりします。
参考URLはとほほのWWW入門のCSSの背景指定についての説明です。
先の質問がどれか判らなかったため、確認していませんので、的をはずした回答でしたらすみません。

参考URL:http://www.tohoho-web.com/css/reference.htm#back …
    • good
    • 0
この回答へのお礼

多分、これで解決するでしょう。感謝です。

お礼日時:2005/12/19 09:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング