• ベストアンサー

インラインフレームのスクロールバーについて

インラインフレームのスクロールバーが現れないようにしたいのです。それも、縦方向は残して、横方向のスクロールバーが出ないようにしたいのです。 MacのIEで確認すると(当方はMacintoshでホームページを作成しています)縦方向のみスクロールバーが現れ、横方向は現れません。がWindowsで確認すると縦横ともに現れるのです。 タグではautoとyesとnoしか制御する方法はないのでしょうか? Javascriptなどでもかまいません。 どなたかご存じでしたら教えてください。お願いします(泣) ちなみにテーブルのセルの中に作っているのですが、タグはこんな感じです↓ <td width="104"> <iframe src="info.html" name="info" width="100%" height="92" frameborder="0"> <p>このページはインラインフレーム対応のブラウザでご覧ください。</p> </iframe> </td>

  • HTML
  • 回答数7
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • Shige29
  • ベストアンサー率23% (121/520)
回答No.7

>仰るように一つ一つ組み直してみましたが、どうもうまくいきません。 少しずつ持っていったのなら、何処で問題が起こるか判りますよね? 問題が出た直前にペーストした物が、間違いなく原因となっています。 そうやって問題の切り分けをしていかないと、既に出来上がっている物を見直していくのは大変です。 全ての要素がテーブルの中に配置されている状態なら、最初に問題の起こらない状態のテーブルのみを配置します。 その後でテキスト、画像と続けてテーブルの中に配置していき、面倒でも大量のコピペは行わないようにしましょう。 実際に問題の起こらない状況が実現できているのだから、問題を起こしている要素が必ずあるはずです。 何処で問題が発生するか? それを入念に確認しましょう。

その他の回答 (6)

  • Exkyde
  • ベストアンサー率58% (7/12)
回答No.6

iframe内に読み込んでいるHTMLの方ですが、bodyタグに対してスタイルでmarginとpaddingをともに0に設定してみてもだめでしょうか。 ぎりぎりのサイズで製作されている場合、ページ余白がレイアウトに影響を及ぼしている可能性があるのですが、Shige29さんのソースを新規で貼り付けると問題ないということは<body leftmargin="0" topmargin="0">という行が影響を及ぼしているのかな?という気もします。 フレーム内に読み込まれる方のHTMLのbodyタグをスタイルシートでmargin、paddingともに0に再定義してみていかがでしょう。 ブラウザによって設定がないときの動作が変わりますので、margin、paddingの両方をきちんと指定してやるとより崩れにくいレイアウトになると思うのですが。

rintaro15
質問者

お礼

ありがとうございます。早速トライしてみます。 ちなみに現状はこうなってます(↓)。 iframeを設置している親ページの<body>タグは以下の通りです。 <body text="#FFFFFF" bgcolor="#00B03B" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 読み込ませる側、つまり子ページの<body>タグは <body leftmargin="0" topmargin="0"> としています。 ちなみに両方ともページの一番先頭に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と入れています。これは関係ないのかな?

  • Shige29
  • ベストアンサー率23% (121/520)
回答No.5

良かった(^_^;) では何かが幅を取ってるんでしょうね。 結構縦に長い物なんでしょうか? 見直しは大変かも知れませんが、ブロックごとに少しずつ別のファイルにコピペして、原因を突き止めるしかないですね。 新規作成状態の方に、テキストや画像などを少しずつ持って行ってみてください。 ソースを見ることが出来れば話が早いんですけどね(^_^;)

rintaro15
質問者

お礼

お礼が遅くなって申し訳ありませんでした。 仰るように一つ一つ組み直してみましたが、どうもうまくいきません。 CSSが悪いのかな?それともBODYタグが悪いのかな? 何にせよもう少し頑張ってみます。 本当にどうもありがとうございました。

  • Shige29
  • ベストアンサー率23% (121/520)
回答No.4

え?ダメですか? WinIEでテストした物ですが? 一度新規作成状態で、下のをコピペしてみてもらえますか? それでダメなら他に原因があると思うので、問題の切り分けをさせて下さい。

rintaro15
質問者

お礼

ありがとうございます。新規でやってみると出ませんでした。 すでに作成途中のソースにコピペするとダメ。 新規作成状態でコピペするとOK。 ということは問題はこのほかにありそうです。 ほかに何か考えられることはありますか? う~~~ん、どうしよう・・・。 納期は明日なのですが・・・。

  • Shige29
  • ベストアンサー率23% (121/520)
回答No.3

