No.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行目は伸縮させるので、基本的に高さは決めなくて良いです。
スペーサーはなくても構わないけど一応。 (^^;
横幅を固定したいなら今のままで、中身に合わせて伸縮させたいなら1行目と3行目の2列目も背景に入れて<table>タグ内の『width="0"』を消してください。
こんな感じで出来ましたでしょうか?
No.1
- 回答日時:
<table>タグでborder、cellpadding、cellspacingの値を「0」に指定していますか?
挿入パネルでテーブルを挿入した場合に出てくる、ボーダー、セル内余白、セル内間隔のことです。
指定していない場合、セルとセルの間に隙間ができてしまうために崩れる場合がほとんどです。
spacer.gif(透明GIF)はセルにテキストも画像も入ってない場合、背景しか入っていない場合に、そのセルが消えたり小さくなってしまわないように入れるものですね。
説明に書いている場所は画像を背景に入れて、スペーサーを入れているんですよね?
入れる場所は間違っていませんよ。 (^^
画像を背景に入れるのは、テーブルのサイズが伸縮した時のためです。
ブラウザで文字サイズを変えることができますよね?
幅はwidthで設定しておけば崩れることは少なくなりますが、高さは文字サイズが大きくなればそれに合わせて伸びていきます。
画像を<img>タグで挿入すれば一度しか表示しないため、画像サイズ以上にセルが伸びてしまうと伸びた部分に空白が出来ます。
また、かといって大きめに作ると文字サイズが小さい場合にスペースが空いて、これもまた不恰好になります。
しかし背景に入れると、背景はリピートしないという設定をしない限り、繰り返し表示されます。
ですから、四隅は<img>タグで、辺に当たる部分はセルの背景として表示させるのが一般的かな?と思います。
印刷する時、背景も印刷するという設定をしていない場合、テーブルの四隅の画像だけが出てきて気になるので四隅も背景で表示させてしまう人もいると思います。
この場合は四隅のセルの幅と高さをしっかり設定しておかないと、表示されなかったり、逆に隙間が空いて繰り返し表示されてしまうこともあります。
こんな説明でお役に立てたでしょうか?
この回答への補足
早速ご回答ありがとうございます。ご説明いただいた内容はわかりました。
今、私が使っている画像を背景にするとよくないのではないかという気がしてきました。2行目3列目(右)の画像に
影がついているので背景にして繰り返すと変な枠のように
なってしまうのです。知人に聞いたところこのまま全ての画像を<img>で貼り付けてしまっていいのでは?と
言われました。このままだと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>
何度もすみません。面倒な質問にご丁寧に教えていただいてありがとうございました。大変助かりました。教えていただいた通りなおしてみたらうまくいきました。
これからも頑張って覚えていきたいとおもいます!!
ありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) capeofdragonと申します Excel2016を使っておりまして 半角又は全角の任意文字列が 2 2022/10/31 13:51
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- Word(ワード) Word2013 縦書き上下二段の表、改行を続けると次ページに情報が表示されるようにしたい 3 2022/06/16 09:24
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Excel(エクセル) ExcelのIF関数について 4 2023/05/24 12:54
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- Excel(エクセル) ある数値に対して、値を返す数式についてです 2 2022/09/13 22:06
- Visual Basic(VBA) A列にある値をB列・C列にVBAで切り出し 3 2022/04/09 19:20
- Excel(エクセル) エクセルでセルの日付を和暦表示設定にしたらおかしなことに? 3 2022/05/25 11:47
- 計算機科学 Excel ある行と列が交わったところにマークを付けるには 7 2023/01/24 08:46
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既存画像(gif または png)の背...
-
画像の白抜きの意味
-
Photoshopで、削除できますか?
-
Photoshopで背景を変えたい。
-
Illustrator(イラレ)初心者で...
-
背景透明保持、ライブトレース
-
Photoshop 被写体の背景が白く...
-
フォトショップCSで写真の背...
-
GIMP で背景が上手く切り抜けない
-
HTML作成中:背景の画像をブラ...
-
自炊したPDFの本を一度にレベル...
-
フォトショップエレメンツで作...
-
【至急】 画像2枚の背景を透明...
-
フォトショップを利用してタイ...
-
背景に画像を乗せる
-
『MMD』の背景、拡張子が分...
-
ホームページビルダーv9で作...
-
FC2ホームページ、背景画像がど...
-
pngファイルがひらけない
-
写真の背景を広げて画像を大き...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
既存画像(gif または png)の背...
-
画像の白抜きの意味
-
自作アイコンの背景が透明にな...
-
黒文字のロゴを白抜きで使いた...
-
LibreOffice Calcで背景画像の...
-
Photoshopで背景を変えたい。
-
Photoshopで、削除できますか?
-
背景透明画像
-
Illustratorで図形の背景のみを...
-
一太郎で透かしを入れる
-
アイビスペイント
-
ZOOMの背景について教えてくだ...
-
フォトショップで背景をくり抜...
-
WORD2010でチラシを作っていま...
-
ホームページビルダーで背景画...
-
『GIMP』でGIF画像を保存する際...
-
オフィスのワードで背景の色を...
-
筆ぐるめで背景を単色にしたい
-
自炊したPDFの本を一度にレベル...
-
illustratorで透明化するには?
おすすめ情報