超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ 日記を書こう!

ホームページを作ったはいいが、これを更新していくのは、なかなか大変です。
とりあえず、日記帳を作っとけば毎日更新できるし、後から読んでほくそ笑むこともできますね。他の人に読んでもらおうなんて思う必要ありません。自己満足に徹しましょう。

では「日記帳」をつくりましょう・・・っとその前に、
さっきの <table> タグについてもうちょっと勉強してから。

<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

て書けば、こうなるよね。

これに罫線(枠)を入れるには <table border> を使います。

<table border >
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

外枠の太さを変えるには <table border=" "> を使います。
" " には数字(ピクセル数)が入ります。

<table border="8" >
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

セルの枠の太さを変えるには <table cellspacing=" "> を使います。
こちらも値はピクセル数です。

<table border="8" cellspacing="6">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

表の大きさを変えるには、横幅 <table width=" "> 、高さ <table height=" "> を使います。
値には、比率%またはピクセル数を指定します。

<table border="8" cellspacing="6" width="200" height="200">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

表のセルの中のデータの位置を指定するには、
横位置 <td align="left / center / right"> 、縦位置 <td valign="top / middle / bottom"> を使います。
行全部を指定するときは、<tr align> または <tr valign> です。

<table border="8" cellspacing="6" width="200" height="200">
<tr>
<td align="left">左</td>
<td align="center">真ん中</td>
<td align="right">右</td>
</tr>
<tr>
<td valign="top">上</td>
<td valign="middle">真ん中</td>
<td valign="bottom">下</td>
</tr>
<tr>
<td align="left" valign="top">左上</td>
<td align="center" valign="middle">ど真ん中</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>

真ん中
真ん中
左上 ど真ん中 右下

中央の列だけ幅が広いのは、文字数が左右の列より多いから。
文字数によって勝手にセル幅(高さも)が決まるみたい。

セルの大きさを指定するには、<td width=" " height=" "> を使います。
もちろん比率%ではなくて、ピクセル数も指定できます。

<table border="8" cellspacing="6" width="200" height="200">
<tr>
<td align="left" width="50" height="50">左</td>
<td align="center" width="100">真ん中</td>
<td align="right" width="150">右</td>
</tr>
<tr>
<td valign="top" height="100">上</td>
<td valign="middle">真ん中</td>
<td valign="bottom">下</td>
</tr>
<tr>
<td align="left" valign="top" height="150">左上</td>
<td align="center" valign="middle">ど真ん中</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>

真ん中
真ん中
左上 ど真ん中 右下

セルを連結するには、縦連結 <td rowspan=" ">、横連結 <td colspan=" "> を使います。
" " には連結するセル数を入れます。

<table border="8" cellspacing="6" width="400" height="200">
</tr>
<tr>
<td align="left" colspan="2">2つのセルを横連結</td>
<td align="right" rowspan="2">2つのセルを縦連結</td>
</tr>
<tr>
<td valign="top">上</td><td valign="middle">真ん中</td>
<tr>
<td align="left" valign="top" colspan="3">3つのセルを横連結</td>
</tr>
</table>

2つのセルを横連結 2つのセルを縦連結
真ん中
3つのセルを横連結

セルに色をつけるには、<td bgcolor="カラーネーム"> を使います。
背景に画像を挿入するには、<td background="ファイル名"> を使います。

<table border="8" cellspacing="6" width="400" height="200">
<tr>
<td bgcolor="red" align="left" colspan="2">2つのセルを横連結</td>
<td bgcolor="purple" align="right" rowspan="2">2つのセルを縦連結</td>
</tr>
<tr>
<td bgcolor="deeppink" valign="top">上</td>
<td bgcolor="green" valign="middle">真ん中</td>
</tr>
<tr>
<td background="koza_kabe1.gif" align="left" valign="top" colspan="3">3つのセルを横連結</td>
</tr>
</table>

2つのセルを横連結 2つのセルを縦連結
真ん中
3つのセルを横連結

以上、表に関するタグをいくつか紹介しました。
これらをふまえて、下の表をつくりました。
簡単ですね。

