HOME>テーブル使用法

kon`s produce webdesign lecture!
<<|テーブル使用法|グラデーションマーカーを使用する>>
   Lテーブルをキレイに見せる
   L題や項目の表現
   Lレイアウトに使う
題や項目



■題や項目を表現する

 これもテーブルタグを使うが見た目にはそれと分からないテクニック。
先ほどののテーブルの使い方をちょっとアレンジするだけです。

 下のような帯枠の題と項目の組み合わせは、いろんなサイトでよく使われています。
こんどはこれをやってみましょう。今度はさっきよりもっと簡単です。

 まず2行1列のテーブルをつくり、枠線をさっきと同じく枠線を消します。
<TABLE border="1">のborder=""の部分を消去。

 次に上のセルだけに背景色を設定する。
<TD bgcolor="#ffcc66">

 下のセルには項目を入れる。終わり。

いろんなところで見かけるこの題や項目のテクニックもジツはこんなに簡単なんです。
 

題や項目を表現
項目1

項目2

項目3

<TBODY>
<TR>
<TD bgcolor="#ffcc66">題や項目を表現</TD>
</TR>
<TR>
<TD>●項目1<BR>
<BR>
●項目2<BR>
<BR>
●項目3</TD>
</TR>
</TBODY>
</TABLE>

→次へ
プロの技!ウェブデザインの資料集
コンテンツの繋がりはアドレス帳で
全国の求人情報『infoseek キャリア』


分野ごとにコンテンツを分け、アドレス帳風にリンクさせている。
配色はホワイトベースで「インフォシーク」感が出ている。
ただ、大小バナーが多すぎるのか目にちらつく。
画面中央の大バナーはページの可視面積が小さくなるなど損をしている感アリ。
チュートリアルー第16回
ナビゲーションを作ろう!

前回は基本的なテーブルデザインをしました。
今回は左の「題や項目」を表現する容量でサイトのナビゲーションを作ってみたいと思います。

ナビゲーションとういうのは簡単な「目次」のようなもので、自分の行きたいページや自分の今いるページを表すものです。
大体、ページ上部についています。

今回は題名の下部に帯状のナビゲーションを作ってみます。

@題名の下に1行4列のテーブルをつくります。→枠線無し、罫線=1。

A各セルには項目を表す記号、リンクを入れます。

ナビゲーションは多くのサイトが採用している要素です。
ナビゲーションからサイト内のどのページにも行けるように工夫しておけば、訪問者がサイト内で迷子になることは少くなります。




topics
nodata...

HOME>テーブル使用法

kon`sproduce All rights reserved
お問い合わせ





100MB無料ホームページ可愛いサーバロリポップClick Here!