CSS id と class の違いと使い分け

id と class

CSS(スタイルシート)を書く際に、「特定のタグ・要素すべて」を指定して一括装飾することもありますが、「特定のタグ・要素」を装飾したい場合がほとんどです。
HTMLで指定できる属性は2種類あり、ご存知のid属性とclass属性です。
この id と class の 違い と どのように使い分ける か、迷うことがあります。

この id と class は、適当に使うのではなく、ちゃんとした設計思想があります(あるそうです。。。あると思います)。
そこで今回は、 id と class の違いと、その設計思想についてお話します。

id と class の違い

id と class の違いは、簡単に理解できます。

id は identification の略で、本来は身分証明とか身分証明書のことです。
身分証明とか身分証明書なので同じページ内に、同じ id を持つものは居てはなりません。
居た場合、エラーになるか、プログラム挙動がおかしくなります。

class は共通の性質を有する部類、種類、(学校の)クラス、学級、組などの意味がありますね。
共通の性質を有する組を表しているので、同じ Class に属するものが居てもおかしくないですね。

id と class の違いは判りましたか?
他と区別するために付けるものは id
他と共通するために付けるものは class
です。

id と class の使い分け

では、id と class の使い分けはどのように考えましょう?
id と class は両方付与しても構いません。
id の方が優先されるため、同じ指定なら id が優先されるのでそこは注意が必要ですし、使い方によっては良いケースでもあります。

で、 id と class の違いが理解できていれば、使い分けも知識としては理解できます。
他と区別するために付けるものは id
他と共通するために付けるものは class
です。

ただ、現実問題プログラムを組んで行くと適当になってきてしまい、class を id として使用したりします。
相当大きなページでも最近のPCやスマホは高機能なので、下手な作りでも高速に動いてくれるので問題もないのですが。

で、解決策として、ルールを作って使い方を変えましょうとか、決め打ち(命名ルールに従い)で主要なタグに id を付与しclassは後から追加しましょうとか、書いてある書籍をよく見かけます。
間違いではないですし、有効に機能もする場合もあると思うのですが、それでは本末転倒というか、私は違和感を感じてしまいます。

操作はユニークか否かが、鍵

id か class かはオブジェクト指向の考えたを導入すると明確になります。
要は設計方針で id か class かも決められるます。
でも、オブジェクト指向なんて言われても困りますよね。。。

で、まずは操作が「共通して行われるもの」か、ユニークなもので「共通化されないもの」かを判定します。

操作が共通して行われるもの、背景色や文字種類・大きさ、その他何でも一度に指定して一度に更新したい操作には class を使います。
たとえ今は一つのタグに対してであっても、拡張したり、他のページにコピペで使用したりもありますので、操作を共通で行うものと判断出来たら class にします。

逆にユニークなもので共通化されないものの場合は、間違いを防ぐために id を使用します。
例えばいくつも必須入力テキストがあり、各々の入力判定の結果OKなら緑、NGなら赤にバックグランドを変える場合は、共通部分は class で、バックグラウンド色は id で指定するようにします。

設計思想によって、class を追加、削除するプログラムを書くと上の説明とはことなる考えたが必要になります。
設計思想によって、コロコロ変わってしまうので、「ルールを作って使い方を変えましょうとか、決め打ち(命名ルールに従い)で主要なタグに id を付与しclassは後から追加しましょう」とか結果曖昧な表現になってしまうのですね。

今回は、「操作はユニークか否か」で使い分ける方法を紹介しましたが、これが絶対ではなく、あくまでも一例です。
大きくないWebページなら、変な使い方でも問題ないです。
大きなWebページでは、ごちゃごちゃして、class を触ったら、意図しないタグで意図しない変化が出てしまったってことが良くあります。
id や class を管理をしてすっきりしたCSSを書きましょう。

以上、CSS id と class の違いと使い分けでした。

CSS floatの使い方

 CSS

floatの使い方

floatは段組みを使う時によく使う、CSSレイアウトの基本テクニックです。
ぱっと見は解りづらいですし、思った通りのことが出来ないことも良くあります。
自分で簡単なCSSレイアウトを組んでみて、体感して使うことが覚えてしまう早道です。