<table border="5" width="70%" align="center">
<tr height="40">
<td>2000年9月25日(月)くもりときどき晴れ</td>
</tr>
<tr>
<td>昨夜(ってゆうか今日)未明までホームページの更新をしていたので、仕事中眠くてしょうがなかった。<br>
幸い怖い上司はほとんど一日中会議で離席していたので、ちょっと気が楽だった。でもかえって眠かったかも。<br>
でも今晩もまたホームページの更新に没頭してしまった。もう1時過ぎてるじゃんかっ!寝よっと。</td>
</tr>
</table>
<p>
<table border="5" width="70%" align="center">
<tr height="40">
<td>2000年9月24日(日)くもりのち雨</td>
</tr>
<tr>
<td>今日の目玉はなんといっても女子マラソンだっ!<br>
朝4時頃までホームページ更新してたけど、マラソン見るために7時に起きた。<br>
やったー!!高橋尚子<font color="goldenrod">★金メダル★</font>ちょー感動感動!<br>
35km過ぎのスパートは見事だったな。涙がちょちょぎれそーだった。<br>
34号もがんばろーってことで、関係ないけどホームページの更新がんばった。<br>
そういえば、のっとり団は静かだった。</td>
</tr>
</table>
<p>
<table border="5" width="70%" align="center">
<tr height="40">
<td>2000年9月23日(土)雨</td>
</tr>
<tr>
<td>今週は残業続きで、ホームページの更新できなかったので、ほとんど外出しないでPCの前に座ってた。ちょっとは進んだかな^^<br>
あんまりオリンピック興味なかったけど、やっぱりサッカーは燃えた。<br>
中田がPK外したのは残念だったけどBEST8は立派だな。<br>
のんきにサッカー見てたら、掲示板にBBSのっとり団が現れた。がんばってレスしないとのっとられちまう。</td>
</tr>
</table>

2000年9月25日(月)くもりときどき晴れ
昨夜(っていうか今日)未明までホームページの更新をしていたので、仕事中眠くてしょうがなかった。
幸い怖い上司はほとんど一日中会議で離席していたので、ちょっと気が楽だった。でもかえって眠かったかも。
でも今晩もまたホームページの更新に没頭してしまった。もう1時過ぎてるじゃんかっ!寝よっと。

2000年9月24日(日)くもりのち雨
今日の目玉はなんといっても女子マラソンだっ!
朝4時頃までホームページ更新してたけど、マラソン見るために7時に起きた。
やったー!!高橋尚子★金メダル★ちょー感動感動!
35km過ぎのスパートは見事だったな。涙がちょちょぎれそーだった。
34号もがんばろーってことで、関係ないけどホームページの更新がんばった。
そういえば、BBSのっとり団は静かだった。

2000年9月23日(土)雨
今週は残業続きで、ホームページの更新できなかったので、ほとんど外出しないでPCの前に座ってた。ちょっとは進んだかな^^
あんまりオリンピック興味なかったけど、やっぱりサッカーは燃えた。
中田がPK外したのは残念だったけどBEST8は立派だな。
のんきにサッカー見てたら、掲示板にBBSのっとり団が現れた。がんばってレスしないとのっとられちまう。

あとは、セルにお好みで色をつければそれらしくなりますね。

毎日タグを気にしながら日記を書くのはめんどうだけど、ようは <p> と <p> の間をコピーして、<td>〜</td> に挟まれた部分を書けばいいだけ。簡単だよ。

そういえば、たぶん言ってなかったと思うけど <p> は単独でも使えます。<p>〜</p> は間に文章を挟んで段落を作るとき。単独で使えば1行空けることができます。

ソースの紹介は省略します。
ブラウザで表示するとこんな感じになるかな。

ブラウザ画面

日記帳のポイントは、新しい日付を上にすること。
ブラウザに表示されるのは上からだからね。
リンクも上に持ってきました。日記は下の方まで続くので、いつまでたっても他のページに行けなくなっちゃうからね。


■このページに出てきたタグ■

タグ名プロパティ説明
<table>〜</table>borderピクセル数外枠の太さを指定。
cellspacingピクセル数セルの枠の太さを指定。
widthピクセル数表の横幅を指定。
表の横幅を指定する。画面幅に対する比率で指定。
heightピクセル数表の高さを指定。
表の高さを指定する。画面長に対する比率で指定。
<tr>〜</tr>alignleft行のセルの中のテキスト位置左寄せ(デフォルト)
center行のセルの中のテキスト位置真ん中
right行のセルの中のテキスト位置右寄せ
valigntop行のセルの中のテキスト位置上
middle行のセルの中のテキスト位置真ん中(デフォルト)
bottom行のセルの中のテキスト位置下
<td>〜</td>alignleftセルの中のテキスト位置左寄せ(デフォルト)
centerセルの中のテキスト位置真ん中
right行のセルの中のテキスト位置右寄せ
valigntop行のセルの中のテキスト位置上
middle行のセルの中のテキスト位置真ん中(デフォルト)
bottom行のセルの中のテキスト位置下
widthピクセル数セルの横幅を指定。
セルの横幅を指定。画面幅に対する比率で指定。
heightピクセル数セルの高さを指定。
セルの高さを指定する。画面長に対する比率で指定。
rowspan連結するセル数セルの縦連結
colspan連結するセル数セルの横連結
bgcolorカラーネームセルの背景色を指定。
backgroundURL / ファイル名セルの背景に挿入する画像を指定。

このページで紹介したプロパティと値だけ整理しています。<td> タグにあるプロパティの中にも <table> タグや <tr> タグに使えるものもあります。
例えば、bgcolor 属性を <table> タグで使えば、表全体の背景色を指定することが出来ます。