HOME>テーブル使用法
kon`s produce webdesign lecture! | |
<<|テーブル使用法|グラデーション|マーカーを使用する|>> Lテーブルをキレイに見せる L題や項目の表現 Lレイアウトに使う |
テーブルの役割 | |||||||||||||||||||
■ウェブデザインでの<table>の役割 HTMLで<table>タグといえば「表」をつくるためのもの、という考えが一般的ではないでしょうか。 しかしウェブデザインにおいては、そんな使われ方をすることはあまりありません。 ジツはほとんどの<table>タグが右のような普通の「表」とはまったく違う使われ方をしています。 以下の<table>タグの使い方が解れば、ウェブサイトでいかに多く<table>タグが使われているか気が付くはずです。
■<table>タグをキレイに見せる テーブルタグは、普通に使うと上の「normal table」のように枠が立体的な表になります。 もちろんこのままでもいいのですが、ちょっと味気ないと思いませんか? 全体のデザインと調和がとれにくいこともあるでしょう。
右上のnormal tableも右の枠も、<table>タグを使
使い方によって大きな違いがでることが分かると思います。 では右の枠のようなテーブルを作ってみることにしましょう。 とても簡単です。
これで枠線がなくなります。次にセル(テーブルの一マス)ごとに背景を設定します。 セルの背景を白
セルの背景が設定できたら、今度は違う色を使用して、テーブル全体の背景を設定します。 全体の背景を黒にするなら<TABLE bgcolor="#000000"> 最後にテーブルの罫線を設定します。 罫線は通常なら枠の大きさとして表示されますが、枠が消えてしまっているため、全体の背景色の線が表示れます。 <TABLE bgcolor="#000000" cellspacing="1">とする。 これで白地に黒枠線のテーブルができたはずです。 このテクニックはウェブデザインでは非常に多く使われています。 「スタイルシート」とかつかってんじゃないの?と見せかけてジツはHTMLだけでできるんですね。
|
|||||||||||||||||||
→次へ |
プロの技!ウェブデザインの資料集 | |
画像の代用を考える オンライン「実践WEBデザイナー塾」 ウェブデザイン関連のページにしてはすごくシンプルな作り。 基本的にはテーブルで構成されていて、画像で立体感をだしている。 上部のグラデーションや右部の影は3Dドラムや3Dテーブルを使ってHTMLのみでもデザインできる。 |
|
チュートリアルー第15回 | |
テーブルをデザインしよう! 前回はテーブルタグとフォントタグでロゴ作成の応用をしました。 今回は左のテーブルタグの使い方を基本にしてデザインしてみたいと思います。 @メニューのロゴに当たる部分のテーブルを2行1列にします。 上のセルには「menu」のフォントを、下のセルにメニューの内容をコピー&ペースト。 A左のテーブル使用法をもとにテーブルを調整します。 ここでは枠線無し、罫線=2、下のセルの背景を白にします。 BここでAのテーブルを左よせにして、ページの右側には「what is,,,」の部分をもってきます。 テーブルの左寄せには<TABLE align="left">を使います。 下のように少しウェブデザインっぽくなってきました。 このようなデザインも基本的なタグの組み合わせでできているのです。 |
|
topics | |
nodata... |
HOME>テーブル使用法
kon`sproduce All rights reserved |