1週間位悩んでいますが、わかりません。
どなたか助けてください。
下のようなHTMLを書いています。
<table border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="img/head.bmp" border="0"></td></tr>
</table>
で、画像の上下左右に余白が出来ると困るのですが、
下側だけに3~4dot程度の余白が出来てしまいます。
ちなみに、画像のサイズは762x63dotです。
試しに
<tr height="90"><th valign="bottom">
<img border="1" ...
とやると、画像がテーブルの中で下の方に配置されますが、やっぱり下に3~4dot程度の余白ができます。
また、余白はimgのborderの外側にあります。
どうか、宜しくお願いいたします。
No.8ベストアンサー
- 回答日時:
> Microsoftのページで、この辺のバグを解説しているページがあるということでしょうか!?
Microsoftがバグとして情報を公開しているかどうかはわかりませんが、仕様(参考URL)と異なる動作をしているのでバグということになります。
> また、「bmpはインターネットでは駄目」の件についてですが、”駄目”なわけではなくて、”圧縮形式の方が通信サイズが小さいから良い”ということでしょうか?
インターネットでは駄目ということではありませんが、元々がWindowsでだけ扱えるローカルな形式であったので、インターネット上で使うには相応しくないでしょう。
WindowsではIE以外、(最新ならば)他のブラウザでも表示できるようになってきましたが、Macとかでは表示できないケースがあるんじゃないでしょうか?(実態はよくしりませんが)
そもそもbmp形式を選ぶ理由がないので他で使えるかどうかとか、bmpそのものの解説とかもあまり見かけません。
bmpしか使えないような画像エディタでは満足な編集が行えないため、使いやすいツールに乗り換えていきますので、bmpのままの方が楽という状況もあまりないのです。
参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
No.10
- 回答日時:
> gifだと色数が限られていて画像が荒くなってしまうので。
ローカルパレットを使うことで荒くなるのを避けられませんか?
回答ありがとうございます!
勿論、避けられると思います。。
今回は(未経験に近いのに)2週間で30ページ位あるサイトを作らなければならなくなり、実際作ってみると、デザインも全く考え付かなくてちょっと焦ってきて、気付いたらメニュー表示を共通化するためにJavaScriptとか結構書く必要があったりで、、
そんな中でimgの下の余白が消えないことを調査していたら何日も経ってしまって・・・。
で、かなりパニックに陥っていたので、
どうせ動くなら取敢えずはbmpでいいや、と思っていたのですが、実際出来てみるとやっぱりbmpは重いですね。。
画像は、完成してから差し替えようと思います。
ありがとうございました。
No.7
- 回答日時:
#4-3回目。
> gifだと色数が限られていて画像が荒くなってしまうので。
ケースバイケースなので2回目の回答の時には実際の画像をみてませんでした。(荒くなるというコメントを読んで写真を取り込んだような画像かと思っていました)
で、見たみましたが、このサンプルの画像に限って言えば、gifへの変換方法に問題があるようです。この手の自作画像ならば元絵のイメージを損なわずにgif形式にすることは可能です。
使用しているツールの使い方やツールそのものの選択を再考してみてはいかがでしょうか。
参考URLもご覧になってみてください。
参考URL:http://www.tohoho-web.com/wwwimage.htm,http://ww …
色々とありがとうございました。
そうですねー。
使っているツールはFireWorksなのでツールは悪く無いと思うのですが、今まで使った事が無いのに昨日期限で仕上げなければならなかったので時間がなくて・・・。
でも、実際に大分出来てきたのですが、想像以上にbmpでは重いので完成したら、GIFかJPEGに切り替えようと思います。
ありがとうございました。
No.6
- 回答日時:
#4です。
タグの前後の直前直後の改行については無視されなければいけないのですが、IEはこれを拾ってしまうというバグがあります。
なので、改行を入れないか、改行する場所を調整するなどの対策が必要になります。
例1)
~><img(改行)
src="~"
例2)
~><!--(改行)
--><img src="~"
bmp形式は他の形式に比べて唯一無圧縮の形式ですのでファイルサイズが大きいという欠点があります。
いかに通信回線が高速化しようとも、ファイルサイズは小さいに越した事はありませんのでgifの色数が問題となるならばjpegやpng形式にするとよいかと思います。
この回答への補足
さらなる回答、ありがとうございました!
IEのバグだったんですか!?
うわーって、感じですね。
1週間以上、ずっと悩んでいたのに・・。
Microsoftのページで、この辺のバグを解説しているページがあるということでしょうか!?
自分でも詳細が見てみたいので、ご存知であれば教えて頂けると嬉しいです。
また、「bmpはインターネットでは駄目」の件についてですが、”駄目”なわけではなくて、”圧縮形式の方が通信サイズが小さいから良い”ということでしょうか?
なんだか、皆さんは「bmpはインターネットで対応してない」みたいな雰囲気の回答だったので、根本的に使ってはいけないのかなというふうに思ったのですが、steelgrayさんの説明を読むと、bmpよりもjpegやpng形式の方がおすすめ(bmpがインターネットで使っては駄目だとは言って無い)程度に感じたので。。
初心者なもので、申し訳ないのですが、
引き続き、ご回答の程よろしくおねがいいたします。
No.5
- 回答日時:
画像そのものに白い余白がある、というオチではないでしょうか?
もしくは、タグの間に全角スペースがあるとか。
この回答への補足
回答、ありがとうございます!
> 画像そのものに白い余白がある、というオチではないでしょうか?
質問の文章の再掲載になってしまうのですが、、
試しに
<tr height="90"><th valign="bottom">
<img border="1" ...
とやると、画像がテーブルの中で下の方に配置されますが、やっぱり下に3~4dot程度の余白ができます。
また、余白はimgのborderの外側にあります。
という感じで、imgタグのborder="1"にして、確認しました。
> もしくは、タグの間に全角スペースがあるとか。
全角スペースはないと思うのですが、改行はあります。
実際、No.1さんの補足で書いたのですが、これが問題になっているようです。
この辺りに詳しい方、是非、よろしくおねがいします!
No.4
- 回答日時:
他の方の回答ともかぶりますが、提示されたhtmlでセルの枠と画像の間に余白が付くことは考えにくいです。
たとえば、border=0では余白が付いていることを確認することするも難しいはずですが、どのように余白の存在を確認しましたか?
もしかしたら、セルと画像の間ではなく、tableとその周りの要素の間に余白があるということですか?
実際のhtmlを省略して記述しているなら、実際のhtmlを見ないと原因の特定は難しそうです。
さらに、他にスタイルシートなどはありませんか?
また、画像そのものに余白がついていないかは確認済みですか?(ついでに、webで公開するのが目的ならbmp以外の形式に変更したほうがいいでしょう。)
この回答への補足
回答、ありがとうございます!
> border=0では余白が付いていることを確認することするも難しいはずですが、どのように余白の存在を確認しましたか?
質問内容の最期にちょこっと書いたののですが、border="1"にして確認してます。
> 実際のhtmlを省略して記述しているなら、実際のhtmlを見ないと原因の特定は難しそうです。
さらに、他にスタイルシートなどはありませんか?
No.1さんの補足で、ソースをインターネットで公開してみました。
引き続き、みていただけると助かります。。
>さらに、他にスタイルシートなどはありませんか?
本来のソースでは設定していますが、No.1さんの補足で公開したソースからは外してありますが、やっぱり現象は再現しています。
>また、画像そのものに余白がついていないかは確認済みですか?(ついでに、webで公開するのが目的ならbmp以外の形式に変更したほうがいいでしょう。)
これも質問の最期にちょこっと書きましたが、imgタグにborder="1"を付けて、確認して、imgの外側に余白ができていることを確認しています。
今も、bmpでの公開を考えていて、自分の環境では何も問題なく表示されるのですが、どのようなブラウザ環境の場合にbmpだと問題になるのか、教えていただけますでしょうか?
なにぶん、勉強不足なもので。。
よろしくおねがいいたします。
No.3
- 回答日時:
ご質問にあるHTMLソースがすべてならば余白はできません。
隙間ができるとおっしゃられるからには、そのソースの下に何かを記述なさっているわけですよね?
そこまでのソースを掲示してみてください。
CSSを設定している場合はそれで余白ができる場合もあります。
この回答への補足
回答、有難う御座いました!
No.1さんへの補足でソースと、
実際にインターネットで公開してみました。
実際のソースではCSSを設定していますが、質問用の公開版では外してあります。
>そのソースの下に何かを記述なさっているわけですよね?
ソースの下に記述してる内容は、改行だけです。
改行の有無で余白が出来るようなのですが、
改行してはいけない理由がわからないので、
この辺りに詳しい方、是非教えてください。
No.2
- 回答日時:
すみません、No.1です。
補足させて下さい。私の認識不足でした。dotとpxは同じ意味でした。
ただ、BMPの画像は表示できませんので、そちらを直せば問題無いかと思います。
それでも駄目な場合は、テーブルの幅を相対指定(%)にすれば問題無いかと思います。
この回答への補足
(No.1への回答と同じです)
画像種類についてですが、bmpは駄目なのでしょうか?
思い切り、bmpで公開するつもりだったのですが。。
実際に見ていただくと分かる通り、gifだと色数が限られていて画像が荒くなってしまうので。
面倒なので、問題がなければbmpで公開したいと考えているのですが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
pngやjsの後ろの英数字の意味は...
-
崩れたレイアウトが更新すると...
-
IEでのalt属性ポップアップ表示...
-
拡張子無しで画像を表示したいです
-
ボタンを押したままにする。
-
onmouseoverに複数の命令を書き...
-
「DecareステートメントにPtrSa...
-
CSSなどでHTML全体の表示を拡大...
-
WEBサイトの一部コンテンツがス...
-
form以外でのpostってできますか?
-
リンクの上にマウスカーソルを...
-
元々あるファビコンが消えない
-
すいません HTMLです この画像...
-
スマホで、画像をクリックする...
-
画像がテーブル内に収まらない
-
画像欄にバツ印が・・・
-
PDFの保存ボタンが表示されません
-
画像とその下にあるテキストの...
-
PNG画像を印刷すると背景がきち...
-
イラレで背景を透明にするやり...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
IMGタグでTIFF画像を表示
-
pngやjsの後ろの英数字の意味は...
-
スライドショーの上にロゴマー...
-
バナーの貼り方とバナーにリン...
-
背景が透明なリンクボタンで、...
-
HTMLにQRコードを挿入する方法
-
タイトルバーに画像を入れるHTM...
-
form以外でのpostってできますか?
-
HTMLでデスクトップの画像がでない
-
CSSなどでHTML全体の表示を拡大...
-
画像クリックでクリップボード...
-
すいません HTMLです この画像...
-
拡張子無しで画像を表示したいです
-
期間ごとに画像表示を切り替え...
-
クリックしても、リンクに飛ば...
-
特定の画像ファイルでレイアウ...
-
カウンターのHTMLソースを教え...
-
バナーのURLについて
-
クリッカブルMAP領域が分かる様...
おすすめ情報