実験結果２

いろんなパターンがあります。

いつも訪問してくださるコキアさんの、Harbot枠が、チョッと特殊だったのでそんなときの設定方法を説明します。
（コキアさん、勝手にサンプルにしてごめんなさい）

01: <table border="0" cellpadding="0" cellspacing="0">
02:  <tr>
03:   <td><img src="左上の画像" width="35"  height="35"></td>
04:   <td><img src="中上の画像" width="117" height="35"></td>
05:   <td><img src="右上の画像" width="35"  height="35"></td>
06:  </tr>
07: </table>
08: <table border="0" cellpadding="0" cellspacing="0">
09:  <tr>
10:   <td><img src="左の画像" width="30" height="201"></td>
11:   <td><script language="JavaScript" src="Harbox-ID"></script></td>
12:   <td><img src="右の画像" width="30" height="201"></td>
13:  </tr>
14: </table>
15: <table border="0" cellpadding="0" cellspacing="0">
16:  <tr>
17:   <td><img src="左下の画像" width="35"  height="20"></td>
18:   <td><img src="中下の画像" width="117" height="20"></td>
19:   <td><img src="右下の画像" width="35"  height="20"></td>
20:  </tr>
21: </table>

サイドバーの一番下・・・に、サンプルを置いています。
記事の中に、設置してみたのですが・・・テーブルフレーム枠が０になりませんでした・・・なぞ？
なので、サイドバーに設置・・・２つ置くのは違反かな？（画像にしました）
対策は、[実験結果３]に書きました。

境界線を 入れてみました

今回は、１段のテーブルを３つ作って、縦に並べています。
このようにしたのは、四隅の画像のサイズがチョッと大きい画像のためです。縮小すると、リンゴマークが崩れたり、右端の曲線の影が上手く出なかったり・・・という問題があります。
テーブルの横幅が１８７ピクセルまではＯＫと言うことなので、両サイドには３０ピクセルの空きがあります。でも、四隅を縮小しないで使用すると、３５ピクセル×２の７０ピクセルが必要です。そうすると、中央は１１７ピクセルになり、Ｈａｒｂｏｔの横サイズの１２７ピクセルが取れません。

そこで、問題を解決するために、上中下段を別のテーブルで管理します。
上段の横は、３５＋１１７＋３５＝１８７ピクセル。
中段の横は、３０＋１２７＋３０＝１８７ピクセル。
下段の横は、３５＋１１７＋３５＝１８７ピクセル。
と、しました。
縦に関しては
上段：３５ピクセル。
中段：２０１ピクセル。
下段：２０ピクセル。
です。

元の画像サイズをそろえるのが、一番素直なやり方でしょう。でも、融通の利かない場合があると思います。発想の転換で、ここまでできます。
いや・・・まだまだ、いろんなことができると思います。
ぜひ、挑戦してください。

質問などあれば、コメントしてください。

コメント 7

こんばんは＾＾　きれいに設置できてますね♪
記事の中に置くときは　各imgタグ内にstyle="margin:0"を追記するといいですよ。
よかったら　http://blog.so-net.ne.jp/dayan/2005-12-27-3　を見てください。くわしくかいてあります。
by kuu (2006-02-14 19:28) 

やゃっ！
さっそくの回答、ありがとうございます。
スタイルシートのｍａｒｇｉｎ属性ですか。
なるほど・・・引数が１つの場合は、上下左右の設定になるのですね。
ついでにｍａｒｇｉｎは外側の余白、ｐａｄｄｉｎｇは内側の余白何ですね。
ｉｍｇの場合は余白が外側につくのでｍａｒｇｉｎとなるわけですね。
ｔｄなら余白が内側になるのかな？
タグは、奥が深い！
これからもよろしく。
by 柊太郎 (2006-02-14 19:57) 

こんばんは～。
いろいろ勉強になりました。ありがとうございます。

mimicさんと、kuuさんのおかげで、タグが解かり始めて、まだ２ヶ月もたっていません。まだ、タグに関して、ハイハイしている状態です。これからも、よろしく、お願いします。

１２月のmimicさんの検証もごらんください。今月末で記事が消えてしま
います。mimicさんのページで見るのが、らくです。
kuuさんと、コキアのページに移転中です。カテゴリーから、行けるようにしたいと思っています。

７５００HIT ありがとうございます。明日記事アップします。
by (2006-02-14 20:24) 

またまた、こんばんは～。
http://blog.so-net.ne.jp/kokia/2006-01-19-1に、リンクしていただければよいかと思います。

今の私のテーブルは、右側のラインが崩れていますので、差がわかると思います。
by (2006-02-14 20:58) 

柊太郎さんのテーブルタグ、backgroundがないので、誰にでも、わかりやすいと思います。
background 、悩みました。

kuuさんの記事とmimicさんの記事は同じものです。よろしく・・・。
by (2006-02-15 15:46) 

画像に画像を重ねたり、画像の上に文字を重ねたりするときに、ｂａｃｋｇｒｏｕｎｄを使用すると、効果的ですよね。
今回は、画像をパズルのようにつなぎ合わせるので、ｉｍｇで行いました。
やれば、何でもできるのでしょうけど、目的と効果がハッキリしていたほうが分かりやすいと思います。
理解するまでが大変ですが・・・
一緒に、がんばりましょう！
by 柊太郎 (2006-02-15 16:23) 

境界線で、イメージがはっきりしました。
私の今のテーブルの状況、かなり窮屈なのがわかります。
by (2006-02-20 16:08)