ホームページ制作/SOHO/福岡
Eメール tk-1980@mx4.et.tiki.ne.jp
メニュー
トップページ
HTMLの基本
HTMLとは
書き方の基本
ファイル名について
よく使うタグ
テーブルでレイアウト
基本
特殊なテーブル
ホームページ作成
スタイルシート
スタイルシートとは
背景
小技集
テーブルでレイアウト
ホームページ作成

タイトル、ボタン、本文をそれそれ作っていきます。

タイトルは、画像をそのまま表示するだけなので省略します。


ボタン部分を作ります。

ボタンの数よりセルの数が一つ多いテーブルを作ります。サンプルでは、ボタンの数は3つなので、セルの数が4つ、つまり4行1列のテーブルを作ります。
空白のセルは、テーブルの高さの調節に使います。

<table cellspacing="0" cellpadding="0" border>
<tr>
<td><img src="gazou/top02.gif"></td>
</tr>
<tr>
<td><img src="gazou/profile01.gif"></td>
</tr>
<tr>
<td><img src="gazou/photo01.gif"></td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>


ボタン間の間隔をvalign=""とセルの高さを変えて調節します。
ここでは、画像の表示位置をセルの下( valign="bottom")にして高さを変えて調節します。

<table cellspacing="0" cellpadding="0" border>
<tr>
<td valign="bottom" height="40"><img src="gazou/top02.gif"></td>
</tr>
<tr>
<td valign="bottom" height="40"><img src="gazou/profile01.gif"></td>
</tr>
<tr>
<td valign="bottom" height="40"><img src="gazou/photo01.gif"></td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>


テーブルを背景に使うために、セルの横幅を画像より少し広くし、画像の表示位置をセルの中央にします。

長くて画面にはいりきれないので別ウインドウに表示します。

クリック


最後にテーブルの色を青、borderをとり、空白のセルの高さを変えればボタンの完成です。

クリック


次は本文を作ります。

次へ
戻る

△△ページトップへ△△

[HP制作][HP講座][日記][サイトマップ][掲示板]
ホームページ制作代行サービス 流文-nagarefumi-
Eメール tk-1980@mx4.et.tiki.ne.jp