I. 当サイトの素材の使い方
 
ラインを作る
  連続配置で作る
テーブルで作る
テーブルを飾る
II. 私の場合
 
パターンを作る
ホームページ 素材 ゲストブック リンク サイトについて
monocreator[素材倉庫]
I. 当サイトの素材の使い方
テーブルを飾る
ラインのテーブルを作るのと同じような方法で、四方に画像を使ってテーブルを飾ります。工夫次第で色々なテーブルが楽しめます。
<例> 上下左右、4つの画像を配置します
table1.gif , table2.gif , table3.gif , table4.gif ,
サイズ: 36px × 10px
ここに自由に文字を入れられます

※分かりやすくするために
枠線を表示させてあります
※使用する画像を任意の場所に
保存しておいて下さい

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="10" height="10"><img src="spacer.gif" width="1" height="1"></td>
<td width="240" height="10" background="table1.gif"><img src="spacer.gif" width="1" height="10"></td>
<td width="10" height="10"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="10" height="120" background="table2.gif"><img src="spacer.gif" width="10" height="1"></td>
<td width="240" height="120" bgcolor="#F6A5BE">ここに自由に文字を入れられます
<td width="10" height="120" background="table3.gif"><img src="spacer.gif" width="10" height="1"></td>
</tr>
<tr>
<td width="10" height="10"><img src="spacer.gif" width="1" height="1"></td>
<td width="240" height="10" background="table4.gif"><img src="spacer.gif" width="1" height="10"></td>
<td width="10" height="10"><img src="spacer.gif" width="1" height="1"></td>
</tr>
</table>
◆設定の内容について◆
<table> テーブルの設定
cellspacing="0" …セルの間隔「ゼロ」
cellpadding="0" …セルの余白「ゼロ」
border="0" …枠線の幅「ゼロ」

例の場合は分かりやすくするために「border="1"」として枠線を表示させています。
<td>
【1】 【2】 【3】
【4】 【5】 【6】
【7】 【8】 【9】

セルの幅、高さの設定
【1】【3】【7】【9】の角のセルは同じ設定で幅と高さが同じ正方形です。<td width="10" height="10">
【2】【5】【8】の横幅「width="240"」と、
【4】【5】【6】の高さ 「height="120"」は、指定しなくてもかまいません。指定しなければ【5】の中の要素に合わせて伸縮します。
セルの背景の設定
【2】【4】【6】【8】にそれぞれ背景画像を設定します。
「background="使用する画像へのパス"」
画像へのパスは、画像ファイルとhtmlファイルの保存先が同じ場所なら画像ファイル名を「●●.gif」や「●●.jpg」と指定してください。違う場所なら「保存先のフォルダ名/(スラッシュ)画像ファイル名」というようにパスを指定して下さい。
中央【5】は画像に合わせて「bgcolor="背景色"」を設定します。
<img>

セルの中に置く画像の設定
セルの高さや幅を調節するためにスペーサー画像をおきます。
【2】【8】は背景画像の高さと同じにします。
<img src="spacer.gif" width="1" height="10">
【4】【6】は背景画像の幅と同じにします。
<img src="spacer.gif" width="10" height="1">
【1】【3】【7】【9】の角のセルには、サイズを指定したものか、
<img src="spacer.gif" width="1" height="1">

 
<完成形>
<応用1>
中央のセルの属性/背景色を
「bgcolor="少し薄い色"」にして
縁どりを強調してみる
<応用2>
テーブルの属性/セルの間隔を
「cellspacing="1"」にして
縁どりに間隔をあけてみる
<応用3>
任意の幅や高さを指定しなければ、
中央の内容に合わせて、テーブルサイズが伸縮します。
文字のサイズや量の変更の自由度が高くなります。