- ベストアンサー
DreamｗｅａｖｅｒＭＸ 角丸テーブルについて
DreamweaverＭＸを只今勉強中です。まだ使いはじめですが わかりません。どなたかわかる方教えて下さい。テーブル3行3列で指定のイメージ画像を各セルに挿入しています。角丸テーブルの場合はスペーサーを入れるのですよね？1行2列目（真中）、2行1列目（左）、3列目（右）3行2列目（真中）に入れましたがなぜが表示が崩れてしまいます・・ 少し詳しい方に伺ったところイメージ画像を背景に入れたほうがいいといわれたのですが・・それは関係ありますか？
- melfina
- お礼率60% (20/33)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
k_l.gif、m_l.gif、uk_l.gifは幅4ピクセル、 k_r.gif、m_r.gif、uk_r.gifは幅10ピクセルに画像サイズはなっているんですよね？ m_l.gif、m_r.gifの中身は連続した垂直の直線状（帯状）になっていますか？ もし上下の端に角に入る曲線部分が入っていると表示がおかしくなります。 影が横にリピートされていれば画像の幅とセルの幅があってないのでセル幅を変更してください。 影が上から下まで直線に見えない時は、曲線部分にかからないようにスライスしなおさないといけません。 影について心配されていますが、影を使っている画像でも決まりさえ守っていれば問題なく、実際使われているサイトは山のようにあります。 画像を背景に入れる時は、その画像が縦または横にリピートしても違和感なく作らないといけません。 ちなみに、画像を背景に入れても(1)一回しか表示しない、(2)縦方向にしかリピートしない、(3)横方向にしかリピートしない、といった設定はスタイルシートを使えば出来ます。 コードは二段目についてだけ。 <tr> <td background="m_l.gif" width="4"> <img src="spacer.gif" width="4" height="1"></td> <td width="110" bgcolor="#F8CCCB"> <div align="center"> <p><font color="#FF0099" size="2">Dreamweaver</font></p> </div> </td> <td background="m_r.gif" width="10"> <img src="spacer.gif" width="10" height="1"></td> </tr> 2行目1列目、2行目3列目は背景に入れ、幅だけ合わせたスペーサーを入れています。 2行目は伸縮させるので、基本的に高さは決めなくて良いです。 スペーサーはなくても構わないけど一応。 （＾＾； 横幅を固定したいなら今のままで、中身に合わせて伸縮させたいなら１行目と3行目の2列目も背景に入れて<table>タグ内の『width="0"』を消してください。 こんな感じで出来ましたでしょうか？
その他の回答 (1)
- Pochi67
- ベストアンサー率34% (582/1706)
<table>タグでborder、cellpadding、cellspacingの値を「0」に指定していますか？ 挿入パネルでテーブルを挿入した場合に出てくる、ボーダー、セル内余白、セル内間隔のことです。 指定していない場合、セルとセルの間に隙間ができてしまうために崩れる場合がほとんどです。 spacer.gif（透明GIF）はセルにテキストも画像も入ってない場合、背景しか入っていない場合に、そのセルが消えたり小さくなってしまわないように入れるものですね。 説明に書いている場所は画像を背景に入れて、スペーサーを入れているんですよね？ 入れる場所は間違っていませんよ。 （＾＾ 画像を背景に入れるのは、テーブルのサイズが伸縮した時のためです。 ブラウザで文字サイズを変えることができますよね？ 幅はwidthで設定しておけば崩れることは少なくなりますが、高さは文字サイズが大きくなればそれに合わせて伸びていきます。 画像を<img>タグで挿入すれば一度しか表示しないため、画像サイズ以上にセルが伸びてしまうと伸びた部分に空白が出来ます。 また、かといって大きめに作ると文字サイズが小さい場合にスペースが空いて、これもまた不恰好になります。 しかし背景に入れると、背景はリピートしないという設定をしない限り、繰り返し表示されます。 ですから、四隅は<img>タグで、辺に当たる部分はセルの背景として表示させるのが一般的かな？と思います。 印刷する時、背景も印刷するという設定をしていない場合、テーブルの四隅の画像だけが出てきて気になるので四隅も背景で表示させてしまう人もいると思います。 この場合は四隅のセルの幅と高さをしっかり設定しておかないと、表示されなかったり、逆に隙間が空いて繰り返し表示されてしまうこともあります。 こんな説明でお役に立てたでしょうか？
お礼
何度もすみません。面倒な質問にご丁寧に教えていただいてありがとうございました。大変助かりました。教えていただいた通りなおしてみたらうまくいきました。 これからも頑張って覚えていきたいとおもいます！！ ありがとうございました！！
補足
早速ご回答ありがとうございます。ご説明いただいた内容はわかりました。 今、私が使っている画像を背景にするとよくないのではないかという気がしてきました。2行目3列目（右）の画像に 影がついているので背景にして繰り返すと変な枠のように なってしまうのです。知人に聞いたところこのまま全ての画像を＜ｉｍｇ＞で貼り付けてしまっていいのでは？と 言われました。このままだと2行目2列目真中のセルにテキスト文字を入れた場合高さが伸びてしまうんですよね？ ご面倒ですが、タグを見ていただけますか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>kiso4</title> </head> <body bgcolor="#FFFFFF" text="#333333"> <table width="124" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="4" height="5"><img src="k_l.gif" width="4" height="5"></td> <td width="110" height="5"><img src="s.gif" width="110" height="5"></td> <td width="10" height="5"><img src="k_r.gif" width="10" height="5"></td> </tr> <tr> <td width="4" height="17"><img src="m_l.gif" width="4" height="17"></td> <td width="110" bgcolor="#F8CCCB"><div align="center"> <p><font color="#FF0099" size="2">Dreamweaver</font></p> </div></td> <td width="10"><img src="m_r.gif" width="10" height="17"></td> </tr> <tr> <td width="4" height="10"><img src="uk_l.gif" width="4" height="10"></td> <td width="110"><img src="u.gif" width="110" height="10"></td> <td width="10"><img src="uk_r.gif" width="10" height="10"></td> </tr> </table> </body> </html>