|
|
| アドレス帳 |
|
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー |
a |
| b |
| c |
| d |
| e |
| f |
|
■adress-book
ホームページ作成全般でよく使われる。
システム手帳のように目次とページが一体化していて、目次のリンクを押すとページが変わる。
<frame>タグを使った方法が一般的だったが、SEO対策のために<table>タグが使われるようになる。 |
アドレス帳風リンク。
アドレス帳をめくる様な操作でページが変わるようにする。
メニュー(目次等)によく使われます。
ここではテーブルタグを使用して、同じ形をした表を何枚か作り、そのリンク同士を繋げていきます。
(フレームを使用すればもっと簡単に作れますが、フレームページはSEOに適さないため、現在では敬遠されています。) |
|
①まず下のように３行２列のテーブルを作る。
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> |
②次に左の列のセルを全て結合(rowspan="3")し、下図のようなテーブルにする。
セルの縦結合：<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> |
③1+2+3セルと４セルの配色を同じにし５セルと６セルは違う色にする。
また、表の罫線を0ピクセルに(cellspacing="0")、枠を非表示にする。
これで４というアドレスを開いたときのページが完成。
セルの背景設定：<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> |
④同じようにして、５のアドレス、６のアドレスのテーブルを作成。(４のＨＴＭＬをコピーし配色を変えるだけでよい)
４、５、６、のアドレス帳をそれぞれ別のＨＴＭＬファイルとして保存する。(ここでは４のアドレス帳を保存したファイルを「4.html」とし、５と６は同様に「5.html」「6.html」と名づけて保存。)
|
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.htmlへのリンク、６の文字に6.htmlへのリンクを張る。
「6.html」の４の文字に4.htmlへのリンク、５の文字に5.htmlへのリンクを張る。
〈この回を参考にしよう！〉
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> |
| →次へ |
|
│