HOME＞３Dドラム
| kon`s produce webdesign lecture! | |
| <<｜３Dドラム｜アドレス帳｜テンプレート集｜>> |
| ３Dドラム | ||||||||||||||||||||||||||||||||||
HTMLの立体表現でもっとも多く、しかもさりげなく登場するのがこの３Dドラムです。 ここでは円柱デザインをとりあげていますが、実際は形を問わず使われています。 このテクニックをいかに有効に使うかがデザイナーの手腕の問われる所でもあります。 |
■3d-doram
3Dテーブルの応用。 テーブルタグと配色によって円柱のような形を表現する。 これ以外にもテーブルの配色を使った立体的表現は多くある。 |
|||||||||||||||||||||||||||||||||
テーブルタグを使用して、平面の表現が多いＨＴＭＬに奥行きをもたせたような錯覚を生ませる。 ①１行５列のテーブルを作成
|
<TABLE border="1" height="77"> <TBODY> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TD>5</TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||
②各行各列の大きさの割合を右のようにする。 比率は中心のセルほど大きく。
|
<TABLE border="1" height="77"> <TBODY> <TR> <TD width="5">1</TD> <TD width="15">2</TD> <TD width="25">3</TD> <TD width="15">4</TD> <TD width="5">5</TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||
③各セルの背景色を設定。 ここでは中心セル３は明るい色。 ２→１、４→５は相対的に暗い色に
セルの色指定：<TD bgcolor="色番号">セル</TD> |
<TABLE border="1" height="77"> <TBODY> <TR> <TD width="5" bgcolor="#46005e">1</TD> <TD width="15" bgcolor="#d042ff">2</TD> <TD width="25" bgcolor="#eeb9ff">3</TD> <TD width="15" bgcolor="#d042ff">4</TD> <TD width="5" bgcolor="#46005e">5</TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||
④表の枠線を非表示に。セルの罫線を０ピクセルにする。 罫線の指定；<TABLE cellspacing="罫線の太さ"> 〈この回を参考にしよう！〉 3Dテーブル グラデーション |
<TABLE height="77" cellspacing="0"> <TBODY> <TR> <TD width="5" bgcolor="#46005e"></TD> <TD width="15" bgcolor="#d042ff"></TD> <TD width="25" bgcolor="#eeb9ff"></TD> <TD width="15" bgcolor="#d042ff"></TD> <TD width="5" bgcolor="#46005e"></TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||
| →次へ | ||||||||||||||||||||||||||||||||||
| プロの技！ウェブデザインの資料集 | |
基本的事項を押さえたページ このページはとても「普通」なページ。 特筆すべき優秀なデザインはないが、基本的事項をよく押さえてあるので、お手本とするには良いページだ。 デザインとしては上部のロゴとイメージが無難で好感が持てる。 レイアウトも2段でわかりやすくなっている。 コンテンツが少ないので必要のないナビゲーションはいらない。 サイトマップ・ページについての説明・お問い合わせが上部についてあるのはユーザーへの配慮。この基本事項はどんなページでも押さえておきたい。 |
|
| チュートリアルー第23回 | |
円柱を作ろう！ 前回は文字だけをつかって立体的なデザインをしました。 今回はテーブルタグをつかって円柱のようなデザインしましょう。 ①チュートリアル・サンプルページの「whats ...」の部分を使用。→「whats...」文字の左のセルを５～７セルに分割。 ②分割したセルの幅は中心のセルほど大きくなるようにする。 ③中心のセル背景は白に近い色に、端のセルはオレンジにグラデーションする。  |
|
| topics | |
| nodata... |
HOME＞３Dドラム
| kon`sproduce All rights reserved |
