アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：cocoaki
  • 質問日時：
  • 回答数：3件

縦型のメニューを一枚画像で作っているのですが
同じようなサンプルがありませんでしたので四苦八苦しています・・。

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

「(CSS)縦メニューを一枚画像で作るには」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

インデントが消えてわかりづらいので、書き直しておききます。


＿をタブに戻してください。
・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">
<!--
/* 外形 */
div.section div.nav ol,
div.section div.nav ol li{
＿display:block;list-style:none;
＿margin:0;padding:0;
＿text-align:center;
}
div.section{width:370px;position:relative;}
div.section div.nav ol li{width:185px;font-family:"AdLib BT","Arial Black","Berlin Sans FB Demi","FrankGoth BT","Futura XBlk BT",monospace;}
div.section div.nav ol li+li{position:absolute;top:0;right:0;}
div.section div.nav ol li ol{background-color:silver;}
div.section div.nav ol li ol li{position:static;line-height:27px;font-family:"ＭＳ ゴシック",monospace;}
div.section div.nav ol li ol li ol li{line-height:22px;margin-left:20px;width:165px;}
div.section div.nav ol li ol li a{display:block;width:100%;height:100%;text-decoration:none;}
/* 前景・背景 */
div.section div.nav ol li{background-color:pink;}
div.section div.nav ol li ol li a{background:url(./images/background/navi.gif) gray 0 0 no-repeat;}
div.section div.nav ol li ol li a:link{background-position:0 0;}
div.section div.nav ol li ol li a:visited{background-position:-555px 0;}
div.section div.nav ol li ol li a:hover,
div.section div.nav ol li ol li a:focus{background-position:-185px 0;}
div.section div.nav ol li ol li a:active{background-position:-370px 0;}

div.section div.nav ol li ol li ol li a{background-position:0 -27px;}
div.section div.nav ol li ol li ol li a:visited{background-position:-555px -27px;}
div.section div.nav ol li ol li ol li a:hover,
div.section div.nav ol li ol li ol li a:focus{background-position:-185px -27px;}
div.section div.nav ol li ol li ol li a:active{background-position:-370px -27px;}
-->
＿</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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/05/23 09:29

No.2

  • 回答者： ORUKA1951
  • 回答日時：

ロールオーバーでもまったく同じです。


添付図のような画像を用意しただけでよいです。
確かに、長ったらしくて面倒ですが、仕組み自体はとっても単純な基本的な仕組みなので難しくは無いでしょう。

　ウェブ標準--HTML4.01strict + CSS2.1
　子孫セレクタは使っていませんが、隣接セレクタは使われています。古いブラウザにも対応させるならclass名でもつけてclassセレクタを利用すること。

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み

<!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">
<!--
/* 外形 */
div.section div.nav ol,
div.section div.nav ol li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;
}
div.section{width:370px;position:relative;}
div.section div.nav ol li{width:185px;font-family:"AdLib BT","Arial Black","Berlin Sans FB Demi","FrankGoth BT","Futura XBlk BT",monospace;}
div.section div.nav ol li+li{position:absolute;top:0;right:0;}
div.section div.nav ol li ol{background-color:silver;}
div.section div.nav ol li ol li{position:static;line-height:27px;font-family:"ＭＳ ゴシック",monospace;}
div.section div.nav ol li ol li ol li{line-height:22px;margin-left:20px;width:165px;}
div.section div.nav ol li ol li a{display:block;width:100%;height:100%;text-decoration:none;}
/* 前景・背景 */
div.section div.nav ol li{background-color:pink;}
div.section div.nav ol li ol li a{background:url(./images/background/navi.gif) gray 0 0 no-repeat;}
div.section div.nav ol li ol li a:link{background-position:0 0;}
div.section div.nav ol li ol li a:visited{background-position:-555px 0;}
div.section div.nav ol li ol li a:hover,
div.section div.nav ol li ol li a:focus{background-position:-185px 0;}
div.section div.nav ol li ol li a:active{background-position:-370px 0;}

div.section div.nav ol li ol li ol li a{background-position:0 -27px;}
div.section div.nav ol li ol li ol li a:visited{background-position:-555px -27px;}
div.section div.nav ol li ol li ol li a:hover,
div.section div.nav ol li ol li ol li a:focus{background-position:-185px -27px;}
div.section div.nav ol li ol li ol li a:active{background-position:-370px -27px;}
-->
</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>
「(CSS)縦メニューを一枚画像で作るには」の回答画像2
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

意味がわからないのですが、一枚画像ということは、一種類の画像(たとえば高さ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プロパティを理解しないブラウザのために、上記の背景での指定も行っておくこと。

この回答への補足

回答ありがとうございます！
すみません・・また質問の仕方が悪かったですね・・。

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

補足日時：2012/05/08 13:38
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報