ホームページ キッチントップへ
Q&Aマップ | サイトマップ
フリー素材ホームページ HTML レシピホームページの配色ホームページ作成 環境ホームページ作成 ソフト
ホームページ キッチントップへ

-- 角が丸いTABLEを作ろう --
TABLEの四隅に丸い画像を配置すると、角が丸いTABLEができます
このTABLEを角円TABLE(かくまるてーぶる)といいます

画像の用意

まずはTABLEの四隅に入れる画像を作成します。
画像作成ソフトで円を描いて塗りつぶします。(1)〜(4)をそれぞれ名前をつけてGif画像として保存します。

※左の図は300%に拡大した状態です。

TABLEに配置しよう

左上(r1.gif)、右上(r2.gif)、左下(r3.gif)、右下(r4.gif)にGIF画像が入っています。
わかりやすいようにborderを表示しています。

<table width="400" border="0" cellspacing="0" cellpadding="0" bgcolor="#FEE9C8">
<tr>
<td width="15" valign="top"><img src="r1.gif" width="15" height="15"></td>
<td width="370"><br></td>
<td width="15" valign="top" align="right"><img src="r2.gif" width="15" height="15"></td></tr>
<tr>
<td width="15"><br></td>
<td width="370">

ここに文字をいれます

</td>
<td width="15"><br></td></tr>
<tr>
<td width="15" valign="bottom"><img src="r3.gif" width="15" height="15"></td>
<td width="370"><br></td>
<td width="15" valign="bottom" align="right"><img src="r4.gif" width="15" height="15"></td></tr></table>

TABLEの背景色(赤色の数値)を、画像を作った時に塗りつぶした色と同じ色にします。

空のセルにはNetscapeなどのブラウザでは色が付きませんので、<br>や全角スペース、透明なGif画像などを入れます。(現実的には透明Gif画像しかオススメしません^^; スミマセンそのうち補足させてもらいますm(__)m)



borderを0にすると円形のTABLEのできあがり♪



角円TABLE用素材

左の図でいうと、山吹色の部分を透過にした素材を用意しましたのでご自由にダウンロードしてお使いください^^

周りの白い部分は透過になっていませんので、白系の背景色にしか使えませんが、TABLEの背景色に淡い色を指定すればどんな色の角円TABLEも作ることができる、わたしてき魔法のパーツです(笑)


bgcolor="#EEF6BE"
bgcolor="#D8ECFA"
bgcolor="#FDE9F2"
上のような感じで、TABLEの背景色(淡い色)を自由に指定できます。
もちろん幅も自由に変更できる、魔法のパーツをダウンロード(笑)[table.lzh]




bgcolor="#EEF6BE"
bgcolor="#D8ECFA"
bgcolor="#FDE9F2"
こっちはNetscape4.7ではうまく表示されません。
それでもこのパーツをダウンロード [table2.lzh]


※補足 ↑透過Gifの上に透過Gifを重ねられないというNetscape4.7のバグです。でも文字が崩れることはないですし、このページはNN4.7でもちゃんと見えると思います。裏技です(^^;) 近々ページ作りますね。


そのほか、TABLEセット素材が「材料」においてあります。



| レシピトップへ |
| トップページへ |
-- CopyRight(C) ホームページキッチン 2006 Haruyo --