【CSS講座③】CSSで表（テーブル）をおしゃれに装飾する

今回はCSS（ Cascading Style Sheets ）を使って、表（テーブル）をおしゃれに装飾したいと思います。

CSSの基本を理解する

CSS（ Cascading Style Sheets ）とは、Webサイトをデザインするためのマークアップ言語です。CSSは、セレクタ・プロパティ・バリューの構成で成り立っていることを最初に理解してください。

マークアップ言語には、HTMLのほかにSGML、XHTML、XMLなどがあります。

CSSの書き方 … セレクタ { プロパティ : 値 }

  1. セレクタ（selector）とは、スタイルをHTMLのどの要素に適用するのかを決める役割になります。
  2. 次のプロパティとは、どんな種類のスタイルを適用するのかを決める役割になります。
  3. 最後のバリューとは、どのように適用するか値を決める役割になります。

テーブルをおしゃれに装飾する

余白を設定する

  1. table th, table td {
  2.   padding: 20px 10px;
  3. }

説明：paddingプロパティを使うことで、文字の周りに余白を入れることができます。例えば、値を”padding 20px 10px”とした場合は、上下に余白20px、左右に余白10pxが設定されます。

例文では、”table th”と指定しています。親のtableタグと子のthタグの親子セレクタを指定している意味となります。仮にthタグだけ指定することもでき、親と子の両方を指定した結果、どのような違いは生まれるのか一緒に考えてみましょう。

セレクタの親子で指定

以下をWebブラウザで表示した場合は、画面に表示される文字色は赤と青のどちかになりますか？

  1. <style>
  2. div span {
  3.   color: red;
  4. }
  5. span {
  6.   color: blue;
  7. }
  8. </style>
  9. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
  10. <span>文字色は何?</span>
  11. <div><span>文字色は何?</span></div>

10行目の文字色は何になるのだろう？また、11行目の文字色は何色になるのだろうか…？

線の種類・太さ・色を指定する

  1. table th, table td {
  2.   border: solid 1px black;
  3. }

説明：borderプロパティを使うことで、テーブルの枠線が指定できます。例えば、値を”solid 1px black”した場合は、実線で太さは1pxで黒色の線となります。

境界線がない表を作る

  1. table {
  2.   border-collapse: collapse;
  3. }
  4. table th, table td {
  5.   border: solid 1px black;
  6. }
  7. ～～～～～～～～～～～～～～
  8. <table>
  9.   <tr><th>項目1</th><th>項目2</th></tr>
  10.   <tr><td>データ1</td><td>データ2</td></tr>
  11. </table>

説明：border-collapseプロパティを使って、セルの境界線を空けるか空けないかの指定ができます。例えば、値を”collapse”にした場合は、境界線がない表を作成できます。ちなみに、初期値は”separate”が指定されています。

表の偶数行と奇数行で背景色を変える

  1. tr:nth–child(2n+1){ background:red; }
  2. tr:nth–child(2n){ background:blue; }

説明：nth-child(n)は、疑似クラスにあたり、ある要素の隣接している子要素を、1から数えてn番目にあたる要素に限定してスタイルを指定することができます。例えば、tr: nth-child(2）とすれば、2番目の<TR>タグに特定のスタイルを指定します。例文では、奇数行の背景を赤、偶数行の背景を青になるようにスタイルを指定しています。

疑似クラスとは

擬似クラスとは、指定の要素が特定の状態である場合に、スタイルを適用できる指定方法です。例えば、マウスホバー（マウスカーソルを対象物の上に重ねる）した際にリンクの色が変化する装飾を指定する場合は、a.hover { color: blue; }とすることで、マウスカーソルをリンク上に合わせると、青色に変化させることができます。後日、疑似クラスについて細かい説明をしていきます。

今日の問題

まず始めに、以下をメモ帳で記述し、CSS_Chapter03.htmlファイルとして保存してください。

  1. <html>
  2. <head>
  3. <meta charset=”UFT-8″>
  4. <title>ここページのタイトルです</title>
  5. <style>
  6.   H2 { color: blue }
  7. </style>
  8. <meta name=”description” content=”ページの要約文”>
  9. </head>
  10. <body>
  11. <table>
  12. <thead>
  13. <tr>
  14.   <td></td>
  15.   <td scope=”col”>内容</td>
  16.   <td scope=”col”>月謝</td>
  17. </tr>
  18. </thead>
  19. <tbody>
  20. <tr>
  21.   <td>はじめてピアノ教室</td>
  22.   <td class=”txt”>はじめての方へのピアノレッスン</td>
  23.   <td class=”price”>5,000円</td>
  24. </tr>
  25. <tr>
  26.   <td>ボーカル教室</td>
  27.   <td class=”txt”>ボイトレを中心としたレッスン</td>
  28.   <td class=”price”>7,000円</td>
  29. </tr>
  30. </tbody>
  31. </table>
  32. </body>
  33. </html>

問1

テーブルに対し、余白を設定してください。余白は上下20px、左右10pxとしてください。

問2

境界線が無いテーブルを作成してください。

問3

theadタグのtdタグに対し、背景色を青色にしてください。

問4

表の偶数行を灰色にしてください。

宿題

クラス(=price)とクラス(=txt)を使って、テキストを装飾してください。

コメント