- ベストアンサー
スタイルシートを利用してリスト行の色分け方法
スタイルシートを利用して、リストを作成しています。 基本的には、dd や li を利用して、表示させたいと思います。その際に、1行毎に、バックグランドに色を入れたいと思います。 スタイルシートだけでは、出来ないと思います。 今は、1行毎に class を設定していますが、class を設定せずに自動で色分けが出来るようにしたいと思います。 JavaScript を利用すれば可能でしょうか。 希望を言わせて頂ければ、1ページ内に複数のリストが有り、行の色分が適用されるリストと、適用されないリストを分ける事が出来れば嬉しく思います。 参考になるアドバイスを頂ければと思います。
- nori_007
- お礼率75% (145/192)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
1行毎って偶数行と奇数行、みたいな事かな？ #1さんのサンプルをほとんど流用してます。（ステートメントの区切りがちょっと馴染まないので「{,}」の位置も変えてます） <html> <head> <style> .even{background-Color:#ccc;} </style> <script> window.onload=function(){ var uls=document.getElementsByTagName("ul"); for(var i=0;i<uls.length;i++) if(uls[i].className=="hoge") { var lis=uls[i].getElementsByTagName("li"); for(var j=0;j<lis.length;j++) if(j%2) lis[j].className='even'; } } </script> </head> <body> <ul class="hoge"> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> <ul> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> <ul class="hoge"> <li>1行目</li> <li>2行目</li> <li>3行目</li> <li>4行目</li> <li>5行目</li> </ul> </body> </html>
お礼
アドバイスをありがとうございます。 そうです。１行毎と言うのは、奇数行と偶数行の事を指しています。 奇数行、偶数行と言うですね。 サンプルはとても参考になりました。 １番さんのサンプルと合わせて、理解出来るようになりたいと思います。 とても助かりました。
関連するQ&A
- スタイルシートについて。
スタイルシートを設定するのはいいのですが、複数のスタイルシートを同時に設定するやり方が分かりません。 片方のスタイルシートを、インターネットオプション→全般タブ→ユーザー補助→参照→スタイルシートを指定→OK、これで適用します。 これと同じ作業をもう一度して、もう片方のスタイルシートも設定する。 するとその前に設定していたスタイルシートが適用されず、もとに戻ってしまいます。 これは私だけなのでしょうか？ それかやはり他にスタイルシートを複数適用させるやり方があるのでしょうか？ やり方の分かる方、回答の方をお願いしたく思います。よろしくお願いします。
- ベストアンサー
- ネットトラブル
- スタイルシートで作成したリスト
スタイルシートで作成したリストが含まれるwebページを印刷したいのですが、 リストの数字の部分が、文字化けしてしまいます。 （●に置き換わってしまう） どのようにすれば、数字をきちんと表示させたまま印刷することができるのでしょうか？ リスト部分は .LI { list-style-type: decimal; list-style-position: outside; margin-top: 0px } としています。
- ベストアンサー
- HTML
- CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul { padding: 0; margin: 0; list-style-type: none; } #content li { float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。
- ベストアンサー
- HTML
- ブラウザのスタイルシート設定の検出
多くのブラウザに、「スタイルシートを使用しない」「ユーザースタイルシートを適用」などの設定がありますが、 スタイルシートの設定を、何らかの方法で検出したいので、方法を教えてください。 javascriptが使用できるか判定するように、スタイルについても判定したいのですが、 例えば、あるidに、display:inline; が適用されているか、display:blockが適用されているかを検出する方法であれば、javaScriptでもDOMでもアクションスクリプトでも、方法は問いませんので、よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳのリストスタイルについて
別の人が作成したホームページの更新をしています。 そのホームページ全体に ul と li に list-style-noneのスタイルシートがかかっています。 新規に作成するページで 数字のリスト １．目次 ２．手引きについて ３．今後の流れについて というような数字のリストを作成したいのですが <ol> <li>目次</li> <li>手引きについて</li> <li>今後の流れについて</li> </ol> とすると通常目次についての前に数字の１が 手引きについての前に数字の２が表示されるかと思うのですが 表示されません。 ulとｌｉのlist-style-noneになってるからなのですが これは他のページがくずれるので解除できません。 どのような記述をすれば表示されるでしょうか？ 初歩的な質問で申し訳ありませんが ご回答よろしくお願いいたします。
- ベストアンサー
- CSS
- LIタグのスタイルシートを作りたいです。
<li>タグを使うと、他の人が設定したスタイルシートが効いてしまう ので、スタイルシートを無効にするか、 独自に、<ul><li>を使ったように見えるスタイルシートを 書きたいのですがどのように書けば良いでしょうか？ .org_li { }
- ベストアンサー
- HTML
- スタイルシートについて。
ホームページ作成中です。 スタイルシートで管理された買い物籠を利用しようとしているのですが、うまく設定できません。 左下に白い空白が出ています。 しかし、どこがこの設定をしているのかがさっぱりです。 どこにバッググランドカラー設定をしたらよくなりますか? CSSファイルが必要だったら言ってください。補足に貼り付けます。
- ベストアンサー
- CSS
- list-styleの変更がうまくできない
せっかく画像も用意したのに、画像も表示されたのに、 http://hiromitsu.s220.xrea.com/basket.jpg でも、表示されたら、なんか画像が変形してるんです。 http://hiromitsu.s220.xrea.com/index.html （リンク先はまだ作ってません。） なんでこんなことが起こるんですか？ なにが悪いですか？ よろしくお願いします。 sources [css] font-family: "MS Pゴシック"; font-style: nomal; font-size:14pt; line-hight: 150px; background-image : url(basket.jpg) ; background-position : left ; /* 位置は左端の真ん中 */ background-repeat : no-repeat ; /* 背景だけど繰り返し表示しない */ padding-left : 100px ; /* 「画像の横幅+マーカーとの距離」を左方向に空ける */ } [html] <dl> <dt> <ul> <li><a href="xxx.html">理念</a></li> <li><a href="yyy.html">製品</a></li> <li><a href="zzz.html">プラン</a></li> <li><a href="aaa.html">ご相談</a></li> <li><a href="bbb.html">Q＆A</a></li> <li><a href="index.html">home</a></li> </ul> </dt> <dd> ... </dd> </dl>
- 締切済み
- HTML
- スタイルシートのリンク要素について
スタイルシート。特定のIDセレクタにa要素を指定する方法を教えて下さい。 a:link{color:#FFFFFF} この場合はスタイルシートを適用すればページすべてに反映。 li a:link{color:#FFFFFF} これなら＜li＞にのみ適用ですよね？ そこでたとえば #abcd というIDにのみa:linkを適用させる場合はどのようにしたらよいのでしょうか？
- ベストアンサー
- HTML
- HTML list-styleに見出し
HTMLで、ブラウザ上での表示が 以下の様になるよう組んでいます。 ----------------------------------- コンテンツ大見出し （←大見出しはh3を使用予定） 1．見出し見出し見出し見出し 内容テキスト内容テキスト内容テキスト内容テキスト 内容テキスト内容テキスト内容テキスト内容テキスト 2．見出し見出し見出し見出し 内容テキスト内容テキスト内容テキスト内容テキスト 内容テキスト内容テキスト内容テキスト内容テキスト ～以下同様7、8項目くらい下に続く ----------------------------------- この場合、1～7項目まで続く、いわゆるリストなので list-styleを使った方がいいかな、と思い、当初 ↓ ----------------------------------- <ul> <li> <h4>見出し見出し見出し</h4> テキスト内容テキスト内容テキスト内容テキスト内容 </li> <li> <h4>見出し見出し見出し</h4> テキスト内容テキスト内容テキスト内容テキスト内容 </li> ～ </ul> ----------------------------------- と書いてみましたが、 <li>の中には<h>タグを入れるべきではないと拝見し、 では<dl>を使って ↓ ----------------------------------- <dl> <dt>見出し見出し見出し</dt> <dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd> <dt>見出し見出し見出し</dt> <dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd> ～ </dl> ----------------------------------- と組んでみました。 が、そうすると<dt>に番号がふれないのです。 どこかのサイトで、以下の様にスタイルシートに記述すればOKとありましたが dt { display: list-item; list-style: disc outside; … } 上記を記述しても実現できませんでした。 勿論「disc」の部分を「decimal」にしました。 実現方法だけで考えれば、 ・<dl>を使用して、見出し文の頭に自分で数字をつける ・<ul><li>を使用して、見出しの部分だけ<p>か何かで囲み、 スタイルシートで文字の大きさ太さを調整する ・list-styleではなく、各項目<div>で囲み、見出しは<h>タグを使う など、方法はあるのですが、 ・番号がふられている見出しはそれなりに重要視しているので できればhタグか、見出しだと分かるタグを使用したい。 ・番号がふられているリスト（のようなもの）なのでlist-styleが適当のような気がする。 このような場合、皆さんはどう記述されていますか？ どのような記述が正しいのでしょうか。 宜しくお願いします。
- ベストアンサー
- CSS
お礼
早速のアドバイスありがとうございます。 CSS までは独学で何とか学べたのですが、JavaScropt に関しては。「あ！」と言う閃きが無く、毎回悩んでいます。 教えて頂いたスクリプトを理解出来るように学びたいと思います。 正直希望は、２番の回答になりますが、今後の応用が出来そうです。 とても助かりました。