東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

演習1.9 メニューを作成し、トップページを完成させる

メニューを作成し、トップページを完成させる

演習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

メニュー部分の背景に、濃いグレーの色がつき、メニューに書かれた文字がはっきりとわかるようになりました。また、ページ全体に、色のメリハリがついて、全体的に締まった雰囲気になりました。

これで、トップページが一通り完成しました。

NEXT>> 演習1.10 サブページ(koneko.html)の作成

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.