コーディングで上手く表示させるための方法
- コーディングで上手く表示させるための方法について相談です。
- i-Tunesの楽曲リストのような表示をcss+javascriptで実装したいです。
- マウスオーバー時の背景画像の変更やボタン画像の変更について教えてください。
- ベストアンサー
こんばんは。
こんばんは。 今仕事でコーディングの作業をしていまして、上手く表示させることができず、悩んでおります。i-Tunesの楽曲リスト（添付画像を参照）のようにコーディングをしたいのですが、これをcss+javascriptで実装したいのですが、どういうふうにやればよろしいのでしょうか。アドバイスをいただければ幸いです。 【仕様】 １．一行目をマウスオーバーしたら背景画像が変わるようにする。 （マウスアウトしたら元の背景画像に戻します。） ２．ボタン画像もマウスオーバーしたら背景画像が変わるようにする。 【htmlソース】 --------------------------------------------------------------- <div id="down_bottom"> <div id="list_top"><img src="img/music_list_top.gif" /></div> <div class="list_middle"><img src="img/music_list_middle.gif" onmouseover="this.src='img/music_list_over.gif'" onmouseout="this .src='img/music_list_middle.gif'"></div> <span class="no_down">1.</span> <span class="title_down">タイトル名</span> <span class="time_down">時間</span> <span class="money_down">値段</span> <span class="sample_down"><a href="#"><img src="img/btn_sample.gif" width="19" height="20" border="0" /></a></span> <span class="buy_down"><a href="#"><img src="img/btn_list_buy.gif" alt="購入する Buy" border="0" /></a></span> <div id="list_bottom">合計：３曲</div> 【cssソース】 --------------------------------------------------------------- #down_bottom { clear:both; padding-top:20px; margin-left:20px; width:647px; } #list_bottom { text-align:center; background: url(../download/img/music_list_bottom.gif) no-repeat; height: 34px; width: 647px; padding-top:5px; font-size:0.8em; font-weight:bold; } .list_middle { background: url(../download/img/music_list_middle.gif) no-repeat; width:647px; height:30px; float:left; } .no_down { position: relative; top:-25px; left:15px; float:left; } .title_down { position: relative; top:-25px; left:50px; width:300px; } .time_down { position: relative; top:-30px; left:320px; width:20px; } .money_down { position: relative; top:-30px; left:360px; width:30px; } .sample_down a:link,.sample_down a:visited,.sample_down a:hover { position: relative; top:-30px; left:380px; width:19px; height:20px; } .buy_down a:link,.buy_down a:visited,.buy_down a:hover { position: relative; top:-30px
- gonzou123
- お礼率16% (6/36)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと時間が取れたので・・ HTML部分は簡単に <ol> <li> <span><a href="title1.html">曲名1</a></span> <span><a href="amlbam1.html">アルバム1</a></span> <span>5min</span><span>\1</span> <span><a href="a1.html">→</a></span> </li> ・・・ </ol> として、CSSで・・画像がない場合は、list-style-typeは数字→小文字に変わる。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ★tableの方が楽かも・・・ IEはパグのためlistナンバーが1になる。 <!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 http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{ margin:0px;padding:0px;background-color:rgb(200,200,200); } body>div{ width:60%;min-width:600px;max-width:900px; margin-left:auto;margin-right:auto; background-color:white;padding:10px;border:none;} p{text-indent:1em;} div.priceList ol{display:block;padding:0px; width:510px;margin-right:auto;margin-left:auto;} div.priceList ol li{width:500px;padding:left:5px; margin-left:0px;border-style:ridge;border-width: 1px 0px; border-color: blue;list-style-position:inside; } div.priceList ol li>span{width:160px;display:inline-block; border-style:solid;border-width:0px 0px 0px 1px; padding-left:5px; } div.priceList ol li>span+span+span{width:30px;} div.priceList ol li>span+span+span +span{ width:10px;text-align:center; } div.priceList ol li:hover{ background-color: rgb(200,200,255);list-style-type:lower-alpha; list-style-image: url("image/ellipse.png") } --> </style> </head> <body> <div class="priceList"> <h1>サンプル</h1> <p>価格リスト</p> <ol> <li> <span><a href="title1.html">曲名1</a></span> <span><a href="amlbam1.html">アルバム1</a></span> <span>5min</span><span>\1</span> <span><a href="a1.html">→</a></span> </li> <li> <span><a href="title2.html">曲名2</a></span> <span><a href="amlbam2.html">アルバム2</a></span> <span>5min</span><span>\1</span> <span><a href="a1.html">→</a></span> </li> <li> <span><a href="title3.html">曲名3</a></span> <span><a href="amlbam3.html">アルバム3</a></span> <span>5min</span><span>\1</span> <span><a href="a1.html">→</a></span> </li> </ol> </div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私はi-Tunesを持っていないので、そのリストを見てはいませんが、どう見てもマークアップが適切ではないように思われます。 この場合は、listでマークアップしてもよいでしょうが、tab;eの方が適切なマークアップでしょう。 CSS(Cascading Style Sheets)もせっかくのCascading(継承)を利用しないから、同じ宣言を繰り返し指定するというおかしなことになっている。(たとえばposition:relative;とかheightとか・・)。継承するものは継承させると一度宣言したら重複記述してはだめです。そのため、とてつもなく煩雑で巨大になっている。その数分の一で済むはずです。 リストなら、 <ol class="menue"> <li> <object ****>play</object> <span class="artist"><a href="**">曲名</a></span> <span class="alubam"><a href="****">アルバム</a></span> <span class="time">5min</span> <span class="plice">\1</span> <span class="byI-Tunes"><a href=""><img src="" alt="" /></a></span> </li> <li>以下同様</li> </ol> CSSは、 ol.menue{} ol.menue li:hover{} ol.menue li object{display:none;} ol.menue li:hover oblect{display:inline;} ol.menue li span.artist{display:inline-block; width:***;} ・・・・とかで済むでしょう。 spanにいちいちclassをつけなくても、隣接セレクタで指定して、詳細度で上書きするほうがスマートでHTMLもシンプルになるが、ブラウザの対応状況からここではclassで指定してある。
関連するQ&A
- ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか？ 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- left (right) プロパティについて
次のように、ベース画像の上に別の画像をのせて表示させています。 <style> <!-- .box { position:relative; left:50%; } .baseimage { position:relative; z-index:1; left:-225px; } .image1 { position:relative; z-index:2; left:-100px; top:-200px; } .image2 { position:relative; z-index:2; left:-100px; top:-300px; } --> </style> <div class="box"> <img src="baseimage.jpg" class="baseimage"> <img src="image1.jpg" width="30" height="30" class="image1"> <img src="image2.jpg" width="30" height="30" class="image2"> </div> このとき、image1 と image2 の左端からの距離が一致せず、ずれてしまいます。 それは何故なのでしょうか？ コーディングに問題があるのでしょうか？ お教えいただけると幸いです。よろしくお願いいたします。
- ベストアンサー
- HTML
- float: leftで横に並べたら、サファリだけ
float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 ＩＥやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？
- ベストアンサー
- HTML
- jQueryでn秒後に要素を最後に移動
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner2"><img src="01.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="02.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="03.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner1"><img src="04.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="05.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="06.jpg" width="100%" alt="" /></div>'); $(".banner").click(function(){ $(this).prependTo("#top_banner"); }); $(".banner1").delay(1000).prependTo("#top_banner"); $(".banner2").delay(2000).prependTo("#top_banner"); <div style="width:750px; background-color:#808080; height:90px; padding-top:6px;"> <div style="width:735px; margin:auto; position:relative;" id="top_banner"> </div> </div> 上記のように記述し、n秒後に自動でバナーが切り替わるプログラムを作成しようしましたが、 うまく動作しません。 クリックすると切り替わるので、その要領で「delay(1000).prependTo("#top_banner")」と記述しました。 1秒後に画像が切り替わるかなと思いましたが、動作しませんでした。 delayはprependToには効かないのでしょうか。 また、上記ソースをもう少し完結にまとめることは可能でしょうか。
- ベストアンサー
- JavaScript
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると （IEでも同じです。） 下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて （IEは小さな資格に×マーク） 上に表示されるはずだった画像が表示できません どうしたらいいでしょうか？
- ベストアンサー
- HTML
- タグの修正に力をかしてください
ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>
- ベストアンサー
- HTML
- ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
- プルダウンメニューがうまくいかない
スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。 サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■HTML■ <a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> <span>|</span> <a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> <span>|</span> <div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)"> <a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a> <div class="submenu" id="submenu1"> <a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント１</a> <span>|</span> <a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント２</a> <span>|</span> <a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント３</a> </div> </div> <span>|</span> <a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> <span>|</span> <div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)"> <a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ１</a> <div class="submenu" id="submenu2"> <a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ１</a> <span>|</span> <a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ２</a> <span>|</span> <a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a> </div> </div> 省略 </div> ■スタイルシート■ .menu { font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; height:2em; width:140px; border-top:solid 1px #33cc99; position:absolute; text-align:left; left:0; top:95px; padding-left:10px } .menu a { color:#33cc99; border-bottom:solid 1px #33cc99; text-decoration:none; display:block; width:100%; line-height:2em; text-align:left; } .menu a:hover { background-color:#ffffcc; } .menu span { color:#000000; display:none; } .menu img { margin-right:10px; margin-left:5px; border:0 } .submenu a{ background-color:#33cc99; border-bottom:solid 1px #ffffff; color:#ffffff; width:100%; } .submenu { visibility:hidden; position:absolute; left:0; width:140px; padding-left:10px; } .submenu a:hover { background-color:#0099cc; width:140px; } #submenu1 { position:absolute; left:0; } #submenu2 { position:absolute; left:0 } #submenu3 { position:absolute; left:0 } #submenu4 { position:absolute; left:0 } #submenu5 { position:absolute; left:0 } #submenu6 { position:absolute; left:0 } ■Javascript■ function MenuOn(x){ obj=document.getElementById("submenu"+x).style.visibility="visible"; } function MenuOff(x){ obj=document.getElementById("submenu"+x).style.visibility="hidden"; }
- 締切済み
- JavaScript
- IEとFireFoxでの指定位置のズレに困っています。
IEとFireFoxでの指定位置のズレに困っています。 cssでポップアップを施した部分についてなんですが、IEだと思った通りの位置に出てくるんですけど、FireFoxだと全然違った位置に出てきてしまいます。 ネットで色々調べて、知る限りの事を全てやってみましたが、結局一週間も無駄に過ごしています。だれか助けてください（ΩДΩ） ちなみに以下がそのcssとhtmlです ■css■ .popup img.pop { display:block; top:-10000px; left:-10000px; position:absolute; } .popup a:hover { position:relative; } .popup a:hover img.pop { top: -290px; left: -68px; } ■html■ <DIV class="popup" align="center"><SPAN><a href=""><img class="pop" width="260" height="243" src="1.gif"/><IMG width="103" height="111" src="image1.jpg" border="0"></a></SPAN></DIV> 何をどう書き足したらFireFoxでもきちんとした場所に出てくるようになるんでしょうか？ どうぞよろしくお願いしますm(。-_-。)m
- ベストアンサー
- HTML
- jqureryスライドショーが上手くいきません。
こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }
- ベストアンサー
- その他（プログラミング・開発）
お礼
ご連絡遅くなり、すいません。 無事にコーディングすることが出来ました！！ ありがとうございました。