テストしたので多分大丈夫だと思います(^_^;) コピペしてみて下さい。 【iframe】 <td width="430"> <iframe src="info.htm" name="info" width="430" height="92" scrolling="auto" frameborder="0">このページはインラインフレーム対応のブラウザでご覧ください。</iframe> </td> 【中身】 <body leftmargin="0" topmargin="0"> <table width="410" height="200" border="1" bgcolor="#FF0000"> <tr> <td>&nbsp; </td> </tr> </table> </body>

rintaro15
質問者

お礼

ありがとうございます。 試してみましたが、ダメでした。 テキストが横に流れているからかな?と思いテキストをなくしてみましたがそれでもスクロールバーが表示されるのです。 ちなみにこちらで使用しているWindowsはIEです。 ああ、いっそアップしているURLを記して、ソースを見てもらいたい!でもこれは規約違反なんですよね…(泣)

  • arukamun
  • ベストアンサー率35% (842/2394)
回答No.2

こんばんは <TABLE WIDTH=430 BORDER=0>~</TABLE> のWIDTH=430やBORDER=0大事ですが、上下左右に余白が出来てしまうので、 <TABLE WIDTH=430 BORDER=0 STYLE="{position: absolute; top: 0px; left: 0px;}">~</TABLE> とスタイルシートで、左上隅から表示させて見て下さい。

rintaro15
質問者

お礼

ご返答ありがとうございます。 試してみましたが、これはiframeの中に表示させるページに入れるのですよね。 結果は…WindowsだけでなくMacでもスクロールバーが現れるようになってしまいました~(泣)

  • Shige29
  • ベストアンサー率23% (121/520)
回答No.1

横方向を無くす場合、中に入れるページに、iframeで指定する幅よりも狭いテーブルを作ってあげましょう。 縦スクロールのバーの入る位置も考え、20程度低い数値を指定して下さい。 あと、widthは100%ではなく、数値の方が良いです。

rintaro15
質問者

お礼

補足に書いてしまったので、お礼を書き込むのを忘れていました! ありがとうございました。 でも、まだまだお知恵を拝借いたしたく…。

rintaro15
質問者

補足

早速のご回答、ありがとうございます。 じつは、その方法はもう試していたんですよ~(T_T) 質問ではtdの幅が104となっていますが、間違えました。本当は430でした。 で、中に入れるページを幅400のテーブルで囲ってみたんですが、やはりダメ…。これならどうだ!と試しに300とか200とかに指定してみたんですが、それでも現れるのです…。 widthが100%になっているのは、私が正確にテーブルレイアウトができていないためか、幅430のtdに幅430のiframeを入れると、右部分に空白ができてしまうからです…(Windowsで見た場合のみ)

