HOME>アドレス帳

kon`s produce webdesign lecture!
<<|アドレス帳|テンプレート集ユーザビリティ>>
   
アドレス帳



ーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
a
b
c
d
e
f

■adress-book

ホームページ作成全般でよく使われる。
システム手帳のように目次とページが一体化していて、目次のリンクを押すとページが変わる。

<frame>タグを使った方法が一般的だったが、SEO対策のために<table>タグが使われるようになる。
アドレス帳風リンク。
アドレス帳をめくる様な操作でページが変わるようにする。
メニュー(目次等)によく使われます。

ここではテーブルタグを使用して、同じ形をした表を何枚か作り、そのリンク同士を繋げていきます。
(フレームを使用すればもっと簡単に作れますが、フレームページはSEOに適さないため、現在では敬遠されています。)



@まず下のように3行2列のテーブルを作る。
1 4
2 5
3 6
1,2,3セルがページ部分、4,5,6が目次部分になります。




<TABLE border="1">
<TBODY>
<TR>
<TD width="60" height="30">1</TD>
<TD height="30">4</TD>
</TR>
<TR>
<TD width="60" height="30">2</TD>
<TD height="30">5</TD>
</TR>
<TR>
<TD width="60" height="30">3</TD>
<TD height="30">6</TD>
</TR>
</TBODY>
</TABLE>



A次に左の列のセルを全て結合(rowspan="3")し、下図のようなテーブルにする。

1+2+3 4
5
6
セルの縦結合:<TD rowspan="結合するセル数">




<TABLE border="1">
<TBODY>
<TR>
<TD width="60" height="30" rowspan="3">1+2+3</TD>
<TD height="30">4</TD>
</TR>
<TR>
<TD height="30">5</TD>
</TR>
<TR>
<TD height="30">6</TD>
</TR>
</TBODY>
</TABLE>



B1+2+3セルと4セルの配色を同じにし5セルと6セルは違う色にする。

また、表の罫線を0ピクセルに(cellspacing="0")、枠を非表示にする。


これで4というアドレスを開いたときのページが完成。

1+2+3 4
5
6
セルの背景設定:<TD bgcolor="色番号">セル</TD>





<TABLE cellspacing="0">
<TBODY>
<TR>
<TD width="60" height="30" rowspan="3" bgcolor="#ffff66">1+2+3</TD>
<TD height="30" bgcolor="#ffff66">4</TD>
</TR>
<TR>
<TD height="30" bgcolor="#ff6666">5</TD>
</TR>
<TR>
<TD height="30" bgcolor="#9999ff">6</TD>
</TR>
</TBODY>
</TABLE>



C同じようにして、5のアドレス、6のアドレスのテーブルを作成。(4のHTMLをコピーし配色を変えるだけでよい)

 4、5、6、のアドレス帳をそれぞれ別のHTMLファイルとして保存する。(ここでは4のアドレス帳を保存したファイルを「4.html」とし、5と6は同様に「5.html」「6.html」と名づけて保存。)
1+2+3 4
5
6

1+2+3 4
5
6



5.html
<TABLE cellspacing="0">
<TBODY>
<TR>
<TD width="60" height="30" rowspan="3" bgcolor="#ff6666">1+2+3</TD>
<TD height="30" bgcolor="#ffff66">4</TD>
</TR>
<TR>
<TD height="30" bgcolor="#ff6666">5</TD>
</TR>
<TR>
<TD height="30" bgcolor="#9999ff">6</TD>
</TR>
</TBODY>
</TABLE>
6.html
<TABLE cellspacing="0">
<TBODY>
<TR>
<TD width="60" height="30" rowspan="3" bgcolor="#9999ff">1+2+3</TD>
<TD height="30" bgcolor="#ffff66">4</TD>
</TR>
<TR>
<TD height="30" bgcolor="#ff6666">5</TD>
</TR>
<TR>
<TD height="30" bgcolor="#9999ff">6</TD>
</TR>
</TBODY>
</TABLE>



「4.html」を編集する。
5の文字に5.htmlへのリンク、6の文字に6.htmlへのリンクを張る。

同様に「5.html」の4の文字に4.htmlへのリンク、6の文字に6.htmlへのリンクを張る。
「6.html」の4の文字に4.htmlへのリンク、5の文字に5.htmlへのリンクを張る。

1+2+3 4
5
6

〈この回を参考にしよう!〉
HTMLの基本
テーブル使用法




<html>
<title>4.html</title>
<body>
<TABLE cellspacing="0">
<TBODY>
<TR>
<TD width="60" height="30" rowspan="3" bgcolor="#ffff66">1+2+3</TD>
<TD height="30" bgcolor="#ffff66">4</TD>
</TR>
<TR>
<TD height="30" bgcolor="#ff6666"><A href="5.html">5</A></TD>
</TR>
<TR>
<TD height="30" bgcolor="#9999ff"><A href="6.html">6</A></TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
→次へ
プロの技!ウェブデザインの資料集
チュートリアルーその1
topics


HOME>アドレス帳

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





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