Ⅵ-５　セル内の背景色を指定する

１）色名表示のセルの背景色を指定します

色名のセルに背景色を指定して、目で見た色を表現します。
それぞれの色名の色を背景色に指定するため、セルに名前を付けます。
「name1」「name2」「name3」「name4」「name5」として<style>に追加します。
最初書いた「td.name」をtd.name1{～}に直してbackground-colorの設定を追加います。
name1の色はみずいろです。色の値は「#A1D5E5」ですから、
td.name1の中に{;background-color:#A1D5E5}を追加します。
同様にtd.name2{text-align:center;background-color:#9ACCD9}
td.name3{text-align:center;background-color:#B9DEE3}
td.name4{text-align:center;background-color:#9FD2AC}
td.name5{text-align:center;background-color:#c8c4c9}を追加します。【参考】

２）見出しのテーブルにも背景色を指定します

td.head1{～}にbackground-color:2f2f63、td.head2{～}にbackground-color:c8dad8を追加します。【参考】

３）見出し部分の文字の色を指定します

背景色を指定したことで、文字が読みづらくなったので、色の設定をします。
h1{～}にcolorの設定を追加し、文字色を「#ffffff」とします。【参考】

４）テーブルの罫線を消します

見出しのテーブルから罫線を消すため、
<table border class="head"><tr>から「border」の指定を削除します。【参考】

５）セルの間の余白を消します

罫線を消してみると、セルとセルの間に余白があることがわかります。
この余白を消すためには、<table>にcellspacingの設定を追加し、値を「0」と指定します。【参考】

６）トップページへのリンクを作ります

コンテンツをページと同じように、ページの下にトップページへのリンクを作ります。
又上のコンテンツと区別するために、<hr>で区切り線を入れます。
リンクと区切り線のデザインはコンテンツページと全く同じにします。
４章の７のソースを開いて設定をコピーして貼り付けます。【参考】

７）区切りの線を手直しします

見出しのテーブルに合わせて延長します。80%→90%へ
区切りの線と、その上のテーブルの間に余白を入れます。
hr{～}に、margin-topを追加し、値を「20px」と指定します。

<html>
<head>
<title>色の呼び名</title>
<style type="text/css"></style>
</head>
<body>
<div align="center">
<table class="head" cellspacing="0"><tr>
<td class="head1"><h1>色の呼び名</h1></td>
<td class="head2">「水と空」の風景から、さまざまな色を抽出して、色名と呼び名についてまとめてみます。<br>
四季の水、四季の空にふさわしいと思われる色名を配しました。</td>
</tr></table>
<table border>
<tr><th>呼び名</th><th>イメージ</th></tr>


<tr><td class="name1">水色<br>みずいろ</td>
<td>海や川の水の緑がかった青から名付けられた。<br>
英名を「アクア」と言うが、アクアとはラテン語で「水」を意味する<br>
万葉集では「水縹（みななだ）」詠んだ歌があり、<br>
それが「水色」と言う名に変化したと言う説がある。<br>
「水縹」とは水で薄めたような薄色の青を言う。
</td></tr>


</table>
<hr>
<div><a href="index.htm">Sky&Water by sora</a></div>
</div>
</body>
</html>

８）テーブルの背景

テーブルでも他のコンテンツと同じように、
background-colorで背景色、background-imageで背景画像を設定することが出来ます。
テーブルの場合、背景のデザインは、<th>や<td>、または<table>に対して設定します。
<th>や<td>に設定した場合、背景はセル毎に表示されます。
一方<table>に設定すると、テーブル全体に表示されます。
●<table>に背景画を指定した場合【参考】
●<td>に背景色を指定した場合【参考】

９）セル間の余白の大きさ

標準のテーブルでは、セルとセルの間に余白が入っています。
この余白の大きさは、<table cellspacing="～">で指定することが可能です。
なお、cellspacingのように、ＨＴＭＬのオプションで数値を指定する場合、「px」のような単位は必要有りません。
単位は全てピクセルで処理されます。
●セルの余白を「0」にした場合【参考】
●セルの余白を「10」にした場合【参考】

Ⅵ-５ セル内の背景色を指定する