HOME＞３Ｄテーブル
| kon`s produce webdesign lecture! | |
| <<｜３Dテーブル｜3Dテキスト｜３Dドラム｜>> |
| ３Dテーブル | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
基本編はどうでしたか？ レイアウトや文章などの基本はデザインの行方を左右するものなので重要です。 中級編ではページの細部によく使われるテクニックを中心に紹介していきます。 基本編のテクニックと組み合わせる事でデザインの幅を広げることができます。 まずは下のようなHTMLで立体を表現する手法。(勝手に３Dテーブルと呼んでいます)
|
■3D-table HTMLの表<table>タグを使ってホームページに奥行きを持たせます。 通常のホームページデザインでは立体表現に画像素材を使いますが、このテクニックを使うと作成する手間が省けます。 テーブルなので各色セルの色を自由に変えられ、更にセル内に文字を記述できるので、アイコンや簡易吹き出しのデザインにも使われます。 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
それでは作成してみましょう。 ホームページ作成ツールを使えば、以下の手順で 簡単に作ることができます。 HTMLタグ打ちで作る方は、各段階のタグが右に記述してあるので参考にしてください。 ①３行３列のテーブルを作成
立体の様子をあらかじめラフスケッチで決めておくと良いでしょう。 ちなみに上の例では１，２，４，５をひとつの■とし、手前にあるように見せます。 ６，９，８は奥の■です。 |
①のHTMLタグ <TABLE border="1" width="114" height="117"> <TBODY> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> <TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> <TR> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
②各行各列の大きさの割合を右のようにする。 比率は中心のセルほど大きく。
ここで二つの■が重なる５の部分を大きくします。 これで立体が違和感なくデザインできます。 セルの幅・高さの指定>>> <TD height="高さ" width="幅">セル</TD> |
②のHTMLタグ <TABLE border="1" width="114" height="117"> <TBODY> <TR> <TD height="18" width="15">1</TD> <TD height="18" width="60">2</TD> <TD height="18" width="15">3</TD> </TR> <TR> <TD height="60" width="15">4</TD> <TD height="60" width="60">5</TD> <TD height="60" width="15">6</TD> </TR> <TR> <TD width="15">7</TD> <TD width="60">8</TD> <TD width="15">9</TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
③各セルの背景色を設定。 セル１，２，４，５は明るい色。 ６、８，９は相対的に暗い色に
ここでは「奥の立体は影になり暗くなる」ように見せます。 (色の明暗や色番号はグラデーション色名表参考) セルの色指定>>> <TD bgcolor="色番号">セル</TD> |
③のHTMLタグ <TABLE border="1" width="114" height="117"> <TBODY> <TR> <TD height="18" width="15" bgcolor="#ff6666">1</TD> <TD height="18" width="60" bgcolor="#ff6666">2</TD> <TD height="18" width="15">3</TD> </TR> <TR> <TD height="60" width="15" bgcolor="#ff6666">4</TD> <TD height="60" width="60" bgcolor="#ff6666">5</TD> <TD height="60" width="15" bgcolor="#ae0000">6</TD> </TR> <TR> <TD width="15">7</TD> <TD width="60" bgcolor="#ae0000">8</TD> <TD width="15" bgcolor="#ae0000">9</TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
④表の枠線を非表示に。セルの罫線を０ピクセルにする。 テーブルの枠表示・罫線の設定>>> 枠設定：<TABLE border="枠線の幅"> 罫線設定：<TABLE cellspacing="罫線の幅"> 〈この回を参考に！〉 テーブル使用法 グラデーション色名表 |
④のHTMLタグ <TABLE width="114" height="117" cellspacing="0"> <TBODY> <TR> <TD height="18" width="15" bgcolor="#ff6666"></TD> <TD height="18" width="60" bgcolor="#ff6666"></TD> <TD height="18" width="15"></TD> </TR> <TR> <TD width="15" bgcolor="#ff6666" height="67"></TD> <TD width="60" bgcolor="#ff6666" height="67"></TD> <TD width="15" bgcolor="#ae0000" height="67"></TD> </TR> <TR> <TD width="15" height="17"></TD> <TD width="60" bgcolor="#ae0000" height="17"></TD> <TD width="15" bgcolor="#ae0000" height="17"></TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| →次へ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロの技！ウェブデザインの資料集 | ||||||||||||||
特集ページの構成 キャンペーン、特集ページ等はコンテンツページのデザインとは違い、特集内容を大々的に強調する事ができる。 このページの場合も中央上部にイメージを配置することで商品を強調している。 また、商品の清潔感を印象づけるように寒色系の配色を使っている。 特に注目すべきなのは画面最上部、ロゴの横のナビゲーション。 矢印型のナビゲーションになっていて手順が一目で分かるようになっている。 手順を説明する必要がなく便利。 |
||||||||||||||
| チュートリアルー第21回 | ||||||||||||||
立体感を出そう！ チュートリアルもいよいよ中級編に突入して参りました。 基本編ではウェブデザインでよく使われる、比較的ポピュラーなテクニックを扱ってきましたが、これからは少し応用的な部分に入って行きます。 今回はテーブルタグを使った立体の表現です。 ①チュートリアル・サンプルページのメニュー部分のテーブルを下のように変更します。→枠線・罫線＝０に。
②１の部分がメニュー部分。 ２，３，４がその影、５、６の部分は背景と同色にします。 ③もとのメニュー部分のテーブルをコピーし、１の部分に貼り付けます。  |
||||||||||||||
| topics | ||||||||||||||
| このテクニックはHTMLのみで立体的な表現ができるし、いちいち画像作成しなくてもよいのでいろいろな所で使われている。 例えば下のような吹き出しとしても使える。
|
||||||||||||||
HOME＞３Dテーブル
| kon`sproduce All rights reserved |
