重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

背景色を行ごとに変えるには？

解決済

  • 質問者：yamyamya-m
  • 質問日時：
  • 回答数：5件

お世話さまです。
以下において、
<style type="text/css">

ul,li {padding:0;
margin:0;
line-height:1.3;}


.blockAA {width:740px;}

.blockAA ul {width:740px;}

.blockAA ul li {float:left;width:340px;list-style:inside;padding-left:30px;}

/* clearfix */
.blockAA ul:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/* for ie */
* html .blockAA ul {display:inline-table;}

/* hides from ie-mac \*/

.blockAA ul {height:1%;}

/* end hide from ie-mac */

</style>

</head>
<body>

</body>
</html>

<div class="blockAA">
<ul>
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
<li><a href="#">えええ</a></li>
<li><a href="#">おおお</a></li>
<li><a href="#">かかか</a></li>
<li><a href="#">ききき</a></li>
<li><a href="#">くくく</a></li>
<li><a href="#">けけけ</a></li>
<li><a href="#">こここ</a></li>
</ul>
</div>

ここで、「あああ」「いいい」行と、
「えええ」「おおお」行の色を、交互に変えたいのですが、どのようにすればよいでしょうか？
ご回答よろしくお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： abril
  • 回答日時：

No.3です。



> 「いいい」を消去した際、あくまで、「いいい」の文字列がなくなり、もともとあった背景色はそのままにしておく必要があるのです。

今の構造のままでは単なる静的なHTMLで「自動的に」そうするのは無理ですね。
理由は、その様にしたいのであれば、文字列を入れるコンテナと背景色を指定するコンテナを分けておかねばならず、且つ後者（背景色を指定するコンテナ）の子要素として前者（常に均等な2列にする為に幅を指定した文字列のコンテナ）を2つセットで入れておける様な構造が必要になるからです。
しかし、現在の構造はアイテムの増減に関わらず2列を維持するのを

<ul>
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
（省略）
</ul>

という様に、それぞれの文字列が1つづつliというコンテナの中に入れる事で成り立っている為、liを2つセットで格納して背景色を指定できる様な親要素が存在できません。
依って、現在の構造を維持するならば、アイテムの増減に伴い背景色を指定するclass属性も手作業で差し替えるのは必須となります。

HTML側の構造を変えればご要望に近いことをするのも不可能ではありませんが、その場合の問題がいくつかあります。

・論理構造上、これらの文字列が「ひとつづきのリスト」が適切なのであれば、HTML側は変えるべきではない。
・上記の条件がクリアできる様な内容であったとしても、その場合は結局アイテムの増減が発生した箇所から下のアイテムは、文字列を含む最小単位のコンテナごとの移動という手作業が必須となり、結局（現在の構造でclass属性の方を差し替えるのとたいして変わらず）煩雑。

単純な例でいうと、現在の構造を”以下の様に変えられる様な内容であれば”、できる事はできるんですよ。

【CSS】
.blockAA ul {
（省略）
background: #fcc;
}
.blockAA ul.highlight {
background: #ccf;
}

【HTML】
<div class="blockAA">
<ul>
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
</ul>

<ul class="highlight">
<li><a href="#">ううう</a></li>
<li><a href="#">えええ</a></li>
</ul>
（省略）
<ul>
<li><a href="#">こここ</a></li>
</ul>
</div>

上記であれば、背景色変更の指定が親要素ulの方にできる為、li単位でのアイテムの移動をしても見た目上の1行毎の背景色は保持されます。
つまりこういう事です：

<div class="blockAA">
<ul>
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
</ul>

<ul class="highlight">
（元々あった「ううう」をliごと削除）
<li><a href="#">えええ</a></li>
<li><a href="#">おおお</a></li>←「おおお」をliごと移動
</ul>
（以下、liごとにひとつづつ上にずらして行く）
（省略）
</div>

