５）セルカラーの調整
２行目のセルカラーを設定します。タイトルを作成するときにきちんとWebカラーをつかっていれば色が一致するはずです。もしずれるようならタイトルを修正するか、セルカラーの設定をタイトルのgifからサンプリング（セルカラーボタンからドラッグするとポインタがスポイトになるので、取りたいカラーをクリック）します。 |
 |
タイトル、フッター、セルのカラーが一致した
|
|
６）テーブルインテーブルの作成
２行目のセルにカーソルを入れ、[行数=1行 / 列数=１列 / 幅=100%
/ セル内余白=2 / セル内間隔=6 / ボーダー=0 ]のテーブルを挿入します。セル内間隔の数値がそのまま罫線の太さになります。
挿入されたら、内側のテーブルのセルにカーソルを入れ、プロパティパレットでセルカラー=白を設定します。 |
|
テーブルの枠組みができあがった
|
|
７）セルにテキストを入力
内側テーブルのセル内余白は0でも支障はありませんが、テキストがテーブルに接近しすぎてギチギチした印象になります。適度な数値を入れて余白を取った方が見やすくなります。 |
|
内側テーブルにテキストを入れて完成
|
|
今回のテーブルは縦にのびてもデザインが崩れないので、文字数が増えたりユーザーがブラウザの表示フォントを大きくしていてもレイアウトが崩れません。試しに完成データを開いて、ブラウザの表示フォントサイズを大きくしてみてください。
完成データはこちら>>
ただ単に文字を入力したタイトルはデータこそ軽いものの、見た目は芳しくありません。適度な修飾を施すことで、視覚的なアクセントになりつつ、重くならないグラフィックにすることが可能です。
次回はテーブルの上下左右に画像を入れた応用編です。 |
|
| 【Point】 |
124：グラフィックでテーブルを囲むときは、テキストサイズの変化に対応できるか確認！ |
|
