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">
<!--
/* 外形 */
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:"MS ゴシック",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>
おそくなりまして申し訳ございません・・・
時間がかかりましたがなんとか出来ました!!!
ORUKA1951さんはほんとにすごいです・・尊敬です~・・!
すごく綺麗なソース、私も自力で出来るようになりたいです・・!
No.2
- 回答日時:
ロールオーバーでもまったく同じです。
添付図のような画像を用意しただけでよいです。
確かに、長ったらしくて面倒ですが、仕組み自体はとっても単純な基本的な仕組みなので難しくは無いでしょう。
ウェブ標準--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:"MS ゴシック",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>
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プロパティを理解しないブラウザのために、上記の背景での指定も行っておくこと。
この回答への補足
回答ありがとうございます!
すみません・・また質問の仕方が悪かったですね・・。
それぞれの画像では無く、横が370pxの一枚画像を背景に引いて
表示は185px×ボタンの高さで設定し
オーバー時に右側の画像を表示させるイメージです。
一枚画像で全ボタンのロールオーバーを設定したかったのですが
一つ一つのボタンで設定した方が良いでしょうか・・?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
隙間をなくすには?
-
ulとliで囲った文字の一部を変...
-
jQuery-もっと見るボタンをスマ...
-
フレームページのドロップダウ...
-
番号付きリスト(<Ol><Li>・・...
-
ナビゲーションバーを端まで伸...
-
CSSでこんな感じにしたい
-
画像にリンクを張ると画像がず...
-
リスト(ul / li)タグの左イン...
-
アンカーにクラスを適用しての...
-
inline-blockでliが横並びにな...
-
テーブルを使わない段組みで
-
<ul>~</ul>が二つ続くと間に改...
-
CSSの「a」と「a:link」の違い...
-
HTMLタグ リストの入れ子とNet...
-
HTML5のfooterに見出しを付けて...
-
Macで画像の切り抜きできないの?
-
【ヒトの神秘】美男美女から何...
-
ウインドウを小さくするとbody...
-
htmlの文字が縦書きになる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報