関連するQ&A

  • iflameのスクロールバーについて

    ページ内に、iflameでページを表示しようとしています。 縦に長いページなので、縦にだけスクロールバーを出したいのですが… <iframe src="http://...." width="600" height="400" scrolling="yes"></iframe> こんな感じに設定しています。 ウィンドウズIEではキレイに見えています。 ですが、マッキントッシュIEで見ると、スクロールバーが表示されません。 <iframe src="http://...." width="600" height="400" scrolling="auto"></iframe> にすると、マッキントッシュIEでもスクロールバーがきれいに表示されるのですが、 ウィンドウズIEで、必要のない下の部分(横部分)のスクロールバーまで出てしまいます。 この横スクロールバー、たとえ中味を短くしても、表示されるので…すごーく嫌なのです…。 マッキントッシュと、ウィンドウズ両方で、たて部分だけスクロールバーが出るようにする方法はあるのでしょうか?

    • ベストアンサー
    • HTML
  • インラインフレームについて

    よろしくお願いいたします。 インラインフレームで、 <IFRAME src="●●.htm" name="kowaza_iframe" width="500" height="300" frameborder="0" scrolling="AUTO"> </IFRAME> とした場合、中に表示する●●.htmの高さが300以上だと、スクロールバーが表示されて、●●.htmがすべて表示されません。これをどんな大きさの●●.htmであっても、そのファイルをそのまま全体を表示することはできないでしょうか? それとも、そもそもインラインフレームでそのようなことは無理あのでしょうか?

    • ベストアンサー
    • HTML
  • インラインフレーム内のスクロールバーの色変更について

    インラインフレーム内のスクロールバーの色を白に変更したいのですがインラインフレームを置いている親ページのスクロールバーの色が変わってしまいます インライフレーム内の元ページのスクロールバーの色も変更していますが出来ません インラインフレーム内のページタグ <HEAD><style type="text/css"> <!-- body { scrollbar-base-color: #ffffff scrollbar-arrow-color: #ffffff; } --> </style> 親ページのタグ <IFRAME frameborder="0" src="file:///J:/hompage/haikyo.html" width="470" height="470" scrolling="AUTO" scrollbar-base-color: #ffffff style="scrollbar-darkshadow-color : white;scrollbar-face-color : white;scrollbar-3dlight-color : white;scrollbar-highlight-color : white;scrollbar-arrow-color : white;scrollbar-shadow-color : white;scrollbar-base-color : white;scrollbar-track-color : white;"></IFRAME> ネットでも検索してみましたが検索の仕方がわるいのかうまく出来ません アドバイスお願いします

    • ベストアンサー
    • HTML
  • CSSでスクロールバー

    CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか?右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか??

    • ベストアンサー
    • HTML
  • インラインフレームがうまく表示できない

    初心者のためうまく説明できないかもしれませんが、よろしくお願いします。 インラインフレームを使ったページを作りました。 Firefoxでは思った通りに表示できたのですが、Safariで見てみると設定したサイズになっておらず、縦横ともにスクロールバーが出ています。 色々試してみましたが解決できませんでした。 お力を貸してください。 以下抜粋ですが、 <td width="550"height="500" align="left" valign="top" nowrap="nowrap"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <iframe src=" ""link1.html""link2.html""link3.html"width="550" height="500"name="link"frameborder="0"scrolling="auto"></iframe> </td> としてあります。

    • ベストアンサー
    • HTML
  • インラインフレーム

    初めまして。初歩的なことかもしれませんが、 よろしくお願いいたします。 私のHPは、メニュー部分をインラインフレームを使っています。 最初は、そんなにメニュー項目がなかったので、高さ設定をそんなに大きく取ってませんでしたが、メニューの項目を追加していくにあたり、設定していた高さでは足りなくなりました。 スクロールにはしたくありません。 毎回、高さ設定をしなおさずに、うまく入れられることは出きますでしょうか? ちなみに、インラインフレームのタグは、 <IFRAME name="menu" border="0" frameborder="0" marginheight="0" marginwidth="0" src="menu.html" width="143" height="1600" scrolling="no" title="メニュー">このページはインラインフレームを使用しています。</IFRAME> です。 よろしくお願いいたします。

  • インラインフレームの横スクロールバーを消すには?

    インラインフレームを使用したHPから、FC2ブログを呼び出そうとしています。 すると、必ず横スクロールバーが表示されます。 この横スクロールバーを消したい場合には、どのようにすれば良いでしょう。 ちなみにこのページになります。 http://ee.uuhp.com/~macyako/ ブログのbodyタグに以下を追加しましたが、無理でした。 body { overflow-x: hidden; } あと、インラインフレームの幅を広げてみたりしたのですが無理でした。 ソースが間違ったりしていますか?

  • インラインフレームのスクロールバーの色を変えたい

    CSSのbodyタグでスクロールバーの色指定をしました。外部スタイルシートと、head内に書き込むのと二通りで試しましたが、どちらの場合もブラウザのスクロールバーは反映されるのに、インラインフレームのスクロールバーは変わりません。 インラインフレームの変え方をどなたか教えていただけないでしょうか? ブラウザはIE6.0を使っています。

  • インラインフレームについて。

    インラインフレームについて。 インラインフレームは掲載するサイトの位置を決め固定することはできないのでしょうか? http://girlschannel.net/topics/144767/ ↑このサイトの上部に 2. 匿名 2014/05/30(金) 10:19:40 [通報] スコティッシュフォールド という書き込みがあります。 そのあたりをもう1つのホームページに表示させたいのですがスクロールしたものがでてきたり位置を調節できません。 ちなみに作成中のタグです。 <iframe src=" http://girlschannel.net/topics/144767/" width="?" height=?"px" frameborder="?">猫</iframe> ?は解らない所です。 他にその部分だけを表示させる方法はあるかもしれませんが解らないのでこの方法にしました。 あれば良ければ教えて頂きたいです。 どなたかご指導頂きたいです。 よかったらご意見ください。

    • ベストアンサー
    • HTML
  • html、スクロールバーを表示させない(横だけ)

    HTMLでフレームのスクロールバーを表示させないには <frame>、<iframe>タグの属性、scrolling="no"とすればよいのですが それでは縦のスクロールバーも横のスクロールバーも消えてしまいます。 自分は横のスクロールバーのみ消して縦のスクロールバーのみ残したいのですがどうすればいいでしょう? 補足:上下にのみ動かせるページを作りたい。ということ。 わかるかたどうかお願いいたします。 HTMLでムリでしたらJavaScritpなどでもかまいません(が、解説、もしくは解説ページを教えていただかないと自分はJavaScriptが打てませんので・・・よろしくお願い致します。)

専門家に質問してみよう