複数のテーブルそれぞれに別々のCSSを適用させる方法を紹介します。
知っている人からすれば「え？親・子セレクタを作って指定すれば良い話じゃん？」と言われそうですが、これができないという相談は結構受けた事があるので、つまずくポイントなのかなと思いました。
テーマとして結構簡単なので、
・親子セレクタの指定方法
・複数のセレクタをまとめてスタイリングする方法
を一緒に覚えてしまいましょう。スタイリングの基本とも言える内容なのですが、意外と知識としてこぼれやすいポイントです。ただ、この記事を読み終える頃には、すごく簡単な話なんだなという事が分かってもらえると思います。
■前提知識
・HTMLの基本的な使用方法が分かる（Tableタグを使用します）
・CSSの基本的な使用方法が分かる
複数テーブル全てが同じスタイリングになる場合
「WEBサイト上に複数のテーブルがあり、それぞれに別々のスタイリングをしたい。でもCSSを記述すると同一のタグには全て同じスタイリングがなされてしまう。」
といった相談を受ける事があります。冒頭でもお伝えしている通り、CSSのスタイリングの基本的な箇所ではありますが、少し分かりにくい箇所でもあります。
最初に、テーブル全てに同一のCSSが適用されるケースからご紹介します。
例を見てみよう！
まずは全て同じスタイリングがされてしまう。というのがどういう事かご紹介します。以下のHTMLとCSS、そして結果を確認してみて下さい。
※テーブルをスタイリングする際に複数のセレクタを指定する記述にしていますので、その点も参考にしていただければと思います。これが冒頭でお伝えした複数のセレクタに同一のスタイリングをする方法です。と言っても簡単で「,」で区切って並べるだけです。サンプルを見てもらえると分かるはずです。
■HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>テーブル作成</h1> <table> <tr> <th>カラム１</th> <th>カラム２</th> <th>カラム３</th> </tr> <tr> <td>データ１－１</td> <td>データ１－２</td> <td>データ１－３</td> </tr> <tr> <td>データ２－１</td> <td>データ２－２</td> <td>データ２－３</td> </tr> <tr> <td>データ２－１</td> <td>データ２－２</td> <td>データ２－３</td> </tr> </table> <br> <table> <tr> <th>カラム１</th> <th>カラム２</th> <th>カラム３</th> </tr> <tr> <td>データ１－１</td> <td>データ１－２</td> <td>データ１－３</td> </tr> <tr> <td>データ２－１</td> <td>データ２－２</td> <td>データ２－３</td> </tr> <tr> <td>データ２－１</td> <td>データ２－２</td> <td>データ２－３</td> </tr> </table> <br> <table> <tr> <th>カラム１</th> <th>カラム２</th> <th>カラム３</th> </tr> <tr> <td>データ１－１</td> <td>データ１－２</td> <td>データ１－３</td> </tr> <tr> <td>データ２－１</td> <td>データ２－２</td> <td>データ２－３</td> </tr> <tr> <td>データ２－１</td> <td>データ２－２</td> <td>データ２－３</td> </tr> </table> </body> </html> |
■CSS（複数のセレクタ（table,td,th）に同一のスタイリングを適用）
|
1 2 3 4 5 6 7 |
table, td, th{ font-size:15px; border-collapse: collapse; border-spacing: 0; table-layout: fixed; border: 2px #000000 solid; } |
複数のセレクタに同一のスタイリングをする際は「,」で区切って並べてあげればＯＫです。これによって、「table」「td」「th」それぞれに同一のスタイリングがなされます。
■画面
全てのテーブルが同一のスタイリングになっていますね。この状態を解消して、それぞれのテーブルのスタイリングを個別に変更したいがために私に相談をされるのだと思います。
複数のテーブルそれぞれにCSSを適用させる
次に複数のテーブルそれぞれに別々のCSSを適用される方法をご紹介します。
ここで、親・子セレクタ（孫セレクタなどもある）という概念が出てきます。
まずは先ほどのHTMLに少し手を加えます。tableが３つ登場すると思うのですが、それぞれをdivタグで囲って、別々のid名称を付けて上げましょう。
ここでは、「div id=’exam1’」の様に、exam1、exam2、exam3というid名称を付けました。これがtableから見た親セレクタになります。実際に例を見てみて下さい。
例を見てみよう！
■HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>テーブル作成</h1> <div id='exam1'> <table> <tr> <th>カラム１</th> <th>カラム２</th> <th>カラム３</th> </tr> <tr> <td>データ１－１</td> <td>データ１－２</td> <td>データ１－３</td> </tr> <tr> <td>データ２－１</td> <td>データ２－２</td> <td>データ２－３</td> </tr> <tr> <td>データ２－１</td> <td>データ２－２</td> <td>データ２－３</td> </tr> </table> </div> <br> <div id='exam2'> <table> <!-- 省略（上記のテーブルと同一） --> </table> </div> <br> <div id='exam3'> <table> <!-- 省略（上記のテーブルと同一） --> </table> </div> </body> </html> |
次にCSSで各テーブルのスタイリングをしていきます。
以下の例を見ると分かると思いますが、「#exam1 table｛～」の様にスペース区切りで親子セレクタを並べていきます。そうすると、各テーブル毎に別々のスタイリングがなされるという訳です。
■CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#exam1 table{ font-size:15px; border-collapse: collapse; border-spacing: 0; table-layout: fixed; border: 2px #ff0000 solid; } #exam2 td{ font-size:15px; table-layout: fixed; border: 2px #ff00ff solid; } #exam3 table, #exam3 td, #exam3 th{ font-size:15px; border-collapse: collapse; border-spacing: 0; table-layout: fixed; border: 2px #0000ff solid; } |
■画面
exam1、exam2、exam3の親セレクタを作った事により、無事に別々のスタイリングになりましたね。
まとめ
冒頭でも触れた通り、今回ご紹介した内容はテーブルに限らず、全てのタグに対して言える事です。H2タグ、pタグといったタグも、親・子セレクタの指定をしなければ全て同一のスタイリングになります。逆に親・子セレクタまで指定をした場合は、各パーツに対して個別のスタイリングを行う事ができます。
なぜかテーブルを作成する際にこの問題にぶち当たる事が多いのです。確かに私も最初は壁に当たった記憶があります。今回の内容で、セレクタの使い方はバッチリだと思いますので、複数セレクタの使い方も併せてWEBサイトの作成やデザインに活かして下さい！
