タグ講座
さて、基本編はマスターできたかな？（笑
ここでちょっとした応用技を教えちゃおうｗ
大きな画像の場合は問題無いけど、小さな画像の場合はそれだけでは書ききれないよね。
さぁ、どうしましょ＾＾；。。。。実はいい方法があるんですね～♪
１ 「秘密」のテーブルを２分割にする方法を使います
まず、自分のイメージする大きさのテーブルを作っちゃいます
<table border width="500" height="430">
<tr>
<td>
ここでは横幅５００ピクセル、高さ４３０ピクセルで作ります
</td>
</tr>
</table>
<tr>
<td>
ここでは横幅５００ピクセル、高さ４３０ピクセルで作ります
</td>
</tr>
</table>
ここでは横幅５００ピクセル
高さ４３０ピクセルで作ります
高さ４３０ピクセルで作ります
２ 画像をはめ込む
右側に画像をはめ込みます。画像の位置はお好みでどこへ持っていってもいいよ
<table border width="500" height="430">
<tr>
<td>
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/3920v7l3/218.jpg" width="160" height="410">
</td>
<td>
ここに文字を書きます
</td>
</tr>
</table>
<tr>
<td>
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/3920v7l3/218.jpg" width="160" height="410">
</td>
<td>
ここに文字を書きます
</td>
</tr>
</table>
ここに文字を書きます
（青の間に書かれた文字が
ここに表示されます）
（青の間に書かれた文字が
ここに表示されます）
３ ここでテーブルを二つに分けたけど、画像によっては余白があいちゃうよね
そこで、画像を貼り付けた側のセルを画像サイズに指定してしまいます
（この画像の場合は１６０ｘ４１０だから width を１６０に指定します）
<table border width="500" height="410">
<tr>
<td width="160" >
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/33087749/218.jpg" width="160" height="410">
</td>
<td>
これで余白が消えたでしょ
</td>
</tr>
</table>
<tr>
<td width="160" >
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/33087749/218.jpg" width="160" height="410">
</td>
<td>
これで余白が消えたでしょ
</td>
</tr>
</table>
これで余白が消えたでしょ
４ テーブルの線がジャマだから消しちゃおう
テーブルの線を消すには赤い部分を消します
<table border
width="500" height="410">
<tr>
<td width="160">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/3007m7473/218.jpg" width="160" height="410">
</td>
<td>
ね、消えたでしょ
でも、なんだかしまらないなぁ。。。
</td>
</tr>
</table>
<tr>
<td width="160">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/3007m7473/218.jpg" width="160" height="410">
</td>
<td>
ね、消えたでしょ
でも、なんだかしまらないなぁ。。。
</td>
</tr>
</table>
ね、消えたでしょ
でも、なんだかしまらないなぁ。。。
でも、なんだかしまらないなぁ。。。
５ そうだ、外側に枠をつけちゃおう
全体をひとつのテーブルで囲んじゃいます
<table
border="5" bordercolor="pink"
>
<tr>
<td>
<table width="500" height="410">
<tr>
<td width="160">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/00ll774d/218.jpg" width="160" height="410">
</td>
<td>
青色の部分で枠の太さ、色を指定しています
枠の太さは数字が大きいほど太くなります
色も自由にかえられるよ
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td>
<table width="500" height="410">
<tr>
<td width="160">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/00ll774d/218.jpg" width="160" height="410">
</td>
<td>
青色の部分で枠の太さ、色を指定しています
枠の太さは数字が大きいほど太くなります
色も自由にかえられるよ
</td>
</tr>
</table>
</td>
</tr>
</table>
青色の部分で枠の太さ、色を指定しています
枠の太さは数字が大きいほど太くなります
色も自由にかえられるよ
枠の太さは数字が大きいほど太くなります
色も自由にかえられるよ
６ ＨＰの背景がジャマだとゆう人へ
ＨＰがブラック系とか、詩のイメージによっては今の背景が合わないって人いるでしょ
テーブルの背景だけ変えちゃおうｗ
<table border="5" bordercolor="pink" bgcolor="white"
>
<tr>
<td>
<table width="500" height="410">
<tr>
<td width="160">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/30r2l43j/218.jpg" width="160" height="410">
</td>
<td>
赤色の部分でテーブルの背景色を指定します
ここではわかりやすいように薄いピンク色にしてみました
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td>
<table width="500" height="410">
<tr>
<td width="160">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/77/43/30r2l43j/218.jpg" width="160" height="410">
</td>
<td>
赤色の部分でテーブルの背景色を指定します
ここではわかりやすいように薄いピンク色にしてみました
</td>
</tr>
</table>
</td>
</tr>
</table>
赤色の部分でテーブルの背景色を指定します
ここではわかりやすいように薄いピンク色にしてみました
ここではわかりやすいように薄いピンク色にしてみました
これでバッチリＯＫだね。 どうかな？理解できた？？
まだまだいっぱいテクニックはあるからねｗｗ
© Rakuten Group, Inc.
