| HOME | MAIL | 本館:b-cures. | 別館:Template b |
 
★高収入が可能!WEBデザインのプロになってみない?!

TABLEを使う(枠に画像を使う)

▼ボーダーの代わりに画像を使う

<td>の中に、background="画像のファイル名"を入れます。画像のサイズに合わせてセルの幅を必ず指定してください。

枠に使用している画像です。

左上の枠画像 上段中央の画像 右上の枠の画像
上段左端の画像
(横10ピクセル縦10ピクセル)
上段中央の画像
(横1ピクセル縦10ピクセル)
上段右端の画像
(横10ピクセル縦10ピクセル)
中段左端の画像   中段右端の画像
中段左端の画像
(横10ピクセル縦1ピクセル)
  中段右端の画像
(横10ピクセル縦1ピクセル)
下段左端の画像 下段中央の画像 下段右端の画像
下段左端の画像
(横10ピクセル縦10ピクセル)
下段中央の画像
(横1ピクセル縦10ピクセル)
下段右端の画像
(横10ピクセル縦10ピクセル)

<table border="0" cellspacing="0" cellpadding="0" width="左端の画像+中央のセルのサイス+右端の画像サイズを足した幅">
<tr>
<td background="上段左上の画像ファイル名" height="画像の縦幅" width="画像の横幅">
</td>
<td background="上段中央の画像ファイル名f" height="画像の縦幅" width="画像の横幅" width="中段で設定した横幅と一緒にしてください">
</td>
<td background="上段右上の画像ファイル名f" height="画像の縦幅" width="画像の横幅">
</td>
</tr>
<tr>
<td background="中段左端の画像ファイル名" height="画像の縦幅" width=画像の横幅">
</td>
<td width="文字入力用のセルです。お好きなサイズに調整してください">
ここに文章を入れます。
</td>
<td background="中段右端の画像ファイル名" height="画像の縦幅" width="画像の横幅">
</td>
</tr>
<tr>
<td background="下段左端の画像ファイル名" height="画像の縦幅" width="画像の横幅">
</td>
<td background="下段中央の画像ファイル名f" height="画像の縦幅" width="画像の横幅" width="中段で設定した横幅と一緒にしてください">
</td>
<td background="下段右端の画像ファイル名" height="画像の縦幅" width="画像の横幅">
</td>
</tr>
</table>

<html>
<head>
<title>
私のホームページ
</title>
</head>
<body text="#999999" link="#0000FF" vlink="#000099" alink="#000099">
<h1>HP作成支援 </h1>
<font color="#FF0000" >HTMLを作成してみましょう</font><br>
<table border="0" cellspacing="0" cellpadding="0" width="450">
<tr>
<td background="tablebg/table_top_l.gif" height="10" width="10">
</td>
<td background="tablebg/table_top_c.gif" height="10" width="430">
</td>
<td background="tablebg/table_top_r.gif" height="10" width="10">
</td>
</tr>
<tr>
<td background="tablebg/table_c_l.gif" height="10" width="10">
</td>
<td width="430" height="200" align="center">
ここに文章を入れます。
</td>
<td background="tablebg/table_c_r.gif" height="10" width="10">
</td>
</tr>
<tr>
<td background="tablebg/table_bottom_l.gif" height="10" width="10">
</td>
<td background="tablebg/table_bottom_c.gif" height="10" width="430">
</td>
<td background="tablebg/table_bottom_r.gif" height="10" width="10">
</td>
</tr>
</table>
</body>
</html>

サンプルページ

(C)2006 html sample. All Rights Reserved.