何も指定しない場合


<div>
 <div style='background-color: red; width:100px;height:50px;'>テスト赤</div>
 <div style='background-color: blue; width:100px;height:50px;'>テスト青</div>
 <div style='background-color: green; width:100px;height:50px;'>テスト緑</div>
 <div style='background-color: yellow; width:100px;height:50px;'>テスト黄色</div>
</div>

css float 指定なし

css float 指定なし


そのまま下方向に流れて表示されます。

これを右に流して表示する場合に CSS で float:left を指定します。

float:left指定すると


<div style="width:400px;height:50px;">
 <div style='background-color: red; width:100px;height:50px; float:left;'>テスト赤</div>
 <div style='background-color: blue; width:100px;height:50px; float:left;'>テスト青</div>
 <div style='background-color: green; width:100px;height:50px; float:left;'>テスト緑</div>
 <div style='background-color: yellow; width:100px;height:50px; float:left;'>テスト黄色</div>
</div>

css float left

css float left


右方向に流れて表示されました。

左に流して表示する場合は CSS に float:right を指定します。
ここには表示しませんが、下に試すためのサンプルコードを記述しておきますので、自ら試して確認してください。


<div style="width:400px;height:50px;">
 <div style='background-color: red; width:100px;height:50px; float:right ;'>テスト赤</div>
 <div style='background-color: blue; width:100px;height:50px; float:right ;'>テスト青</div>
 <div style='background-color: green; width:100px;height:50px; float:right ;'>テスト緑</div>
 <div style='background-color: yellow; width:100px;height:50px; float:right ;'>テスト黄色</div>
</div>

次に最も良くある段組みを作ります。下の段組みはtableで作ってありますが、これを CSS float で作ります。

ヘッダー
メイン 右サイド
フッター

肝心なのは、clear:left を入れることです。
clear:left を入れずに作るとこのようになります。わざとはみ出させて表示しています。
下のサンプルコードで確認してみてください。

css float はみ出してしまう例

css float はみ出してしまう例

clear:left を入れると

<div style="width:400px; clear:right;">
 <div style='background-color: red; width:200px; height:50px;'>ヘッダー</div>
 <div style='background-color: blue; width:100px; height:100px; float:left;'>メイン</div>
 <div style='background-color: green; width:100px; height:100px; float:left;'>右サイド</div>
 <div style='background-color: yellow; width:300px; height:150px; clear:left;'>フッター</div>
</div>
css float 段組み

css float 段組み

ここまでがレイアウトの基本です。
複雑な段組みはこれらの応用ですので、まずは基本のレイアウトをしっかり把握しておきましょう。

※サンプルコードを載せ忘れていましたので、載せました。
以上、CSS floatの使い方の備忘録でした。

カテゴリー: CSS

【css,jquery】htmlテーブルのヘッダーを固定する方法案

テーブルヘッダーを縦スクロール及び横スクロールともに固定する方法のシステム開発備忘録です。
一つ前のシステム備忘録でCSSのみでテーブルヘッダーを縦スクロールする方法を投稿しましたが、今回は横スクロールにも対応するシステム開発備忘録です。

テーブルのヘッダーを固定する要望は多いと思いますが、横スクロールをするためにはcssだけでは辛いですので、jqueryを使って、面倒なプログラミングをなるべく簡単にする案です。

テーブルヘッダーを固定する案はいろいろ考案できるので、その中の一案として考えています。
今回は、事前に用意するのは、大枠となるdivタグと子要素として固定部table、水平ヘッダー部div,table、垂直ヘッダー部div,table、データ部div,tableです。
htmlを貼っておくので詳細はそこで確認してください。

イメージとしては、下の表の配置です。
データ部のdivのスクロールバーの移動量を水平ヘッダー部div、垂直ヘッダー部divに反映させ、ヘッダーを固定するイメージです。

固定部 水平ヘッダー部
垂直ヘッダー部 データ部

