ベストアンサー

(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×ボタンの高さで設定しオーバー時に右側の画像を表示させるイメージです。一枚画像で全ボタンのロールオーバーを設定したかったのですが一つ一つのボタンで設定した方が良いでしょうか・・？

関連するQ&A

CSSで縦メニューを作りたい
CSSを使って画像1のような縦メニューを作ろうとしていますが上手くいかず、検索をしてもお手本になるような作り方を探し当てることができずに困っています。要素としては、枠はsolidの1px、リンクは枠内のどこでもクリックでき、枠内の色は交互に変えるといった感じです。お分かりの方いましたら教えていただけると嬉しいです。よろしくお願いします。
- ベストアンサー
- HTML
CSSでプルダウンメニュー
お世話になります。添付画像のようなプルダウンメニューを作りたいです。 http://css-eblog.com/csstechnique/css-8.html こちらを参考にさせていただき、ソースを変更しました。一応動作はするのですが、不具合があり悩んでいます。問題はマウスオーバーさせたい画像の高さ（60px）とプルダウンで出てくるもの（画像は使用せずCSSで背景色をしたバー状になっています）の高さ（20px）が異なることです。添付画像のように、画像A全体がマウスオーバー領域となり、20pxのバーが出るようにしたいのですが、現在はBのようにバーが60pxとなっています。 ※IE6のみ。他ブラウザではバーの高さ自体は20pxであるものの、リンク先1の領域が60pxとなっているため、リンク先2の文字が書かれている20px付近をクリックしてもリンク先1に行ってしまいます。そこでソースの値を .menu ul li a { display: block; height: 20px;←ココ padding:3px; } と変更したら、バーは20pxで出るようになり、リンク先2もうまく選べるものの、今度は60pxの画像の上20px部分のみしかマウスオーバーに反応しなくなってしまいました。知識がなくどうしていいのかサッパリ分かりません。どうか助けて下さい！下記ソースです。 /* CSS*/ .menu { margin:0px auto; padding:0px; width:760px; height:60px; } .menu ul li { float: left; position: relative; margin-right: 0px; width: 128px; height: 20px; list-style:none; } .menu ul li table { border-collapse: collapse; border: none; font-size: 10px; padding: 0; position: absolute; top: 0; left: 0; } .menu ul li ul { visibility: hidden; overflow: hidden; position: absolute; top:60px; left: 0px; width: 128px; height:20px; z-index: 100; } .menu ul li ul li { margin-bottom: 0; width: 128px; height: 20px; } .menu ul li a { display: block; height: 60px; padding:3px; } .menu ul li a:hover { position: relative; z-index: 100; } .menu ul li:hover ul , .menu ul li a:hover ul { visibility: visible; overflow: visible; height: auto; z-index: 10; } .menu li.test {background:url(../image/test.jpg) left top no-repeat; width:128px; height:60px;} .menu li.sub { background-color:#666666; color:#FFFFFF; text-align:left; width:122px; height:20px; padding:3px;} a.sub:link{font-size:10px; color:#FFFFFF; text-decoration:none;}/*サブメニューリンク*/ a.sub:visited{font-size:10px; color:#FFFFFF; text-decoration:none;} a.sub:hover{ font-size:10px; color:#FFFFFF; text-decoration:underline;} a.sub:active{ font-size:10px; color:#FFFFFF; text-decoration:underline;}  <div class="menu"> <ul> <li class="test"><a href="test.html"></a>  <ul> <li class="sub"><a href="test.html" class="sub">リンク先1</a></li> <li class="sub"><a href="test2.html" class="sub">リンク先2</a></li> </ul>  </li> </ul> </div> 長文申し訳ありません。よろしくお願い致します。
- ベストアンサー
- CSS
ナビゲーションバーの背景画像が表示されません（CSS）
私は今ホームページを作っておりまして、先日ウェブデザインについての本を買ったのですがそこに書かれていたスタイルシートの記述例（ナビゲーションバーです）をまねて自分で記述してみたのですが思うように表示できません。どなたか教えてください。 ◆問題の部分です◆ スタイルシート div#navi{ width:900px; margin-bottom:7px; padding-bottom:7px;} ul ,li{ margin:0; padding:0; } ul#navbar{ list-style-type:none; width:900px; float:right; } ul#navbar li, ul#navbar li a{ float:left; text-indent:-9999px; display:block; width:100px; height:25px;} ul#navbar li#link a{ background:url(image/menu-kyousitu.png) no-repeat left top; float:right;} 以下同じ様にメニューが続き ul#navber li#sample1{background:url(image/menu-a5.png) no-repeat left top;　 float:right;} ↑最後のsampleの部分はリンクを張らないようにしたいのでこのように記述したところ、この部分には背景画像が表示されません。 HTML <div id="navi"> <ul id="navbar"> <li id="link"><a href="＊＊">リンク集</a></li> <li id="sample1">sample</li> </div> 見苦しい分で申し訳ありませんが、どなたかよろしくお願いします。
- ベストアンサー
- CSS
CSSのドロップダウンメニューについて
ドロップダウンメニューについての質問です。長文になります。現在、こちらのサイト（http://js.crap.jp/book/chapter2/drop-down-menu2.html）のものを改良して使わせていただいております。今回、このドロップダウンメニューのサブメニューの中に以下のものを入れたいのです。 <div align="left" style="overflow-y:scroll;width:800px;height:250px;"> <ul> </ul> </div> 試行錯誤したのですが、うまくいきません。以下のことをしたいです。１．メインメニューのリンクを全てはずしたい。２．上記参考サイトでのサンプルで言うところの、メインメニューの『webpark』と『スタイルシート』の部分のサブメニューにだけ上記のoverflow-y:scrollを入れたい。３．overflow-y:scrollのなかにはリスト形式で文章を入れる予定なのですが、その文中の特定の文字にはリンクをつけたい。４．上記参考サイトでのサンプルで言うところの、メインメニューの『お役立ちサイト』『javascript』『ウェブデザイン』の部分のサブメニューは既存のまま使いたい。何とか実現させたいです。分かる方ご協力お願いいたします。なお当方、無知な初心者ゆえ、うまく質問できているかも分かりません。質問の意図するところが分からないという場合は追記させていただきます。よろしくお願いいたします。
- ベストアンサー
- CSS
css 画像の一部分をリンクにしたいです
画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>
- ベストアンサー
- CSS
ＣＳＳ：liで作成したメニューの一つだけ背景画像を変えたい
こんにちは。ページのメニューバーを<li>で作成していますが、リンクがある<li>と、ない<li>で背景画像を変えたいのですが、<a:hover>の際の画像も別にしようと、背景画像を<a>で指定しまったため、どうしようかな、と行き詰りました。・【横並び】・【リンクあるなし別のボタン背景画像】・【hover時も背景画像チェンジ】の３点をかなえるには、どのような記述がすっきりするでしょうか。ご意見。ご指摘・叱咤、お聞かせくださいませ。ちなみに、作っておいて、へばった記述例が、以下です。例）横並びのメニューボタン（メニュー１、２、３）・メニュー１（閲覧しているページへのリンクボタンなので、リンクなし）→背景Ａ[../images/A.gif]、・メニュー２（他ページへのリンクボタン）→背景Ｂ[../images/B.gif]、hover時は背景Ｃ[../images/C.gif] ・メニュー３（メニュー２と同様） ----------------- ul#menu{ font-size: 12px; list-style-type:none; width:800; } ul#menu::after { visibility: hidden; clear: both; } ul#menu li{ float: left; width: 120px; list-style-type: none; display: inline; } ul#menu a{ color: #333; text-decoration: none; display: block; background-image: url(../images/B.gif); background-repeat: no-repeat; } ul#menu a:hover{ color: purple; text-decoration: underline; display: block; background-image: url(../images/C.gif); background-repeat: no-repeat; } -------------------
- ベストアンサー
- CSS
CSSで組んだメニューのセンターへの設置が出来ません
初めてトピックを立てさせていただきます。宜しくお願いします。 CSSを使い、横型でオーバーフローするメニューを作っています。ベースとなるバー画像の上に各コンテツへのリンクメニュー画像をバー画像の中心に置きたいのですが、「中心に置く」これがうまく行きません。丁度この教えて！gooのメニューバーと同じ様にしたいのです。各コンテツンツ画像の幅を一定にした場合の設置、バー幅一杯にメニューを配置した場合の方法は検索するとヒットするのですが、今回の様な場合の例となるサイトが無かったのでこの場をお借りしました。 JSという手もあるとは思うのですが、今回はCSSでの設置をしたいと思っていますのでご協力お願いします。動作環境 Mac OS 10.4.11 Safari 3.2.1 Firefox 2 ■ボディー部■ <ul id="menu"> <li><a href="./about.html" class="m_01">01</a></li> <li><a href="./about.html" class="m_02">02/a></li> <li><a href="./about.html" class="m_03">03/a></li> </ul> ■CSS部■ ul#menu{ background:url(img/m_off.gif) no-repeat; list-style:none; width:800px; height:30px; } ul#menu li{ list-style:none; float:left; } ul#menu a{ display:block; height:30px; text-indent:-100px; overflow:hidden; } /**//*/ overflow:auto; /**/ /*------off*/ a.m_01 { background:url(img/m_01.gif) no-repeat; width:101px;} a.m_02{ background:url(img/m_02.gif) no-repeat; width:108px;} a.m_03{ background:url(img/m_03.gif) no-repeat; width:80px;} /*------hover*/ a:hover.m_01{ background:url(img/m_01.gif) no-repeat 0px -30px;} a:hover.m_02{ background:url(img/m_02.gif) no-repeat 0px -30px;} a:hover.m_03{ background:url(img/m_03.gif) no-repeat -0px -30px;}
- ベストアンサー
- HTML
ＣＳＳで右寄せメニューを一行にしたい
メインメニューを画面の右側に一行に表示したいのですが、 ----------------------------- タイトル　　　　　　ｍ１　ｍ２　ｍ３・・・ ----------------------------- メニューはロールオーバー効果を使っていて、画像の形から、文字を右寄せにしたいのです。 .m_ichi { padding: 5px 5px 5px 0px; float: right; } .m_mn { width: 100px; height: 30px; text-align: right; vertical-align: text-bottom; } a.m_menu:link { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; margin: 0px; padding: 10px 0px 2px 1px; width: 100px; height: 30px; background-image: url(img/menu_b.gif); background-repeat: no-repeat; display: block; text-decoration: none; } a.m_menu:visited { a.m_menu:hover { （a.m_menu:link と同じような記述） <div class="m_ichi"> <span class="m_mn"><a href="#" class="m_menu">m1</a></span> <span class="m_mn"><a href="#" class="m_menu">m2</a></span> <span class="m_mn"><a href="#" class="m_menu">m3</a></span> </div> と記述したら、メニューが縦に並んでしまい、文字も左に寄ってしまいました。<TD>記述を使えば、なんとかできたのですが、スタイルシートできれいに表示させる方法を教えて下さい。
- 締切済み
- HTML
CSSで指定した背景画像にリンクエリアを設定する方法。
メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。以下CSSのソースです。 #main_visual { background:url(../img/main_visual.jpg) no-repeat; width:666px; height:418px; text-indent:-9999px; } #main_visual a{ 　 display:block; width:338px; height:43px; 　 position:relative; top:324px; left:308px; } 上のように、666 X 418の画像の中に、上から324px 左から308pxの位置に大きさ338 X 43のリンクエリアをつくリたいのですが、、上記だと、IE7 IE6ではうまくいくみたいですが、 firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。。どのようにリンクエリアを指定するのが最もスマートな方法なのでしょうか？　毎回悩んでます。。ちなみに、*:first-child+html このIE7用のハックってまだ使えたりするんでしょうか？^^;
- ベストアンサー
- CSS
CSSでの画像メニューの設定について
現在CSSの勉強中です。外部CSSで画像を使用してリンクメニューを作ったのですが、やり方があっているか確認をお願いしたいのですが。 off時の画像（白）、ページのin時の画像（赤）、hover（青）の画像を用意しています。 CSS部分▼ .navi01 a{ width:102px; height:43px; background-image:url(common/img/navi_top_off.gif); background-repeat:no-repeat; } .navi01_on a{ width:102px; height:43px; background-image:url(common/img/navi_top_on.gif); background-repeat:no-repeat; } .navi01 a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } .navi01_on a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } HTML部分▼ <li class="navi01_on"><a href="index.html" title="トップページ"><span class="none">トップページ</span></a></li> <li class="navi02"><a href="work.html" title="仕事内容"><span class="none">仕事内容</span></a></li> CSSの講座のページなどを見ると、設定がもうすこし少なくてもうまく動いていたりして、無駄な部分があるのではと思っています。今の私の知識ではどこが悪いのか分からないので、教えて頂けると幸いです。（もし良い講座のページ、本がありましたら教えて頂ければと思います。）宜しくお願い致します。
- ベストアンサー
- CSS

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