- ベストアンサー
リモートロールオーバーの実装方法
- リモートロールオーバーとは、写真の内容がバックグラウンドで番号付きリスト側にも強調される動作です。CSSで実装する際には、番号の挙動に問題が生じることがあります。そのため、JavaScriptを用いた実装が求められます。
- リモートロールオーバーの実装には、CSSとJavaScriptの両方を使用することができます。CSSでは、リモートロールオーバーの効果を作成し、JavaScriptでは番号の挙動を修正します。
- 具体的な実装方法としては、CSSでメニューの各項目に対してホバー時のスタイルを指定し、JavaScriptで番号の挙動を制御します。The `menu` classに対して使用するCSSの設定およびJavaScriptの記述方法について、以下のように説明します。
- Jack-Jill
- お礼率91% (11/12)
- JavaScript
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
>なぜか番号の挙動がおかしいので、 .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>
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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/CSS21/visuren.html#absolute-positioning ) そのためには、HTMLが文書構造をきちんとマークアップされていないとならない。 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )』 ということ。 再度、ソースを確認して、firefoxのfirebugなどを用いてもひとつひとつのスタイルシートの意味を再確認してください。それが手間のようでも最も早く上達できる。
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと遊んでみた ＿<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>
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1/2です。 スタイルシートが適用されないときは、素のブラウザの持つスタイルシートのみで表示されます。 印刷を想定されるなら、(数倍の)大き目の画像をIMG要素のwidth=,height=属性で縮めて表示させておくと、きれいに印刷できます。 縦横比(アスペクト比)やサイズの異なる画像を表示枠にフィットさせることも出来ます。置換インライン要素であるimg要素にdisplay:block;height:90%;width:auto;とすると、直近のstaticでコンテナブロックのサイズに合わせてくれます。ちょっと工夫する(display:inline-block)と表示枠の中心に置けます。CSS3の時間的変化を併用するとスライドショー的にもできます。 マニュアルや商品説明、ナビゲーションで、とってもよく使うスタイルシートですから、覚えておくと良いでしょう。
お礼
時間を頂き、ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 ＞olのolたるorderが消えては意味がありませんし、 これは、スタイルシートでもどうにもなります。olでマークアップされているか、いないかとはまったく関係ありません。文書構造とプレゼンテーションの分離とはそういう意味です。olで番号が振られること自体、ブラウザが自身の持つスタイルシートでそうしているだけですからね。 ⇒HTML list-styleに見出し - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8419524.html ) では、普通の階層構成の見出しに番号を振る方法を解説しました。 ＞写真もコンテンツであり、cssが有効でない場合にも、表示されないと困ります。 ということは、マークアップは <ol> <li>メニューボタンのカバーを外す<img src="" width="" height="" alt=""> <p>カバーと本体の隙間にマイナスドライバーを入れてこじる。</p> </li> <li>２本のネジを外す<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>２本のネジを外す</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-html401j/struct/global.html#h-7.5.4 )」してありますので、そのまま <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>２本のネジを外す ＿＿＿＿<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さんのソースは上手く行きましたが、私のソースのどこが問題だったかは結局わかりませんでした。また、ピンポイントに質問しているにもかかわらず、いろいろな要素を付け加えて、わかりにくくされている意図が、わかりかねました。 疑問への解説は全くなく、疑問以外の解説があるという不思議な回答に戸惑いました。 時間を割いていただきありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そりゃCSSを書き直したほうが良いかと・・ デザイン、いつでも好きに変えられるし、データが増減しても問題ないし・・ ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) でいうと、スタイルシートの[テスト][画像下] 「ブラウザの表示メニュー→スタイルシートを選択--Chromeを除く」
お礼
ご回答ありがとうございます。それで、olのolたるorderが消えては意味がありませんし、写真もコンテンツであり、cssが有効でない場合にも、表示されないと困ります。 それを踏まえて、どうｃｓｓを書きなおした方がいいとおっしゃるのか、理解に苦しみます。おそらく、私が理解不足なのでしょう。更なる、ご指導をいただけたら幸いです。
お礼
Cssの指摘ありがとうございました。上手く行きました。 また、jQueryもご教示いただきありがとうございます。これをとっかかりにjQueryまたはJavaScriptの勉強を開始しようかなと思います。そんなに、難しくなさそうな気がしてきました。