また、テーブルは通常のテーブルをデータ部に作成します。
id=”tableD”としています。
jqueryでは、この普通に作られたテーブルのヘッダー部を水平ヘッダー部にコピーします。
また、テーブルの一番左端の列を垂直ヘッダー部にコピーします。
コピーされたヘッダーと一番左端の列は非表示にしています。

あとはスクロールイベントを捉えて、移動量を反映させる単純な仕組みです。

尚、厄介なのはテーブルの幅が自動で調整されていると微妙に誤差ができ、ずれが生じます。
きっちり計算すればずれは発生しないのかもしれませんが、ブラウザーの種類やバージョンの違いでも誤差が発生する可能性が有るので、この辺りは使用する環境で使用できない案になる可能性も有ります。

まぁ、実際のプログラムに使用する場合はもう少し考慮が必要な部分も有りますので、あくまでも参考までに。

htmlは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
  /* 基本のテーブル定義 */
  #tableT,
  #tableH,
  #tableV,
  #tableD {
    border: 1px solid #000000;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 16px;
  }

  #tableD td {
    border: 1px solid #000000;
    height: 16px;
  }

  #tableH th,
  #tableD th {
    border: 1px solid #000000;
    font-size: 16px;
  }

  #tableD th {
    background-color: #FFBB88;
    color: #000000;
  }

  #tableD tr:nth-child(odd) td {
    background-color: #C8C8E8;
    color: #000000;
  }

  #tableD tr:nth-child(even) td {
    background-color: #E8E8FF;
    color: #000000;
  }

  #header_h {
    position: absolute;
    top: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #header_v {
    position: absolute;
    left: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #data {
    position: absolute;
    overflow-x: scroll;
    overflow-y: scroll;
    width: 270px;
    height: 150px;
  }
  
</style>
  <script type="text/javascript">

    $(document).ready(function () {

      //固定部を作成、tableDの一番左のヘッダーを取得、固定部に張り付ける
      //水平ヘッダー部を作成
      var fF=0;
      $("#tableD > thead > tr > th").each(function (i) {
        if (fF == 0) {
          $(this).clone(true).appendTo($("#tableT > thead > tr"));
          StyleCopyB($("#tableT > thead > tr > th:first"), $(this));
          fF = 1;
        } else {
          $(this).clone(true).appendTo($("#tableH > thead > tr"));
          StyleCopyB($("#tableH > thead > tr > th:last"), $(this));
        }
      });
      //非表示化
      $("#tableD > thead > tr").hide();

      //垂直ヘッダー部を作成
      $("#tableD > tbody > tr").each(function (i) {
        $("#tableV > tbody").append("<tr></tr>");
        $(this).children().eq(0).clone(true).appendTo($("#tableV > tbody > tr:last-child"));
        $(this).children().eq(0).hide();
        StyleCopyB($("#tableV > tbody > tr:last-child > td"), $(this).children().eq(0));
      });

      //垂直ヘッダーのwidthを固定部に設定
      StyleCopyA($("#tableT > thead > tr > th:first"),$("#tableV > tbody > tr:first > td"));

      //データ部のwidthを水平ヘッダーに設定
      $("#tableH > thead > tr > th").each(function (i) {
        $(this).width($("#tableD > tbody > tr").children().eq(i+1).width());
      });


      //DIVheader-hとDIVdataのleftを設定
      $("#header_h").css("left", $("#tableT").width() + "px");
      $("#data").css("left", $("#tableT").width() + "px");

      //DIVheader-vとDIVdataのtopを設定
      $("#header_v").css("top", $("#tableT").height() + "px");
      $("#data").css("top", $("#tableT").height() + "px");

      //
      $("#header_h").width($("#data").width()-17);//17前後要微調整、垂直スクロールバーの幅....※求め方は不明
      $("#tableH").width($("#tableD").width() - $("#tableT").width());
      $("#tableD").width($("#tableD").width() - $("#tableT").width());

      //DIVheader-vのheightをDIVdataのheightを設定
      $("#header_v").height($("#data").height() - 17);//17前後要微調整は水平スクロールバーの高さ....※17の求め方は不明

      //-------------------------------------------------------------------------------------------------

      $("#data").on(
        'scroll', function () {
          $("#header_h").scrollLeft($("#data").scrollLeft());// データ部のスクロールをヘッダに反映
          $("#header_v").scrollTop($("#data").scrollTop());// データ部のスクロールをヘッダに反映
      });


      //-------------------------------------------------------------------------------------------------

      function StyleCopyA($copyTo, $copyFrom) {
        $copyTo.css("width",
                    $copyFrom.css("width"));
        
      }
      function StyleCopyB($copyTo, $copyFrom) {
        $copyTo.css("height",
                    $copyFrom.css("height"));

        $copyTo.css("font-size",
                        $copyFrom.css("font-size"));

        $copyTo.css("background-color",
                        $copyFrom.css("background-color"));
        $copyTo.css("vertical-align",
                                $copyFrom.css("vertical-align"));

        $copyTo.css("border-top-width",
                    $copyFrom.css("border-top-width"));
        $copyTo.css("border-top-color",
                    $copyFrom.css("border-top-color"));
        $copyTo.css("border-top-style",
                    $copyFrom.css("border-top-style"));

        $copyTo.css("border-left-width",
                    $copyFrom.css("border-left-width"));
        $copyTo.css("border-left-color",
                    $copyFrom.css("border-left-color"));
        $copyTo.css("border-left-style",
                    $copyFrom.css("border-left-style"));

        $copyTo.css("border-right-width",
                    $copyFrom.css("border-right-width"));
        $copyTo.css("border-right-color",
                    $copyFrom.css("border-right-color"));
        $copyTo.css("border-right-style",
                    $copyFrom.css("border-right-style"));

        $copyTo.css("border-bottom-width",
                    $copyFrom.css("border-bottom-width"));
        $copyTo.css("border-bottom-color",
                    $copyFrom.css("border-bottom-color"));
        $copyTo.css("border-bottom-style",
                    $copyFrom.css("border-bottom-style"));
      }
    });
  </script>
