最後に、テキストエリアを作ります。
ここでのポイントは、テキストエリアは３段目のテーブルの中に新しいテーブルを作る、ということです。
「横幅３００、、枠の太さ０、余白０、間隔０、２行１列」のテーブルを作ります。
タグは
--------------------------------------------------------------------
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
--------------------------------------------------------------------
上の段はタイトル入力欄
下の段はテキスト入力欄
と考えてください。
タイトル入力欄に色をつけ、「■更新履歴」と入力。
テキスト入力欄に色をつけ、適当な言葉を入力してみます。
テキスト入力欄ですが、余白が０となっているので、スペースを入れたほうが良いと思います。
さて、これをタグにしますと、
まず、スタイルシートで文字の大きさや、色を変更するので、<head></head>の間に
--------------------------------------------------------------------
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
body,td,th {
font-size: 12px;
}
-->
</style>
--------------------------------------------------------------------
を埋めて、bodyに
--------------------------------------------------------------------
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#663300"> <span class="style1">■更新履歴</span></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><br> ２００４年５月某日 頑張った。<br>
２００４年６月某日 あまり頑張らなかった。<br>
２００４年７月某日 気合が足りないため入院</td>
</tr>
</table>
--------------------------------------------------------------------
を埋めます。
見た目はこう。
さらに、このテーブルを今まで作っていたページの３段目に埋めて完成です。
完成図
このページのタグを一括して載せるので参考にして下さい。（更新履歴のテーブルに「align」タグを加えて位置を調整しています）
--------------------------------------------------------------------
<html>
<head>
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<script Language="JavaScript"><!--
function swImg(iName,str)
{
document.images[iName].src = str;
}
// --></script>
<style type="text/css">
<!--
body {
background-color: #E1D7A4;
}
.style1 {color: #FFFFFF}
body,td,th {font-size: 12px;}-->
</style></head>
<body>
<div align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5"><img src="../img-maiking/rogo2.gif" width="700" height="100"></td>
</tr>
<tr>
<td width="268" bgcolor="#663300"> </td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img1','../img-maiking/bottan-top2.gif')" onMouseout="swImg('img1','../img-maiking/bottan-top.gif')"><img src="../img-maiking/bottan-top.gif" width="108" height="35" name="img1" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img2','../img-maiking/bottan-design2.gif')" onMouseout="swImg('img2','../img-maiking/bottan-design.gif')"><img src="../img-maiking/bottan-design.gif" width="108" height="35" name="img2" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img3','../img-maiking/bottan-about2.gif')" onMouseout="swImg('img3','../img-maiking/bottan-about.gif')"><img src="../img-maiking/bottan-about.gif" width="108" height="35" name="img3" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img4','../img-maiking/bottan-bbs2.gif')" onMouseout="swImg('img4','../img-maiking/bottan-bbs.gif')"><img src="../img-maiking/bottan-bbs.gif" width="108" height="35" name="img4" border="0"></a></td>
</tr>
<tr bgcolor="#996633">
<td colspan="5"> <br>
<br>
<br>
<table width="300" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#663300"><div align="left"><span class="style1">■更新履歴</span></div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="left"><br>
２００４年５月某日 頑張った。<br>
２００４年６月某日 あまり頑張らなかった。<br>
２００４年７月某日 気合が足りないため入院</div></td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br></td>
</tr>
</table>
</div>
</body>
</html>
--------------------------------------------------------------------
以上で、第一段階は終了です。
→→「TIPS トップページを利用した他のページの作り方」参照
→→「TIPS 全てのホームページはテーブルタグで書ける！？」
参照
このままでも、味があってなかなか良いページであると思いますが、
このページをもっとスタイリッシュに改造していくことで、ページのデザインについて学んでいきましょう。
次へ（）
戻る |
