レイアウト
ここではレイアウトに使えるタグやテーブルを使った方法を紹介します。
エディタ(メモ帳)では２行文章を書いてもそれをホームページとしてブラウザで見ると１行で表示されてしまいます。
そこで２行で表示されるようにするには改行したいところで<br>を書きます。
| ||||||
| ||||||
改行
<br>文字や画像をページの中央に寄せるためのタグ、ラインのタグを以下に示します。
センタリング(中央寄せ)
<center>これだけでセンタリングできます。</center>→これだけでセンタリングできます。
線を引く
<hr size="5px" width="600px" color="blue" align="right">※hr以外は必要なものだけ書けばＯＫ。
size：線の太さ
width：線の長さ
color：線の色
align：線の配置 center(中央寄せ)、left(左寄せ)、right(右寄せ)
テーブルは線を表示しなければレイアウトの際に利用できます。
テーブルの詳しい作り方は[テーブル]のページを見てください。
以下に２つの例を示すので参考にしてみてください。工夫次第でいろいろ使い方があると思います。
◆文章と画像が混在する場合
 |
XXXX年1月1日 ・・・・・・・・・・・・・・・・・・ |
| XXXX年2月2日 ・・・・・・・・・・・・・・・・・・ |
 |
<table border="0">
<tr>
<td><img src="image/rayout_sample1.jpg"></td>
<td valign="top">XXXX年1月1日<br>・・・・・・・・・・・・・・・・・・</td>
</tr>
<tr>
<td valign="top">XXXX年2月2日<br>・・・・・・・・・・・・・・・・・・</td>
<td><img src="image/rayout_sample2.jpg"></td>
</tr>
</table>
◆丸い角の枠
角４つに画像を使っています。 これはいろいろ応用できるので考えてみてください。（形を変える。影をつける。等）
|
← |
|
<table cellspacing="0px" cellpadding="0px">
<tr>
<td><img src="image/corner1.gif" ></td>
<td bgcolor="#ff9900" width="200px"></td>
<td><img src="image/corner2.gif" ></td>
</tr>
<tr>
<td bgcolor="#ff9900" height="50px"></td>
<td bgcolor="#ff9900">ここに文章を書きます。</td>
<td bgcolor="#ff9900"></td>
</tr>
<tr>
<td><img src="image/corner3.gif" ></td>
<td bgcolor="#ff9900" width="200px"></td>
<td><img src="image/corner4.gif" ></td>
</tr>
</table>