まあアイテムが20個ぐらいならその都度手作業のメンテナンスをしても許容範囲かなと想いますが、50個も100個もあったら「非常に」煩わしい思いをする事になりますね。そういった場合は、「（そこのスタイルが重要な意味を持つのでなければ）メンテナンスに支障の出ないデザインに変更する」か、何らかの手段で自動化した方が良いでしょうね。ただ、「見た目」だけでなく「実質」1行づつ（つまりli単位で1アイテムづつ、ということ）交互に、という事であればJavaScriptとかで「奇数行」「偶数行」をカウントして処理を振り分ける、というのが簡単にできるのですが（テーブルの行が交互に背景色を変えているやつなんかによくそういう仕組みが用いられます）、質問者様の場合は実質2行づつのアイテムを見せかけで1行にして、スタイルを変えなければならないのはその見せかけの数毎ですから、そうなるとちょっと簡単じゃないかもしれません。
JavaScriptマスターではないので詳細はわかりかねますが…
＃「実質」の1行づつの背景色変更スクリプトについては確か質問者様の以前の質問の回答文中にありましたので、そちらをご覧になってみて下さい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

大変わかりやすくお教えいただき、ありがとうございます。
はい、JavaScriptで奇数行と偶数行にわける方法が一番いいのかな、と思い始めたところでした。
あいにく今のデザインを変更することができないので、私もJavaScriptの知識はほとんど皆無に等しいのですが＾＾；ちょっと勉強してみようと思います。
ご丁寧にどうもありがとうございました。

通報する
お礼日時：2009/09/09 09:46

No.4

リスト自体にidやclassで背景色を指定。


内部/外部/直接
ドレでも良いでしょう。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： abril
  • 回答日時：

HTML（だけ）では自動で交互にする事はできませんので、この場合はliの背景色のみを変えたclassセレクタを設けて、1行（2リストアイテムづつ）毎にclass属性を指定してはいかがですか。

その方がHTML側の記述をシンプルにできますので。

以下は一例です。
＃修正・追加部分のみ。

【CSS】
.blockAA ul li {
（省略）
background: #fcc;
}
.blockAA ul li.highlight {
background: #ccf;
}

【HTML】
<div class="blockAA">
<ul>
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
<li class="highlight"><a href="#">えええ</a></li>
<li class="highlight"><a href="#">おおお</a></li>
<li><a href="#">かかか</a></li>
<li><a href="#">ききき</a></li>
<li class="highlight"><a href="#">くくく</a></li>
<li class="highlight"><a href="#">けけけ</a></li>
<li><a href="#">こここ</a></li>
</ul>
</div>

上記のサンプルでは、class属性を指定していないliの背景色は#fcc、class="highlight"を記述したliの背景色は#ccfになりますので、1行毎に赤・青・赤…という背景色になります。

この回答への補足

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

補足ですが、
「あああ」「いいい」
「えええ」「おおお」
において、「いいい」を消去した際、あくまで、「いいい」の文字列がなくなり、もともとあった背景色はそのままにしておく必要があるのです。

もしお時間がありましたら、再度ご協力願えれば助かります、よろしくお願いいたします。

補足日時：2009/09/08 13:49
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ts3m-ickw
  • 回答日時：

リスト行全体の背景色を指定するのならこっち。


<li style="background-color: #0099FF"><a href="#">あああ</a></li>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

補足ですが、
「あああ」「いいい」
「えええ」「おおお」
において、「いいい」を消去した際、あくまで、「いいい」の文字列がなくなり、もともとあった背景色はそのままにしておく必要があるのです。

もしお時間がありましたら、再度ご協力願えれば助かります、よろしくお願いいたします。

通報する
お礼日時：2009/09/08 13:49

No.1

  • 回答者： ts3m-ickw
  • 回答日時：

<li><a href="#"><span style="background-color: #0099FF">あああ</span></a></li>


のようにしてみたらうまくいくんじゃないかな？
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報