cssだと次のような感じで、作成したのですが、なぜか番号の挙動がおかしいので、JavaScriptに切り替えたいと思います。実際には説明の場所には写真が入ります。ポイントは、リモートロールオーバーで、写真の内容がバックグラウンドで番号付きリスト側にも強調されることです。
どのようにすればいいのか教えてください。
javaScriptでがんばりたいですが、Jqueryの記述も比較の為教えてくだされば幸いです。
どうぞよろしくお願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>test</title>
<style type="text/css">
.menu li span {
display:none;
padding:5px;
}
.menu li:hover{
display:block;
background:#cccccc;
}
.menu li:hover .setumei {
display:block;
position:absolute;
top:20px;
left:7em;
width:500px;
height:300px;
background:#ffffff;
}
</style>
</head>
<body>
<ol class="menu">
<li>メニュー1<span class="setumei">オンマウス時に表示される説明1。</span></li>
<li>メニュー2
<span class="setumei">オンマウス時に表示される説明2。</span></li>
<li>メニュー3
<span class="setumei">マウスが乗った時に表示される説明3。</span></li>
<li>メニュー4
<span class="setumei">マウスが乗った時に表示される説明4。</span></li>
</ol>
</body>
</html>
No.5ベストアンサー
- 回答日時:
>なぜか番号の挙動がおかしいので、
.menu li:hover{
/*display:block;*/ /*これを消してください */
background:#cccccc;
}
======
jQuery
no-script環境は考慮していません。
<style type="text/css">
.menu li .setumei {
position:absolute;
top:20px;
left:7em;
width:500px;
height:300px;
background:#ffffff;
padding:5px;
}
</style>
<script src="jquery.js"></script>
<script>
jQuery(function($){
$(".menu li .setumei").hide();
$(".menu li")
.on('mouseover', function(){
$(this).css('background-color', '#ccc').find('.setumei').show();
})
.on('mouseout', function(){
$(this).css('background-color', '').find('.setumei').hide();
});
});
</script>
Cssの指摘ありがとうございました。上手く行きました。
また、jQueryもご教示いただきありがとうございます。これをとっかかりにjQueryまたはJavaScriptの勉強を開始しようかなと思います。そんなに、難しくなさそうな気がしてきました。
No.6
- 回答日時:
No.2です。
>私のソースのどこが問題だったかは結局わかりませんでした。
比較されるとわかると思いました。
div.section ol li div.figure div.figcaption{position:absolute;}
1)絶対配置にして親ブロックから独立させないとならないこと
2)そのときの基準は、直近のsttic以外の親コンテナブロック
だけです。
9.6 絶対配置( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
そのためには、HTMLが文書構造をきちんとマークアップされていないとならない。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
ということ。
再度、ソースを確認して、firefoxのfirebugなどを用いてもひとつひとつのスタイルシートの意味を再確認してください。それが手間のようでも最も早く上達できる。
No.4
- 回答日時:
ちょっと遊んでみた
_<style type="text/css" media="screen">
<!--
div.section{width:600px;margin:0 auto;position:relative;height:380px;}
div.section ol{width:120px;margin:0;padding:0 10px 0 0;}
div.section ol li{width:100px;color:gray;}
div.section ol li div.figure,
div.section ol li div.figure div.figcaption{position:absolute;}
div.section ol li div.figure{top:30px;right:10px;width:480px;height:360px;
}
div.section ol li div.figure div.figcaption{
_bottom:10px;width:400px;
_left:20px;margin:0;padding:0 0.5em;line-height:1.6em;
_background-color:white;
_text-indent:1em;font-size:0.95em;
_box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
_display:none;
}
div.section ol li div.figure img:hover+div.figcaption{
_display:block;
}
div.section ol li+li div.figure{display:none;}
div.section ol li:hover{background-color:yellow;color:black;padding:0 10px 0 0;}
div.section ol li:hover div.figure{display:block;}
div.section h2:after{content:"画像にポインターを乗せると説明が表示されます。";color:red;font-size:0.7em;}
-->
_</style>
_<style type="text/css" media="print">
<!--
div.section ol li,div.footer{clear:right;}
div.section ol li div.figure img{float:right;margin:10px;display:block;width:100mm;height:auto;}
div.section ol li div.figure div.figcaption{
_margin-top:1em;
_text-indent:1em;font-size:0.95em;
}
div.section ol li{
page-break-inside:avoid;}/* li内での改ページ禁止 */
-->
_</style>
No.3
- 回答日時:
No.1/2です。
スタイルシートが適用されないときは、素のブラウザの持つスタイルシートのみで表示されます。
印刷を想定されるなら、(数倍の)大き目の画像をIMG要素のwidth=,height=属性で縮めて表示させておくと、きれいに印刷できます。
縦横比(アスペクト比)やサイズの異なる画像を表示枠にフィットさせることも出来ます。置換インライン要素であるimg要素にdisplay:block;height:90%;width:auto;とすると、直近のstaticでコンテナブロックのサイズに合わせてくれます。ちょっと工夫する(display:inline-block)と表示枠の中心に置けます。CSS3の時間的変化を併用するとスライドショー的にもできます。
マニュアルや商品説明、ナビゲーションで、とってもよく使うスタイルシートですから、覚えておくと良いでしょう。
No.2
- 回答日時:
No.1です。
>olのolたるorderが消えては意味がありませんし、
これは、スタイルシートでもどうにもなります。olでマークアップされているか、いないかとはまったく関係ありません。文書構造とプレゼンテーションの分離とはそういう意味です。olで番号が振られること自体、ブラウザが自身の持つスタイルシートでそうしているだけですからね。
⇒HTML list-styleに見出し - Webデザイン・CSS - 教えて!goo( http://oshiete.goo.ne.jp/qa/8419524.html )
では、普通の階層構成の見出しに番号を振る方法を解説しました。
>写真もコンテンツであり、cssが有効でない場合にも、表示されないと困ります。
ということは、マークアップは
<ol>
<li>メニューボタンのカバーを外す<img src="" width="" height="" alt="">
<p>カバーと本体の隙間にマイナスドライバーを入れてこじる。</p>
</li>
<li>2本のネジを外す<img src="" width="" height="" alt="">
<p>ドライバーは+1番を使用して伸張に外してください。</p>
</li>
<li>パネルを取り外す<img src="" width="" height="" alt="">
<p>パネルを取り外すとディスプレイのヒンジを固定するビスが現れます。</p>
</li>
</ol>
とか、あるいは普通のマニュアルのように・・記事が長いときはこちらが良いでしょう。
<div class="section manual">
<h2>メニューボタンのカバーを外す</h2>
<p><img src="" width="" height="" alt=""></p>
<p>カバーと本体の隙間にマイナスドライバーを入れてこじる。</p>
</div>
<div class="section manual">
<h2>2本のネジを外す</h2>
<p><img src="" width="" height="" alt=""></p>
<p>ドライバーは+1番を使用して伸張に外してください。</p>
</div>
以下省略・・・・
どんな物でも、HTMLがちゃんと出来ていたら、全く同じにデザインできます。
実際のサンプルです。
マークアップは、HTML5を見据えて!!、HTML5の新しい要素名をDIVは「class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」してありますので、そのまま
<div class="section"></div>→<section></section>など変更するとHTML5になります。
header,section,footer,figure,figcaption
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
で検証済みのHTML4.01strict+CSS3(box-shadowのみ)
★印刷時、画像は消えちゃまずいので、画像はfloatにしてあります。(印刷プレビューで試す)
★タブは_に置換してあるので戻す。
<!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" media="screen">
<!--
div.section{width:600px;margin:0 auto;position:relative;height:380px;}
div.section ol{width:120px;margin:0;padding:0;}
div.section ol li{width:100px;color:gray;}
div.section ol li div.figure,
div.section ol li div.figure div.figcaption{position:absolute;}
div.section ol li div.figure{top:10px;right:10px;width:480px;height:360px;
}
div.section ol li div.figure div.figcaption{
_bottom:10px;width:320px;
_left:20px;margin:0;padding:0 0.5em;line-height:1.6em;
_background-color:white;
_text-indent:1em;font-size:0.95em;
_box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
div.section ol li+li div.figure{display:none;}
div.section ol li:hover{background-color:yellow;color:black;}
div.section ol li:hover div.figure{display:block;}
-->
_</style>
_<style type="text/css">
<!--
div.section ol li,div.footer{clear:right;}
div.section ol li div.figure img{float:right;margin:10px;}
div.section ol li div.figure div.figcaption{
_margin-top:1em;
_text-indent:1em;font-size:0.95em;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページではBIBLO NEの分解方法を解説</p>
_</div>
_<div class="section">
__<h2>分解手順</h2>
__<ol>
___<li>メニューボタンのカバーを外す
____<div class="figure">
_____<img src="./images/BIBLO/01.jpg" width="480" height="360" alt="隅角にいれる。">
_____<div class="figcaption">カバーと本体の隙間にマイナスドライバーを入れてこじる。</div>
____</div>
___</li>
___<li>2本のネジを外す
____<div class="figure">
_____<img src="./images/BIBLO/02.jpg" width="480" height="360" alt="傾かないように">
_____<div class="figcaption">ドライバーは+1番を使用して伸張に外してください。</div>
____</div>
___</li>
___<li>パネルを取り外す
____<div class="figure">
_____<img src="./images/BIBLO/03.jpg" width="480" height="360" alt="片側3本ずつ">
_____<div class="figcaption">パネルを取り外すとディスプレイのヒンジを固定するビスが現れます。</div>
____</div>
___</li>
__</ol>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
ありがとうございます。
私のしたいことを文章構造化すると、やはり、質問のhtmlにもどってしまいました。
ORUKA1951さんのソースは上手く行きましたが、私のソースのどこが問題だったかは結局わかりませんでした。また、ピンポイントに質問しているにもかかわらず、いろいろな要素を付け加えて、わかりにくくされている意図が、わかりかねました。
疑問への解説は全くなく、疑問以外の解説があるという不思議な回答に戸惑いました。
時間を割いていただきありがとうございました。
No.1
- 回答日時:
そりゃCSSを書き直したほうが良いかと・・
デザイン、いつでも好きに変えられるし、データが増減しても問題ないし・・
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
でいうと、スタイルシートの[テスト][画像下]
「ブラウザの表示メニュー→スタイルシートを選択--Chromeを除く」
ご回答ありがとうございます。それで、olのolたるorderが消えては意味がありませんし、写真もコンテンツであり、cssが有効でない場合にも、表示されないと困ります。
それを踏まえて、どうcssを書きなおした方がいいとおっしゃるのか、理解に苦しみます。おそらく、私が理解不足なのでしょう。更なる、ご指導をいただけたら幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ジャバスクリプトでクリックし...
-
同一ページ内の複数のタグに同...
-
MAX関数を使ってからLEFT JOIN...
-
removeEventListenerについて
-
[急ぎ] videoタグで埋め込んだm...
-
MFCで画像を表示させているので...
-
大分類・中分類・小分類
-
c++std::string型をTCHARに変換...
-
交互に入れ替わる画像を複数配置
-
表示・非表示のスクリプトで、...
-
「jQuery」アコーディオンメニ...
-
フッター上部に謎の隙間
-
innerHTMLとは
-
画像の重なりの順序を代える方...
-
JimdoでWebアイコンフォントの...
-
eclipseでcssを使うためには?
-
読み込んだQRコードをフォーム...
-
2階層のメニューを作ってjQuery...
-
jQueryで同じクラス名のものを...
-
デフォルト非表示にしたい。【t...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
画像をフェードアウト&フェー...
-
チェックボックスで画像を一括表示
-
[jQuery]bxSlider 一番最後と...
-
jsでグリッドデザインのサムネ...
-
【jQuery】2分割レイアウトで、...
-
liの数によってulの横幅を動的...
-
同一ページ内の複数のタグに同...
-
jqueryサブウィンドウにて画像...
-
神経衰弱 順番に裏返し
-
Javaスクリプトで画像を縦にス...
-
一定時間ごとに画像を切り替え...
-
横並びの画像を3枚時間差でフェ...
-
Javascriptを使用したスライド...
-
順番にクラスをつけていく方法
-
bxSliderのランダム表示について
-
html5に変えるとスライドショー...
-
エンドロールを枠の中で表示す...
-
javascriptで吹き出し
-
ご教授ください。
おすすめ情報