ファイル【colct1.htm】のHTML作成
フォルダ【colct】内にファイル【colct1.htm】を作成する。
HTML Table Builderに背景画面色・表色・セル色・cellpaddingに下図のデータを入力し下右図のとおり
セルＡ３に z を入力してHTMLを作成する。
 
出来上がったHTMLを【colct1.htm】のメモ帳に貼り付け上書き保存する。
画像のサイズ指定
画像はサイズ(pixel)を指定しなくても画像が表示されがHTMLの決まりでは指定することになっている。
指定すると画像の表示までの時間が早まりるので指定する方が良い。
ここでは良い使い方ではないが実際の画像のサイズ(240Ｘ180pixel)より小さい値(200Ｘ150pixel)を指
定し画像を縮小して表示している。
表の罫線の表示
表の背景色とセルの背景色を変えると表の背景色が表の罫線色として現れる。cellspacingの値が罫線の
幅に相当する。cellspacingの値を指定しない場合は規定値の2pixelが罫線の幅になる。
次の青文字部を参考に【colct1.htm】を書き換える。
【colct1.htm】完成サンプル
<html lang="ja">
<head>
<title>コレクション</title>
<style type="text/css">
<!--
@import url(qqq.css);
body{font-size:22pt;color:black;background-color:lavender}
table{background-color:silver;width:750px}
tr{background-color:mintcream}
td{font-size:18pt}
img{width:200px;height:150px;float:left}
-->
</style>
</head>
<body>
<div align="center">
大切なコレクションを紹介します。<br><br>
<table cellpadding="8">
<tr><td>
<a href="colct1.jpg"><img src="colct1s.jpg"></a>
<br><br>
拾ったものです。名前は分かりません。
</td></tr><tr><td>
<a href="colct2.jpg"><img src="colct2s.jpg"></a>
<br><br>
これも拾いました。名前も分かりません。
</td></tr><tr><td>
<a href="colct3.jpg"><img src="colct3s.jpg"></a>
<br><br>
これも何だかサッパリ分かりません。<br>
不思議なものです。
</td></tr>
</table>
</div>
</body>
</html>
解説
１．td{font-size:16pt}
tdタグ部の文字サイズを１８ポイントから１６ポイントに変更
２．<td colspan="2" align="center">
tdタグのalign属性でそのタグ内の文字・画像の配置を設定する。
align属性の値がleftの場合：左揃え
align属性の値がcenterの場合：中央揃え
align属性の値がrightの場合：右揃え
３．<img src="pet1s.jpg" style="float:left"><br><br><br>ポチです。
imgタグで画像【pet1s.jpg】を表示する。
src属性の値（url）は表示する画像ファイルの保存場所と画像ファイル名を/で連結して
示すが画像を呼び出すHTMLファイルと画像ファイルが同じフォルダ内にあるので
src="pet1s.jpg"のとおり保存場所は記述する必要がない。
スタイルシートのfloat属性で画像の配置と文字の回り込みを設定する。
float属性の値がleftの場合：画像は左、文字は画像の右に配置される。
float属性の値がrightの場合：画像は右、文字は画像の左に配置される。
スタイルシート解説参照 float
タグ解説参照 <td>タグ <img>タグ
|