- ベストアンサー
liタグをＣＳＳで指定して、レイアウトに用いています。背景色をつけたいのです。
ＣＳＳでレイアウトして、サイトを作成しています。 ＜ＣＳＳ部分＞ ul.box { zoom: 100%; list-style: none; padding: 0; margin: 0; } ul.box:after { height: 0; visibility: hidden; content: ""; display: block; clear: left; } ul.box li { float: left; width: 240px; background-color: #ffffff; border: solid 1px; padding: 1px; margin: 5px; ＜ＨＴＭＬ部分＞ <ul class="box"> <li>テーマＡ</li> <li>テーマＢ</li> <li>Ａの説明</li> <li>Ｂの説明</li> <li>テーマＣ</li> <li>テーマＤ</li> <li>Ｃの説明</li> <li>Ｄの説明</li> </ul> 以上のような感じです。ＨＴＭＬ部分はこのＵＬをさらに囲っている親要素があるのですが、それの幅があるので、横並びに２つ並んでいて、縦には４つboxが並んでいるような状態です。 ですので、ちぐはぐのような感じになっています。 問題はこのテーマとかかれているところだけに背景色をつけたいのですが、どうしてもできません。 http://htmltag.1.tool.ms/153/ こちらのサイトを見て <li bgcolor="#ffdddd">をやってみても色はつきません。 どうやればよいのでしょうか。 ＣＳＳ自体変更した方がよいのでしょうか。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
テーマの<li class="ClassName">と、class属性を使って、CSSで、 ul.box li.ClassName { background-color: ***… } というようにすればよろしいかと。 それと質問のサイトを参考にされているようですが、このページを見る限り、携帯電話向け（ezWeb）の説明のようですのです。 作ろうとしているページは、主にパソコンで閲覧されることを想定しているのか、ezWebで閲覧されることを想定しているのか、どちらですか？
その他の回答 (3)
- yosoho
- ベストアンサー率59% (19/32)
何度もすいません、背景色ですよね（よく読まず申し訳ないです） <style type="text/css"> <!-- .ffdddd_color { background: ffdddd; } --> </style> </head> <body><ul> <li class="ffdddd_color">テーマＡ</li> <li class="ffdddd_color">テーマＢ</li> <li>Ａの説明</li> <li>Ｂの説明</li> <li class="ffdddd_color">テーマＣ</li> <li class="ffdddd_color">テーマＤ</li> <li>Ｃの説明</li> <li>Ｄの説明</li> </ul> </body>
お礼
ご回答ありがとうございます。 外部ＣＳＳに .ffdddd_color { background: #ffdddd; } とし <li class="ffdddd_color">テーマＡ</li> としたのですが、 背景色がつきません。 何がいけないのでしょうか？
- yosoho
- ベストアンサー率59% (19/32)
手間ですが、クラスセレクタで適当にCSSを作成し、任意の場所に適用されてはどうでしょう。 <style type="text/css"> <!-- .ffdddd_color { color: #ffdddd; } --> </style> </head> <body><ul> <li class="ffdddd_color">テーマＡ</li> <li class="ffdddd_color">テーマＢ</li> <li>Ａの説明</li> <li>Ｂの説明</li> <li class="ffdddd_color">テーマＣ</li> <li class="ffdddd_color">テーマＤ</li> <li>Ｃの説明</li> <li>Ｄの説明</li> </ul> </body>
HTMLでは、<ul>は箇条書きリスト、<li>はリストアイテム、と言う意味を持っているタグです。 文章に意味付けを行う言語がHTML、HTMLなどに表示方法など決めるのがスタイルシートと、「HTMLでデザインを扱わないべき」とW3Cが勧告しています。 文書構造から書き直した方がよろしいかと思います。 一応質問の回答も書いておきます。 ul.box li { … background-color: #ffffff; と、指定してあります。 <body>のbackground-colorがわからないので推測になりますが、単に<body>のbackground-colorと同じなので、視覚的に見えないだけではないですか？
お礼
ご回答ありがとうございます。 私の質問の仕方が悪かったです。申し訳ございません。 ul.box li { … background-color: #ffffff; この部分で変更すると すべてのliの背景色が変更されてしまいますよね。 私がやりたいのは、 テーマと書いてあるところだけ背景色をつけたいのです。 ちなみにbodyの背景色は #ffffffです。
お礼
ああそういうやり方があるんですね。 ulboxのさらにliにクラスを指定するのですね。 ありがとうございます。やってみます。