基本的なことは「テーブル関係」でみっちり勉強してください。
最初はとっつきにくいかもしれませんが、構造さえわかってしまえば意外と簡単です。テーブルがわかればレイアウトの幅が広がりますので、ゆっくりのんびり取り組んでいきましょう。
＜よくみるタイプ＞
画像の上に文字を、といっている人がいますが、テーブルの中にテキストを入れる範囲を作っているだけですよー。 素材：  Font： 
加工は私がしました(；・∀・) 背景を赤にして、それを透過しています。だから、NNだとえらい表示になっています。 |
|
1.横にセルが２個並ぶように、テーブルを作りましょう。
↓は、わかりやすいように線をつけています。
実際に作るときも、最初は線をつけたままで、あとで消すようにすると、場所の調整がやりやすいですよ。
| このセルは、テキストエリアの横の位置を指定するために使います。 | こちらのセルに、テキストエリアを入れていきます。 |
上のテーブルのソースは以下のとおりです
<div align="center">
<table width="400" height="300" border="1" bordercolor="#000000">
<tr>
<td width="100">→ここの数字が、テキストエリアの左の距離となります。
</td>
<td width="300">→テキストエリアが入るセルです。数字は幅となります。
</td>
</tr>
</table>
</div>
| このセルの幅は「100」 すなわち、左からの距離が「100」です。 |
このセルの幅は300。セル同士の幅の合計は、テーブルの幅を超えることはできません。 ここがテキストエリア テーブルの幅が400で、左が100、右が300、合計400となります。 |
左のセルの幅を利用して、背景画像とのバランスを図りましょう。
画像によっては、セルが縦に2個並ぶようなテーブルを作ったほうがいいときもあります。
| height=50にしています。縦の調節にもつかえますね。 |
| このセルの縦幅は250。セル同士の縦幅の合計は、 テーブルの縦幅を超えることはできません。 ここがテキストエリア テーブルの縦幅が300で、上が50、下が250、合計300となります。 |
縦に2個、横に2個のセルがあるテーブルを作って、細かい設定だってできちゃいます。
| height=50。colspan="2"でセルをくっつけてます | |
| width=100 | このセルの幅は300。セル同士の幅の合計は、テーブルの幅を超えることはできません。 ここがテキストエリア テーブルの幅が400で、左が100、右が300、合計400となります。 |
テーブルができたら、フリーページで保存しましょう。