</head>
<body>
  <div style="position: relative;">
    <!--固定部-->
    <table id="tableT" style="position:absolute;left:0px;top:0px;">
      <thead>
        <tr></tr>
      </thead>
    </table>

    <!--水平ヘッダー部-->
    <div id="header_h">
      <table id="tableH">
        <thead>
          <tr></tr>
        </thead>
      </table>
    </div>

    <!--垂直ヘッダー部-->
    <div id="header_v">
      <table id="tableV">
        <tbody></tbody>
      </table>
    </div>
    <!--データ部-->
    <div id="data">
      <table id="tableD" style="width:430px;">
        <thead>
          <tr>
            <th>固定項目</th>
            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
          </tr>
        </thead>
        <tbody>
          <tr><td style="width:120px;">項目名称A</td><td style="width:130px;">スライド項目A1</td> <td style="width:60px;">項目A2</td> <td style="width:120px;">スライド項目A3</td></tr>
          <tr><td>項目名称B</td><td>スライド項目B1</td><td>項目B2</td><td>スライド項目B3</td></tr>
          <tr><td>項目名称C</td><td>スライド項目C1</td><td>項目C2</td><td>スライド項目C3</td></tr>
          <tr><td>項目名称D</td><td>スライド項目D1</td><td>項目D2</td><td>スライド項目D3</td></tr>
          <tr><td>項目名称E</td><td>スライド項目E1</td><td>項目E2</td><td>スライド項目E3</td></tr>
          <tr><td>項目名称F</td><td>スライド項目F1</td><td>項目F2</td><td>スライド項目F3</td></tr>
          <tr><td>項目名称G</td><td>スライド項目G1</td><td>項目G2</td><td>スライド項目G3</td></tr>
          <tr><td>項目名称H</td><td>スライド項目H1</td><td>項目H2</td><td>スライド項目H3</td></tr>
          <tr><td>項目名称I</td><td>スライド項目I1</td><td>項目I2</td><td>スライド項目I3</td></tr>
          <tr><td>項目名称J</td><td>スライド項目J1</td><td>項目J2</td><td>スライド項目J3</td></tr>
          <tr><td>項目名称K</td><td>スライド項目K1</td><td>項目K2</td><td>スライド項目K3</td></tr>
          <tr><td>項目名称L</td><td>スライド項目L1</td><td>項目L2</td><td>スライド項目L3</td></tr>
          <tr><td>項目名称M</td><td>スライド項目M1</td><td>項目M2</td><td>スライド項目M3</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

