iframe使用時のスクロールバーについて

[新着] Webテンプレートを仮オープンしました

0   名前： 一歩 ： 2006/10/22（日） 02:56  ID:eQsntAVa
おはようございます。
タイトルにありますようにiframe使用時に、どうしても横のスクロールバーが出てしまいます。
フレームエリアで表示させたいｈｔｍｌファイルの横幅は３００ｐｘとかに抑えても出てしまいます。
以下にソースを貼り付けますので
どなたかご教授のほど、宜しくお願い致します。

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
</head>

<body>
<table width="408" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="26" colspan="3" valign="top"><a href="betumado.html" target="frame1">aaa</a></td>
  </tr>
  <tr>
    <td width="59" height="89" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="417" rowspan="3" valign="top"><iframe src="top.html" name="frame1" width="417" height="356" frameborder="0" scrolling="auto"></iframe></td>
    <td width="65" rowspan="3" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="16" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="22" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
</table>
</body>
</html>

1   名前： Z ◆XTzyosZXcL ： 2006/10/22（日） 02:56  ID:0kFtme6G
　TABLE要素の横幅（width=408）の数値より、２行目のTR要素内にあるTD要素の横幅の合計（width=59+417+65）が大きいことが原因だと思います。

HTML4.01仕様書該当部分（表）：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html
http://www.w3.org/TR/html401/struct/tables.html

仕様書の読み方など：
http://www.kanzaki.com/works/2001/pub/wsd01.html

その他参考資料：
http://www.kanzaki.com/docs/html/tbl-access.html

　なお、IFRAME要素に非対応の環境についてはIFRAME要素の内容が代替手段として表示されます。つまり空っぽではよろしくありません。少なくとも、

<iframe src="top.html" name="frame1" width="417" height="356" frameborder="0" scrolling="auto">"><a href="top.html"></iframe>

とA要素による参照先確保はしておいたほうがよろしいでしょう。

HTML4.01仕様書該当部分（インラインフレーム）：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#h-16.5
http://www.w3.org/TR/html401/present/frames.html#h-16.5
2   名前： 一歩 ： 2006/10/22（日） 02:56  ID:eQsntAVa
お返事有難う御座います。
参考にさせていただき、ソースを以下のように書き換えました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
</head>

<body>
<table width="700" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="26" colspan="3" valign="top"><a href="betumado.html" target="frame1">aaa</a></td>
  </tr>
  <tr>
    <td width="9" height="89" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="417" rowspan="3" valign="top"><iframe src="top.html" name="frame1" width="417" height="356" frameborder="0" scrolling="auto"></iframe></td>
    <td width="5" rowspan="3" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="16" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="22" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
</table>
</body>
</html>


この状態でも、まだtop.htmlを表示させると横のスクロールバーが出てしまいます。
引き続き、宜しくお願い致します。
3   名前： カヅサツ ◆ThCi95HEzw ： 2006/10/22（日） 02:56  ［URL］  ID:f0UXxXRM
HTML「だけ」では難しいので、総合質問板あたりで質問し直されるとよろしいかと思います
4   名前： 一歩 ： 2006/10/22（日） 02:56  ID:eQsntAVa
お返事有難うございます。
原因は他にもあるのでしょうか。
前に作ったサイトでは、iframeで横スクロールでないように出来てましたので
それと見比べてみたのですね。
すると、top.htmlのソースに違いがありまして

<!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>実験</title>

このようにすると、どうしても横スクロールバーが出てしまいました。
一方、今まで出なかったtop.htmlのソースは以下のようになっておりました。
<html>
<head>
<title>実験</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"><style type="text/css">

上記のソースでtop.htmlを書きますと、きちんと横幅が収ってますので
横のスクロールバーは出なかったです。
となりますと、DOCTYPE宣言に誤りがあったと言う事になるのでしょうか？

一応は解決となりましたが、今後のためにも何かアドバイス等ございましたら
宜しくお願い致します。
5   名前： カヅサツ ◆ThCi95HEzw ： 2006/10/22（日） 02:56  ［URL］  ID:f0UXxXRM
いや、文書型宣言を省いてはいけません。
原因はIEのバグですが、その解決を文書型宣言をどうこうすることではかろうとすると、
CSSなどをルール通り解釈しなくなってしまうのです。
6   名前： 一歩 ： 2006/10/22（日） 02:56  ID:eQsntAVa
なるほど、あれはバグなのですか・・・
その後ですね、色々と文書型宣言を変えてやりましたら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<title>実験</title>
と言うソースで出来るようになりました。
ただ気になるのは、こちらに書き込みする前に、全ての宣言パターンでやったものの、どうしても横スクロール出たのに、白紙の状態から作り直すとなぜか思った通りになってくれますね。
一覧へ戻る