- ベストアンサー
テーブル内に隙間が出来る問題の解決方法
- CSSとテーブルタグを使用してwebページを作成したが、IE,FireFox,Chromeなどのブラウザでは隙間が発生してしまう。この問題を解決するために、どの部分を修正すればいいのかについて教えてください。
- テーブル内に隙間が出来る問題を解決するため、HTML/CSSのコードを見直す必要があります。画像やセルの幅・高さの設定に留意することで、ブラウザごとの表示差を最小限に抑えることができます。
- テーブル内に隙間が生じてしまう原因は、td要素のマージンやパディングの設定にあります。それぞれのブラウザにおけるデフォルトのマージン・パディング値が異なるため、適切な値を設定する必要があります。
- moyashi_room
- お礼率83% (5/6)
- ホームページ作成ソフト
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞何を思ったか「tableならそれを解消できるのでは」と ＞理由もなく閃きました。何でそんな事を考えたのか…。 サイズなどから携帯電話やPDA、さらには読み上げブラウザも想定されているなら、HTMLは下記の様なものになるでしょう。 CSSのデザインは、簡単ですから・・先のサイズを紹介してください。 <body> <div> <h1>あいうえお</h1> <p><object data="[URL]" type="application/x-shockwave-flash" width="[横サイズ]" height="[縦サイズ]"> <param name="bgcolor" value="[ColorName|ColorCode]"> <param name="loop" value="on|off"> <param name="quality" value="high|medium|low"> <object data="[mpegURL]" type="application/mpeg"> <object data="[GIF-URL]" type="image/gif"> なんとかの写真 </object> </oblect> </object> </p> <ul class="nav"> <li><a href="../about/index.html">cell_1</a></li> <li><a href="../flash/index.html">cell_2</a></li> <li><a href="../web/index.html">cell3</a></li> <li><a href="../diy/index.html">cell_4</a></li> <li><a href="../link/index.html">cell_5</a></li> </ul> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
せっかくCSSを使うのに、なぜtableでデザインされるですか？ ところで、高さを300px;幅を92%でデザインされていますが、ウィンドウ幅はどの程度を想定されているのでしょうか？ 幅が、1028pxのディスプレイだと、946px幅となって高さが300pxで添付画像のようにはなりません。 Q:画像の実寸は？？(W : px)(h : px) Q:表示幅は 最小何ピクセル( px) 普段画面の( %) 最大( px) Q:メニューは左の高さを5等分したものでよいのか？
お礼
回答ありがとうございます！ >Q:画像の実寸は？？(W : px)(h : px) 画像についてですが、これは説明しやすくする為に用いた だけで実際には、サイズ可変のobject(swf)が配置されます。 説明不足でした。すみません。 >せっかくCSSを使うのに、なぜtableでデザインされるですか？ 確かに自分でも何がしたいのやら。最初はCSSに頼って コテコテのデザインにしようかと思ったのですが、音声ブラウザで 読み上げたら、まぁ、酷いことになりました。 そこで、何を思ったか「tableならそれを解消できるのでは」と 理由もなく閃きました。何でそんな事を考えたのか…。 一からCSSでデザインし直してみます。
- pasocom
- ベストアンサー率41% (3584/8637)
</style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> 上の「cellspacing="2"」→「cellspacing="0"」に。
お礼
参考になります。 ありがとうございました！
お礼
自分のような阿呆にアドバイスを…ありがとうございます。 その後解決いたしました。 原因は，恐らく，テーブルを指定する際，ブロック要素 として扱うために右側のメニューのブロックが邪魔をして 左側のブロックと，ずれが生じてしまったようです。 解決方法としてtableタグは使用せず全てCSSのブロック要素で配置 しました。左側のメニューブロックは上記の回答にあるように リストを用いる事てCSS解除時（携帯電話のブラウザや音声〃） でも奇麗に表示されました。 （このようにしたかったから最初はtableタグを使った訳です） … そもそも要素の配置の仕方，階層構造，レイヤーの概念が あやふやだったことが今回の大きな原因でした。 ご回答してくださった皆さん， ありがとうございました。