Vol.8|SSCのホームページ制作・集客スクールブログ2014.07.23S.SCSSWeb制作ブログこんにちは、鈴木です。今回も前回に引き続いて、CSSによる表の装飾について書いていこうと思います。文字サイズとセルの余白の装飾コード紹介1.ヘッダとフッタの装飾ヘッダとフッタ内の背景の色を変え、枠線の太さを変えてみます。#0000FF;}と追加します。これをブラウザで表示すると以下のようになります。ヘッタの領域が小さく分かりにくいですが、背景と枠線の太さが変わったのが分かります。tbodyそれぞれに対して装飾することが可能です。今の表では文字の大きさが小さく、文字間隔が窮屈なように思えます。そこで、表全体を大きくし、文字の間隔を少し空けてみようと思います。td要素を指定するスタイルシートにコードを追加します。これをブラウザで表示すると以下のようになります。font-sizeは文字の大きさを指定します。通常の文字の大きさは100%なので200%にすると文字が2倍の大きさになります。文字が大きさを指定することで表全体の大きさも変化します。paddingは指定したセル内の上下左右を調整します。0.3emとは0.3文字分の間隔を空けます。今回は使用しなかったものの、表の装飾に役立つコードをいくつか紹介します。1text-align:;セル内の文字を左寄せや右寄せに指定することができます。右寄せにしたい時は:;の中にright、左寄せにしたい時はleftと記述します。2letter-spacing:;文字と文字の間隔調整することができます。:;の中に空けたい間隔の文字分を記述します。2文字分の間隔を空けたい場合は、2emと追加します。3font-family:;表で使われる文字のフォントを指定することができます。:;の中に自分の使いたフォントを指定します。フォントの数は一つだけでなくカンマ(,)で区切ることでいくつも指定することが可能です。相手のPC環境によっては指定したフォントが表示されないことがあるので、はじめからいくつかフォントを指定しておく方が良いでしょう。このように、複数のコードを組み合わせることで、より見やすい表を作成することができます。SSCのホームページ制作・集客スクール当社では、WordPress講座を中心としたホームページ制作・集客スクールを運営しています。教室は、さいたま市の浦和駅から徒歩5分。・Webのスキルを習得したい学生などなど、様々な方に幅広い目的で受講していただくことが可能です!SSCのホームページ制作・集客スクールはこちら。