- ベストアンサー
コーディングで上手く表示させるための方法
- コーディングで上手く表示させるための方法について相談です。
- i-Tunesの楽曲リストのような表示をcss+javascriptで実装したいです。
- マウスオーバー時の背景画像の変更やボタン画像の変更について教えてください。
- みんなの回答 （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で指定してある。
お礼
ご連絡遅くなり、すいません。 無事にコーディングすることが出来ました！！ ありがとうございました。