メニューを作成し、トップページを完成させる
演習1.9 メニューを作成し、トップページを完成させる
☑<table>タグの属性
cellpadding, cellspacing, td bgcolor
続いて、他のページにリンクするためのメニューを作成します。ここでもテーブルを利用して、下図のような、「トップページ」、「子猫写真」、「子犬写真」からなるメニューを作成していきます。
図 1.9.1
1. メニュー用のテーブルを作成する
早速、メニュー部分となる1行・3列の表のテーブルを作成していきます。
以下のように、「かわいい動物たちの写真館」という見出しの下に新しく記述を追加して、メニューとなるテーブルを作成しましょう。
➢ index.html (※必要部分のみ記載)
～前略～
<body bgcolor="#FFFFCC">
<center>
<h1><font color="#2A7e55">子猫と子犬の部屋</font></h1>
<h3><font color="red">かわいい動物たちの写真館</font></h3>
<table border="3" cellpadding="4" cellspacing="4” width="660">
<tr>
<td width="220" align="center"><strong><font color="#FFFFFF">トップページ</font></strong></td>
<td width="220" align="center"><strong><font color="#FFFFFF">子猫写真</font></strong></td>
<td width="220" align="center"><strong><font color="#FFFFFF">子犬写真</font></strong></td>
</tr>
</table>
<br>
<img src="img/img01.jpg" border="0" alt="メイン写真"><br><br>
～後略～
上の記述を追加したことで、メニュー用のテーブルが作成されました。しかし、この時点で、ブラウザで確認すると、次の図のように、文字が白いために、背景の色とかぶってしまい、何が書かれているのかがわからない状態となっています。
文字が見えるように、メニューの背景を別の色にします。
図 1.9.2
2. メニューの背景に色をつける
では、以下のように、メニュー部分のテーブルの<td>タグにbgcolor属性を追加して、背景の色をつけましょう。次のように、記述を追加してください。
➢ index.html (※必要部分のみ記載)
～前略～
<td width="220" align="center" bgcolor="#333333" ><strong><font color="#FFFFFF">トップページ
</font></strong></td>
<td width="220" align="center" bgcolor="#333333" ><strong><font color="#FFFFFF">子猫写真</font></strong></td>
<td width="220" align="center" bgcolor="#333333" ><strong><font color="#FFFFFF">子犬写真</font></strong></td>
～後略～
それぞれの<td>タグに、「bgcolor=”#333333″」という属性を追加しました。
3. HTMLファイルを保存
ここまでの記述が終わったら、上書き保存をしてください。
4. ブラウザで表示
では、ここまで記述した内容がブラウザでどのように表示されるか、確認してみましょう。
図 1.9.3
メニュー部分の背景に、濃いグレーの色がつき、メニューに書かれた文字がはっきりとわかるようになりました。また、ページ全体に、色のメリハリがついて、全体的に締まった雰囲気になりました。
これで、トップページが一通り完成しました。
