ホームページビルダー・グレート初心者講座

　角の丸い表の作成

表を使ったレイアウトで、画像を組み合わせて角のまるい表を作ってみましょう。

　丸みのある表

丸みのある表とは下のようなもので、当サイトの枠の角もそれで出来ています。
普通の表はなんだか味気ないので、このような表を使ってちょっとデザインしてみましょう。
ここで紹介する他に、このような表の使い方をすればノートのようなデザインの表など自由自在に作成できます。


	角の丸い表です

　表の構造

表の構造は下のようになっていて、縦３、横３の表の４つ角に画像、その間にはセルに色を付けて丸い表に見せています。


	角の丸い表です

　表の作成

表を作成する
それでは作っていきましょう｡　まずは縦３、横３の表を作ります。

次に角の画像を作ります。　画像は縦横１０ピクセルで作成していますが、正方形ならどのサイズでもかまいませんが、なるべく小さなサイズで作ります。

ウェブアートデザイナーで画像を作成
ホームページビルダーについているウェブアートデザイナーで簡単に作れます。
ウェブアートデザイナーで作るには、まず新規作成で、縦横のサイズを１０ピクセルのキャンバスを作成します。

次に、「楕円ツール」の「塗りつぶしのみ」を使って好きな色を選択します。
そして、縦横２０ピクセルの真円を書きます。　これは下に現在の大きさが常に表示されているので、それを見ながら、「２０× ２０」になるように書きます。

円が書けたら、それぞれ下のように角の部分のみがキャンバスに入るように円を移動させ（これも下の数字を見ながら行います）次に「切り抜きツール」の四角形で切り抜きで、キャンバスの円を移動し表示されている部分のみ切り抜きます。　これも下の数字を見ながらちょうど「１０×１０」になるようにします。

このまま、下のほうの「切り抜き」ボタンを押すと、その部分のみが切り抜けるので、そのまま「WEB用保存ウィザード」を選択し、名前を付けて保存します。

あとは同じように円を移動させ、キャンバスのちょうどいい位置に来るように動かし、切り抜き、保存を繰り返し、下のように画像を切り出します。

　

画像を表に入れます
※表・セルのサイズを指定すると崩れてしまう原因になります。

表のセルに色をつけます
※表・セルのサイズを指定すると崩れてしまう原因になります。

罫線の幅を０、セルの余白を０、枠表示を無しに設定します。
※表・セルのサイズは動かさないで下さい。
表を右クリックし、属性の変更から、表のタブを選択し、その中の罫線の幅の項目に０を入れ、セルの余白の項目にも０、そのしたの枠表示のチェックボックスのチェックを外します。

これで完成です。　中心のセルに文字や画像など入れていけば、角の丸い表でデザインする事ができます。　この後も、表のサイズは手で変えないで下さい。

サイズを手で変えると、枠がずれてしまう事があるので、外側の表のサイズは入れないようにしましょう。

また、この真中のセルの中にさらに表を入れてもいいです。　その場合も外側の表やセルのサイズは触らず、中に入れた表のサイズだけを変更して下さい。
中のサイズを変更すれば、外側の表も自動的に合うサイズになります。

この他に中間のセルにも画像を使いたい場合、サイズを固定してもいいですが背景画像として画像を使えばより自由にデザインできます。
ただし、背景画像として使う場合は使う画像の幅や画像の位置などに注意し、場合によっては右寄せや左寄せなどを使って位置の調節を行いましょう。