ベストアンサー

(CSS)縦メニューを一枚画像で作るには・・

2012/05/08 11:23

縦型のメニューを一枚画像で作っているのですが同じようなサンプルがありませんでしたので四苦八苦しています・・。上部のピンクの画像の個所リンク無しで以下のメニューの高さは一定ではありません・・・。高さ２７pxと22pxの画像の組み合わせのメニューになります。このようなデザインのメニューでも一枚画像で出来るものでしょうか・・？何卒ご指導いただければ有難いです・・！

cocoaki
お礼率65% (17/26)

CSS
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/05/08 20:15 回答No.3

インデントが消えてわかりづらいので、書き直しておききます。＿をタブに戻してください。・HTMLには文書構造しか書かない　すると、HTMLもCSSもとってもわかりやすくなる。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="section"> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li>INNERWEAR ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="">abc-1230</a> ＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿<li><a href="2">abc-1230-1</a></li> ＿＿＿＿＿＿＿＿<li><a href="3">abc-1230-2</a></li> ＿＿＿＿＿＿＿＿<li><a href="4">abc-1230-3</a></li> ＿＿＿＿＿＿＿＿<li><a href="5">abc-1230-4</a></li> ＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="6">abc-4560</a></li> ＿＿＿＿＿＿<li><a href="7">abc-7890</a></li> ＿＿＿＿＿＿<li><a href="8">abc-0120</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li>INNERWEAR ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="10">efg-12</a> ＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿<li><a href="11">efg-12-1</a></li> ＿＿＿＿＿＿＿＿<li><a href="12">efg-12-2</a></li> ＿＿＿＿＿＿＿＿<li><a href="13">efg-12-3</a></li> ＿＿＿＿＿＿＿＿<li><a href="">efg-12-4</a></li> ＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="14">efg-34</a></li> ＿＿＿＿＿＿<li><a href="15">efg-56</a></li> ＿＿＿＿＿＿<li><a href="16">efg-78</a></li> ＿＿＿＿＿＿<li><a href="17">efg-90</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> </body> </html>

質問者

お礼 2012/05/23 09:29

おそくなりまして申し訳ございません・・・時間がかかりましたがなんとか出来ました！！！ ORUKA1951さんはほんとにすごいです・・尊敬です～・・！すごく綺麗なソース、私も自力で出来るようになりたいです・・！

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/05/08 20:10 回答No.2

ロールオーバーでもまったく同じです。添付図のような画像を用意しただけでよいです。確かに、長ったらしくて面倒ですが、仕組み自体はとっても単純な基本的な仕組みなので難しくは無いでしょう。　ウェブ標準--HTML4.01strict + CSS2.1 　子孫セレクタは使っていませんが、隣接セレクタは使われています。古いブラウザにも対応させるならclass名でもつけてclassセレクタを利用すること。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css">  </style> </head> <body> <h1>サンプル</h1> <div class="section"> <div class="nav"> <ol> <li>INNERWEAR <ol> <li><a href="">abc-1230</a> <ol> <li><a href="2">abc-1230-1</a></li> <li><a href="3">abc-1230-2</a></li> <li><a href="4">abc-1230-3</a></li> <li><a href="5">abc-1230-4</a></li> </ol> </li> <li><a href="6">abc-4560</a></li> <li><a href="7">abc-7890</a></li> <li><a href="8">abc-0120</a></li> </ol> </li> <li>INNERWEAR <ol> <li><a href="10">efg-12</a> <ol> <li><a href="11">efg-12-1</a></li> <li><a href="12">efg-12-2</a></li> <li><a href="13">efg-12-3</a></li> <li><a href="">efg-12-4</a></li> </ol> </li> <li><a href="14">efg-34</a></li> <li><a href="15">efg-56</a></li> <li><a href="16">efg-78</a></li> <li><a href="17">efg-90</a></li> </ol> </li> </ol> </div> </div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/05/08 11:57 回答No.1

意味がわからないのですが、一枚画像ということは、一種類の画像(たとえば高さ27px)をそれぞれのメニューの背景にするということでしょうか？ HTMLは、ナビゲーションリストのようですから、HTMLは <div class="nav"> 　<ol> 　　<li><a href="">a</a> 　　　<ol> 　　　　<li><a href=""></a> 　　　　　<ol> 　　　　　　<li><a href=""></a></li> 　　　　　　<li><a href=""></a></li> 　　　　　　<li><a href=""></a></li> 　　　　　　<li><a href=""></a></li> 　　　　　</ol> 　　　　</li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ol> 　　</li> 　　<li><a href="">a</a> 　　　<ol> 　　　　<li><a href=""></a> 　　　　　<ol> 　　　　　　<li><a href=""></a></li> 　　　　　　<li><a href=""></a></li> 　　　　　　<li><a href=""></a></li> 　　　　　　<li><a href=""></a></li> 　　　　　</ol> 　　　　</li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ol> 　　</li> 　</ol> </div> 　だとすると、それぞれをdisplay:block;にして、配置すれば良いだけだと思いますが・・・。通常は背景画像を縦の中心に置くことで、期待通りになると思いますが、高さに関わらず画像を縮小する必要があるのでしたら、:before擬似要素とcontentプロパティ、displayプロパティで画像をブロックとして表示させて、絶対配置で文字の下に置くと良いでしょう。(この場合、擬似要素やcontentプロパティを理解しないブラウザのために、上記の背景での指定も行っておくこと。

質問者

補足 2012/05/08 13:38

回答ありがとうございます！すみません・・また質問の仕方が悪かったですね・・。それぞれの画像では無く、横が３７０pxの一枚画像を背景に引いて表示は１８５px×ボタンの高さで設定しオーバー時に右側の画像を表示させるイメージです。一枚画像で全ボタンのロールオーバーを設定したかったのですが一つ一つのボタンで設定した方が良いでしょうか・・？