ゼロからのWeb制作 Vol.8|スタイルシート(CSS)5

こんにちは、鈴木です。
今回も前回に引き続いて、CSSによる表の装飾について書いていこうと思います。

目次

  1. ヘッダとフッタの装飾
  2. 文字サイズとセルの余白の装飾
  3. コード紹介

 

1.ヘッダとフッタの装飾

ヘッダとフッタ内の背景の色を変え、枠線の太さを変えてみます。

スタイルシートに


table thead th {background-color: #6495ED;border-bottom: 2px solid #0000FF;}
table tfoot th {background-color: #6495ED;border-top: 2px solid #0000FF;}

と追加します。

これをブラウザで表示すると以下のようになります。

資料20
 

ヘッタの領域が小さく分かりにくいですが、背景と枠線の太さが変わったのが分かります。

* thead, tfoot, tbodyを記述しておくことで、thead, tfoot, tbodyそれぞれに対して装飾することが可能です。

2.文字サイズとセルの余白の装飾

今の表では文字の大きさが小さく、文字間隔が窮屈なように思えます。
そこで、表全体を大きくし、文字の間隔を少し空けてみようと思います。


table{ font-size:200%;}
table th,table td{ padding: 0.3em;}

table全体の要素とtable th td要素を指定するスタイルシートにコードを追加します。

これをブラウザで表示すると以下のようになります。

資料21

font-sizeは文字の大きさを指定します。

通常の文字の大きさは100%なので200%にすると文字が2倍の大きさになります。
文字が大きさを指定することで表全体の大きさも変化します。

paddingは指定したセル内の上下左右を調整します。
0.3emとは0.3文字分の間隔を空けます。

3.コード紹介

今回は使用しなかったものの、表の装飾に役立つコードをいくつか紹介します。

text-align:;

セル内の文字を左寄せや右寄せに指定することができます。
右寄せにしたい時は:;の中にright、左寄せにしたい時はleftと記述します。

letter-spacing:;

文字と文字の間隔調整することができます。
:;の中に空けたい間隔の文字分を記述します。
例えば、2文字分の間隔を空けたい場合は、2emと追加します。

font-family:;

表で使われる文字のフォントを指定することができます。
:;の中に自分の使いたフォントを指定します。
フォントの数は一つだけでなくカンマ(,)で区切ることでいくつも指定することが可能です。

相手のPC環境によっては指定したフォントが表示されないことがあるので、はじめからいくつかフォントを指定しておく方が良いでしょう。

このように、複数のコードを組み合わせることで、より見やすい表を作成することができます。