以上、テーブルヘッダーを縦スクロール及び横スクロールともに固定する方法のシステム開発備忘録でした。

【CSS】テーブルヘッダーを縦スクロールで固定する方法

テーブルヘッダーを縦スクロールで固定する方法のシステム開発備忘録です。
テーブルのヘッダーを固定する要望は多いと思いますが、何かと面倒なプログラミングになってしまいます。

そこで、今回は主にCSSでテーブルのヘッダーを固定する方法を調査テストしたので、その備忘録です。

1)テーブルのヘッダー部、ボディー部、フッター部をfloat: left;します。
  floatにすることでoverflowが有効になります。
  ヘッダー部、ボディー部、フッター部と横に伸びて行く事になります。
  そこで後程、折り返しが付くようにtdもしくはthの幅をjqueryにて求めてセットします。
2)ヘッダー部の高さを決めます。
  今回のテストでは200pxにしています。
  また、スクロールバーが表示されるように設定します。
3)th,tdの高さや幅を要件沿って設定します。
  jqueryで立ち上げ時に幅を求めます。
  幅が動的に変更されるような場合は再度設定する必要があります。
4)Jqueryでテーブル幅を設定します。
  今回は各thの幅+border幅を足して行きます。
  最後にテーブルのborder幅とスクロール幅を足しました。
  調整が必要な場合も有るようですので、動かして確かめてください。

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style>
    /*thead,tbody,tfoot*/
    #tableA > thead,
    #tableA > tbody,
    #tableA > tfoot {
      float: left; /*overflowを有効化*/
    }

    #tableA > tbody {
      height: 200px;
      overflow: auto;
    }

    /*th,td*/
    #tableA th,
    #tableA td {
      height: 50px;
    }
    .cA{
      width:60px;
    }
    .cB{
      width:50px;
    }
    .cC{
      width:90px;
    }
    .cD{
      width:60px;
    }
    .cE{
      width:40px;
    }
    .cF{
      width:40px;
    }
    .cG{
      width:40px;
    }
        
    /*border*/
    #tableA {
      border: solid 1px black;
    }

    #tableA > thead > tr > th {
      border: solid 1px blue;
      background-color:lightblue;
    }

    #tableA > tbody > tr > td{
      border: solid 1px blue;
    }
    #tableA > tfoot > tr > td {
      border: solid 1px blue;
    }
  </style>
  
  <script type="text/javascript">

    $(document).ready(function () {
   //thの幅の合計を求める
      var w=0;
      $("#tableA > thead > tr >th").each(function (i) {
        w=w+$(this).width()+2;
      });
      $("#tableA").width(w + 16+2);
      $("#tableA > thead").width(w + 16+2);
      $("#tableA > tbody").width(w + 16+2);
      $("#tableA > tfoot").width(w + 16+2);

      $("#tableA > tr").width(w);

    });
  </script>
