角丸のテーブルを作成する

角の丸い(Rのついた)テーブルは派手さはないですが、コラム等の囲み記事などに使用すると、見栄えの点で大変効果的です。

■ 角丸に使うイメージの作成

Fireworksを起動し、4等分できるサイズ(右の例では30×30ピクセル)の新規キャンバスを作成し、その中央にキャンバスと同じサイズの円を描画します。その際、オブジェクトカラーをテーブルのカラーに、キャンバスのカラーをページの背景カラーに一致させておきます。

■ テーブルの挿入

【挿入】バーの【レイアウト】カテゴリで【スタンダードビュー】にし、3行3列のテーブルを作成します。【テーブルの挿入】ボタンをクリックし、ダイアログで「列」「行」を3、「セル間隔」「セル余白」を0、「ボーダー」を0、「幅」を適当な値に設定し、ドキュメントにテーブルを挿入します。

■ イメージの配置

作成したテーブルの4隅に対応する角丸イメージを配置し、4つのイメージに対しプロパティインスペクタで【縦間隔】【横間隔】の値を0に設定します。また、各セルのプロパティインスペクタで左上のセルは【横】を「左」、【縦】を「上」というように、4隅のセルに対して行揃えの設定を行っておきます。さらに、真ん中の列の横幅を固定させるため、中央下段のセルにスペーサーイメージを追加します。

■ テーブル・ページのカラー設定

 
 

■ コラム 「楽しい勉強」     2003.05.01

昨年から、デザイン系のものを少しづつ作りためています。

Flash, Dreamweaver, Fireworks など、主にMacromedia のソフトを使ったものですが、操作性が気にいっています。

元々は子供たちにコンピュータの楽しさを教えるために、視覚的に楽しいもの・綺麗なものを作って興味を持たせようと思って作りためてきたのですが、これまでゆっくり教えている暇がなかったので、今後どの程度受け入れてもらえるのかというのが課題です。

高校1年生の長男の授業では、Word, Exel の使い方が始まり、学校教材用のタイピングソフトが数年前から自宅で使っているものと同じ「特打」で、長男は「この程度なら楽にできるけど、何だかなぁ」と、もう少し進んだことをやってみたそうです。

こうやって今子供たちのために、テキスト形式でホームページを作成していると、数年前、高校授業用にメールの送受信やHTMLの作り方のテキストを作ったことを思い出します。

 
 

角イメージに合わせて、テーブル・ページ背景を設定します。それぞれカラーパレットのスポイトツールで角のイメージの内部部分、あるいは外側部分をクリックすれば、簡単に同じ色を取得することができます。
テーブル(セル)の背景色の設定は、スタンダードビューモードでしか行えないので、注意しましょう。

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box