【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集

liタグをＣＳＳで指定して、レイアウトに用いています。背景色をつけたいのです。

解決済

  • 質問者：koro125
  • 質問日時：
  • 回答数：4件

ＣＳＳでレイアウトして、サイトを作成しています。

＜ＣＳＳ部分＞
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">をやってみても色はつきません。

どうやればよいのでしょうか。
ＣＳＳ自体変更した方がよいのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： nekowokai
  • 回答日時：

テーマの<li class="ClassName">と、class属性を使って、CSSで、


　　ul.box li.ClassName {
　　　　background-color: ***…
　　}
というようにすればよろしいかと。

それと質問のサイトを参考にされているようですが、このページを見る限り、携帯電話向け（ezWeb）の説明のようですのです。
作ろうとしているページは、主にパソコンで閲覧されることを想定しているのか、ezWebで閲覧されることを想定しているのか、どちらですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ああそういうやり方があるんですね。

ulboxのさらにliにクラスを指定するのですね。

ありがとうございます。やってみます。

通報する
お礼日時：2008/11/29 23:45

No.3

  • 回答者： yosoho
  • 回答日時：

何度もすいません、背景色ですよね（よく読まず申し訳ないです）



<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

外部ＣＳＳに

.ffdddd_color {
background: #ffdddd;
}

とし
<li class="ffdddd_color">テーマＡ</li>

としたのですが、
背景色がつきません。

何がいけないのでしょうか？

通報する
お礼日時：2008/12/01 09:08

No.2

  • 回答者： yosoho
  • 回答日時：

手間ですが、クラスセレクタで適当に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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： nekowokai
  • 回答日時：

HTMLでは、<ul>は箇条書きリスト、<li>はリストアイテム、と言う意味を持っているタグです。


文章に意味付けを行う言語がHTML、HTMLなどに表示方法など決めるのがスタイルシートと、「HTMLでデザインを扱わないべき」とW3Cが勧告しています。
文書構造から書き直した方がよろしいかと思います。

一応質問の回答も書いておきます。
　　ul.box li {
　　…
　　background-color: #ffffff;
と、指定してあります。
<body>のbackground-colorがわからないので推測になりますが、単に<body>のbackground-colorと同じなので、視覚的に見えないだけではないですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

私の質問の仕方が悪かったです。申し訳ございません。
　ul.box li {
　　…
　　background-color: #ffffff;
この部分で変更すると
すべてのliの背景色が変更されてしまいますよね。

私がやりたいのは、
テーマと書いてあるところだけ背景色をつけたいのです。

ちなみにbodyの背景色は #ffffffです。

通報する
お礼日時：2008/11/29 22:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報