</head>
<body>
    <table id="tableA" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
      <caption>縦スクロール</caption>
      <thead>
        <tr>
          <th class="cA">A</th>
          <th class="cB">B</th>
          <th class="cC">C</th>
          <th class="cD">D</th>
          <th class="cE">E</th>
          <th class="cF">F</th>
          <th class="cG">G</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="cA">A1</td>
          <td class="cB">B1</td>
          <td class="cC">C1</td>
          <td class="cD">D1</td>
          <td class="cE">E1</td>
          <td class="cF">F1</td>
          <td class="cG">G1</td>
        </tr>
        <tr>
          <td class="cA">A2</td>
          <td class="cB">B2</td>
          <td class="cC">C2</td>
          <td class="cD">D2</td>
          <td class="cE">E2</td>
          <td class="cF">F2</td>
          <td class="cG">G2</td>
  </tr>
        <tr>
          <td class="cA">A3</td>
          <td class="cB">B3</td>
          <td class="cC">C3</td>
          <td class="cD">D3</td>
          <td class="cE">E3</td>
          <td class="cF">F3</td>
          <td class="cG">G3</td>
 </tr>
        <tr>
          <td class="cA">A4</td>
          <td class="cB">B4</td>
          <td class="cC">C4</td>
          <td class="cD">D4</td>
          <td class="cE">E4</td>
          <td class="cF">F4</td>
          <td class="cG">G4</td>
 </tr>
        <tr>
          <td class="cA">A5</td>
          <td class="cB">B5</td>
          <td class="cC">C5</td>
          <td class="cD">D5</td>
          <td class="cE">E5</td>
          <td class="cF">F5</td>
          <td class="cG">G5</td>
 </tr>
        <tr>
          <td class="cA">A6</td>
          <td class="cB">B6</td>
          <td class="cC">C6</td>
          <td class="cD">D6</td>
          <td class="cE">E6</td>
          <td class="cF">F6</td>
          <td class="cG">G6</td>
 </tr>
        <tr>
          <td class="cA">A7</td>
          <td class="cB">B7</td>
          <td class="cC">C7</td>
          <td class="cD">D7</td>
          <td class="cE">E7</td>
          <td class="cF">F7</td>
          <td class="cG">G7</td>
 </tr>
      </tbody>
    </table>
</body>
</html>

縦スクロールだけで有れば割と簡単にテーブルヘッダーの固定ができます。
以上、テーブルヘッダーを縦スクロールで固定する方法のシステム開発備忘録でした。

【CSS】background-colorとbackgroundの違い

ふと、CSSのbackground-colorとbackgroundの違いって何だろう?って思いました。

いつもは背景色を指定する場合は、

<style>
  #TableA{
    background-color: #FF8888;
  }
</style>

のようにbackground-colorを使用しています。

しかし度々、以下のように書かれたものも見ます。

<style>
  #TableA{
    background: #FF8888;
  }
</style>

どちらも同じ結果になるとは言え、どう違うんだろうと思っていました。
もともと見た目のデザインに興味が無かったことが、今まではっきり知らなかった原因なのですが。。。

background-colorとbackgroundの違いを言うと、個別に設定するか、まとめて設定するかの違いでした。

背景の指定には次の指定ができます。

背景色を指定する background: ***;
背景の画像を指定する background-image: url(***);
背景画像の並び方を指定する background-repeat: ***;
背景画像の表示位置を指定する background-position: ***;
背景画像のスクロールについて指定する background-attachment: ***;
個別に指定する際は、上述のプロパティを使います。

逆に一括で指定したい場合は、backgroundプロパティを使います。
backgroundは、背景色や背景画像(並び方、スクロール、位置)を一括で指定するプロパティです。
このbackgroundプロパティを要素に対して設定すると、文書全体の背景をひとまとめに指定することができます。
具体的には、要素ID:TableAに対し、背景色(白)/背景画像(***.gif)/並び方(垂直方向)/表示位置(右上)/固定表示(固定する)

#TableA{
 background: #ffffff url(***.gif) repeat-y right top fixed;
}

このように一括して設定できます。

注意点としては、backgroundプロパティに指定していないプロパティは、デフォルトで設定されます。
例えば、

#TableA{
  background-image: url(***);
  background: #ffffff repeat-y right top fixed;
}

としてしまった場合、背景画像(***.gif)は指定されなかったとみなされます。
要は真っ白背景が表示されるだけです。

ちょっと気になったので、システム備忘録として載せておきます。

【CSS】マウスカーソルが乗るとテーブル行の色が変わる

CSSだけでマウスカーソルが乗るとテーブル行の色が変わるシステム開発備忘録です。
ほんの少しのコーディングの差で変わらないケースも有ります。
例えば、tdを付けてしまってtdの背景色を変えていて、Trの背景色が変わらないとか。。。
なので間違いやすいケースも載せておきます。

まずは、正常に背景色が変わる場合

<html>
<head>
  <style>
    #tableA tr:nth-child(odd) {  
      background-color: #FF8888;
    }  
    #tableA tr:nth-child(even) {  
      background-color: #88FF88;  
    }  
    #tableA tr:hover {
      background-color: #e5e5e5;	/* 行の背景色style="background-color: #FF8888;" */
    }
  </style>
