| |||||||||||||||||||||||||||||||||||||||||||||||||
Beaverland Music
|
ロマンチックな雰囲気
をかもし出そう！ GIFアニメーション by Akira Kato
October 25, 2003
コードは次のようになっています。
<div style="height:600px; padding-top:355px;
background-image:url(../images/sunset04.jpg);">
<table width="404" height="245" border="0"
<tr><td colspan="5" width="404" height="10"></td></tr>
<tr height="65">
<td width="6"></td>
<td><img src="../images/torchanm.gif" alt="An animated torch (torchanm.gif--34x65)" width="34" height="65"></td>
<td width="306"></td>
<td><img src="../images/torchan2.gif" alt="An animated torch (torchan2.gif--34x65)" width="34" height="65"></td>
<td width="24"></td>
</tr>
<tr height="170"><td colspan="5" width="404"></td></tr>
</table>
</div>
コーディング・シートの色は上のテーブルの色と対応しています。 実はこの写真は３層からなっています。 一番下にディビジョン・タグ(DIV)で指定した夕暮れの写真がバックグラウンドとして表示されています。 その上にテーブル・タグ(TABLE)で設定したテーブルが乗っています。 そのテーブルのバックグラウンドとして、下に示す、カップルが夕食をとっている写真が使われています。
この写真は、ご覧のように透過色を持っています。従って、夕暮れの写真が透過色の部分を通して見えるわけです。 ２つのトーチはこの写真の上に乗っているわけです。このトーチはGIFアニメーションですが、これも透過色の部分を持っています。
<DIV> タグを使ってテーブルの位置を指定する。 <DIV> タグはとても便利なタグで、これを使うことによって、このページの一部を指定して、上のように写真を表示したり、 また、いろいろなトリックを使って面白く表示することが出来ます。 スタイル・シートの使い方を知っていると、<DIV> タグと一緒に使うことにより、いろいろなことが出来ます。 すぐ上のタイトルなども、スタイルシートを使ってバックグランドを指定し、その上に文字を表示しています。詳しいことは、 下にリンクを貼ってありますので、それをクリックして読んでください。 上の例では、テーブルの位置を<DIV> タグを使って指定しています。この場合のテーブルは、カップルの写真とちょうど同じ大きさに設定されています。
<div style="height:600px; padding-top:355px;
background-image:url(../images/sunset04.jpg);">
<table . . . .>
 </table> </div> 何も指定しないと、カップルの写真は、夕暮れの写真の左上の角に重なるように表示されます。 それで、上のように、次のコードが書き加えられています。 padding-top:355px; こうすることによって、カップルの写真が、夕暮れの写真のトップから３５５ピクセル下がったところに表示されます。 このカップルの写真の大きさは、縦が２４５ピクセルで、横が４０４ピクセルです。 従って、３５５に２４５を足すと、６００ピクセルになるわけで、この数字は、次のコードの数字と同じになります。 height:600px; つまり、上の “height” というのは、この場合、夕暮れの写真の縦の長さになります。この長さが、<DIV> タグで指定したディビジョン、 つまり、このページの夕暮れの写真が乗っている部分の縦の長さということになります。
関連リンク
| ||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||