</head>
<body>
  <table id="tableA">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
  </table>
</body>
</html>

下のテーブルはマウスカーソルが乗ると行の背景色が変わります。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

変わらないケース(1)
styleで#tableB tr:nth-child(odd) tdのようにtdで背景色を付けた場合は上手く行きません。
以下をコピペして適当な名前で保存して試してみると変更されないことがわかります。

<html>
<head>
  <style>
    #tableB tr:nth-child(odd) td {  
      background-color: #FF8888;  
    }
    #tableB tr:nth-child(even) td {  
      background-color: #88FF88;  
    }  
    #tableB tr:hover {
      background-color: #e5e5e5;	/* 行の背景色 */
    }
  </style>
</head>
<body>
  <table id="tableB">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
   </table>
  </body>
</html>

上のソースを動かしても、テーブルにマウスカーソルが乗っても行の背景色が変わりません。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

変わらないケース(2)
trタグの中のstyleで直接背景色を付けた場合も上手く行きません。
以下をコピペして適当な名前で保存して試してみると変更されないことがわかります。

<html>
<head>
  <style> 
    #tableA tbody tr:hover {
      background-color: #e5e5e5;	/* 行の背景色 */
    }
  </style>
</head>
<body>
  <table id="tableA">
    <tbody>
      <tr style="background-color: #FF8888;">
        <td>セルA1</td><td>セルA2</td><td>セルA3</td>
      </tr>
      <tr style="background-color: #88FF88;">
        <td>セルB1</td><td>セルB2</td><td>セルB3</td>
      </tr>
      <tr style="background-color: #FF8888;">
        <td>セルC1</td><td>セルC2</td><td>セルC3</td>
      </tr>
      <tr style="background-color: #88FF88;">
       <td>セルD1</td><td>セルD2</td><td>セルD3</td>
      </tr>
      <tr style="background-color: #FF8888;">
        <td>セルE1</td><td>セルE2</td><td>セルE3</td>
      </tr>
     </tbody>
   </table>
  </body>
</html>

上のソースを動かしても、テーブルにマウスカーソルが乗っても行の背景色が変わりません。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

ほんの少しのコーディングの違いですが、上手く背景色が変わる場合と変わらない場合が有るので、変わらない場合は良くチェックしてみてください。

以上、CSSだけでマウスカーソルが乗るとテーブル行の色が変わるシステム開発備忘録でした。

【CSS】テーブルの背景色を交互に変える

CSSでテーブルの背景色を変えるシステム開発備忘録です。
と言うは、極たまにしか使わないので、忘れてしまうことが多くて。。。

<html>
<head>
  <style>
    #tableA tr:nth-child(odd) td {  
      background-color: #FF8888;  
    }
    #tableA tr:nth-child(even) td {  
      background-color: #88FF88;  
    }  
  </style>
</head>
<body>
  <table id="tableA">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
   </table>
  </body>
</html>

これは、疑似クラスの:nth-child(n)を使っています。
まず、疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するものです。

例としてよく使われているaタグに使う疑似クラスを挙げます。
a:link{}
リンクする要素(a要素)のうち、まだ見ていない(キャッシュされていない)要素に対してスタイルを適用させます。
a:visited{}
リンクする要素(a要素)のうち、既に見た(キャッシュされている)要素に対してスタイルを適用させます。

今回のnth-child(n)は疑似クラスは指定した要素内のn番目の子要素にスタイルを適用することができます。
nにはodd、evenの他に数字や2nのように計算式を入れる事もできます。

#tableA tr:nth-child(odd) td で記述したセレクタは、
#tableAのtrのnth-child(odd)奇数行の状態にあるtdに対して、スタイルを適用することになります。

この辺りの詳細な説明は、ググってもらった方が良いですね。

尚、古いブラウザでは動かないことが有ります。例えばIE8とかの古いブラウザとかでは。
この辺りも別途考慮の必要?が有るなら調べて使用してください。

以上、【CSS】テーブルの背景色を交互に変える、CSSの備忘録でした。