iframeを使わないで…CSSで実現する方法は?

このQ&Aのポイント
  • 初心者でも安心!CSSを使ってインナーフレームのような形を作る方法を解説します。
  • 普通の<iframe>は非推奨ですが、CSSを使えばインナーフレーム風の表示が可能です。
  • 外部HTMLファイルを参照させる場合はどうすれば良いのか、詳しく解説します。
回答を見る
  • ベストアンサー

iframeを使わないで・・・

私はまだ初心者ですが、以前こちらでフレームに関して相談したところ、非推奨なのでCSSを覚えましょう!と大変有難い教えを頂きました。頑張ってCSSを勉強しています。 ところがこの度どうしてもインナーフレームの様な形が必要になりましたが、<iframe>は勿論非推奨ですよね!? ですので、CSSを使って、 div#frame{border:solid 1px #000000;width 300px;height200px;      overflow:scroll;} とこんな感じで、作っておいて、HTMLの方に <div id=frame> (この間に<p>~</p>などで文章を書く) </div> と、インナーフレームの様に見えるこの形は成功したのですが、<p>~</p>の間の文章を外部HTMLファイルを参照したい場合はどのように書いたらいいのでしょうか? 画像なら <p><img src="example.gif" alt="見本">見本</p> 等として参照する構文は分かるのですが、example.htmlを参照させるにはどうしたらいいでしょうか。 宜しくお願い致します。

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

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

  • ベストアンサー
  • t_freak
  • ベストアンサー率70% (12/17)
回答No.2

<object>を使用すればよいかと。 参考URLのページの「OBJECTによるインラインフレーム」部分をご参照下さい。

参考URL:
http://www.tees.ne.jp/~pokochan/html/object.html

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

>外部HTMLファイルを参照したい 外部HTMLを取り込むならiframeですね。 書式的に非推奨ですが、そもそもやりたい自体が非推奨なことなのですから 敢て書式だけ合わせる意味もないでしょう。 もう一つは、javascriptをつかって取り込むことも不可能ではないです。 場合によってはサーバー側の技術としてcgiやphpなども手段として有効です。 (この場合はssiなどが手っ取り早いでしょうか・・・) ただ、スキル的に現状では厳しそうですのでお勧めできる段階には ないです。

関連するQ&A

  • iframeの機能をcss(divタグ)で表現する方法

    タイトル通りです。 cssでiframeの機能を使いたいです。 iframeのフレーム内にフレーム外からのリンクを表示する機能なんですが、iframeタグを使わずcssで代替した時の書き方がわかりません。 -----------------------ソース------------------------------ css----------- div.iframe { padding:10px; width:300px; height:200px; border:solid 1px pink; overflow:scroll; } <div class="iframe"> 内容 </div> ----------------------------------------------------------- わかる人がいたら教えて頂きたいです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSを使ってのiframe

    xhtmlとcssでhpを作ってます。 iframeをcssで表現したいんですが、どうしてもフレーム枠に1pxほどの枠が出てしまいますので、それを無くしたいのと、スクロールバーが出ないようにしたいのですが、どのような書き方がベストでしょうか? どなたかアドバイスをお願いします。 現状では以下の書き方をしております。 -----css----- #top{ float:left; text-align:left; width:300px; } #top_iframe{ overflow:auto; width:300px; height:150px;} -----html----- <div id="top"> <iframe src="xxx.html" title="top">更新</iframe> </div> 希望としては現状の幅300px 高さ150pxで、枠が無くスクロールバーもでないようにしたいのですが・・・ <<当方初心者なので、お返事頂けるさいにはcssとhtmlのタグでご回答願います。>>

    • ベストアンサー
    • HTML
  • CSSで擬似的にフレームを作りたい

    CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか?

    • ベストアンサー
    • HTML
  • 背景画像だけをはみ出して表示させたい。

    CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい!!</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • スタイルシートでスクロールは可能ですか?

    以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 <scroll=内容を切り抜く>ということから当然のことなのでしょうか? <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>   <TITLE>Test</TITLE>   <STYLE type="text/css">   #left {    position:absolute;    top: 130px;    left: 100px;    width: 300px; overflow: scroll;   }   #main {    position:absolute;    top: 130px;    left: 400px;   }   #right {    position:absolute;    top: 130px;    left: 700px;   }   #footer {    position:absolute;    bottom: 0px;    left: 100px;   }   </STYLE> </HEAD> <BODY> <div id="left">  left<br/> <br/>  left<br/> </div> <div id="main">  main </div> <div id="right">  right </div> <div id="footer">  footer </div> </BODY> </HTML>

  • overflowのscrollを自動で移動

    CSSでoverflow:scrollと設定したときに表示されるフレームをボタンを作ってこのボタンを押したときに○○px横に自動的にスクロールさせるようなjavascriptはどのように書けばいいのでしょうか??対応ブラウザはIEのみで大丈夫です。

  • 「overflow: hidden」ペー ジ内リンクで画面がずれてしまう

    <body>に「overflow: hidden」を指定してスクロールバーを非表示にし、 領域<div class="scroll">内のみスクロールさせる「擬似フレーム」的(?)なものをつくりました。 そして、<div class="scroll">の中をクリックで移動するためのアンカーリンクを設けました。 ブラウザのウィンドウサイズが十分に大きい場合は問題ないのですが、 ウィンドウサイズが小さい(本来なら縦スクロールが必要になるサイズ)場合、 リンククリックで画面内が上にピッとずれてしまいます。 <body>に「position: fixed」を指定すればFirefox等では解決しますが、IEではダメです。 このズレを防ぐ方法はないものでしょうか。 以下サンプルソースです。 <html> <head> <style type="text/css"> <!-- body { overflow: hidden; /*---↓Firefox等でOK、IEはダメ------- position: fixed; top: 0px; -----------------------------------*/ } .scroll { overflow: auto; height: 200px; background: #CCCCCC; padding: 10px; } --> </style> </head> <body> <h1>ページ内リンクによる「scroll」と「overflow: hidden」 </h1> <ul> <li><a href="#topic1">その1>> </a></li> <li><a href="#topic2">その2>> </a></li> <li><a href="#topic3">その3>> </a></li> </ul> <div class="scroll"> <div id="topic1"> <h2>その1</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic2"> <h2>その2</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic3"> <h2>その3</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> </body> </html>

  • CSSで「overflow:scroll」をしてい

    CSSで「overflow:scroll」をしているボックス内で表示している 特定のボックスを最前面に表示させることは 可能なのでしょうか。 文字では説明しにくいので 例として ------------- <STYLE type="text/css"> .box1{ overflow: scroll; width: 200px; height: 100px; } .box2{ width: 200px; height: 40px; background-color: yellow; position: relative } .box3{ width: 200px; height: 40px; background-color: pink; position: relative; left: 100px; top: -10px } </STYLE> <div class="box1"> <div class="box2">Box No.2</div> <div class="box3">Box No.3</div> </div> ------------- だとして、 <div class="box3">Box No.3</div>を <div class="box1">よりも前面に表示させたいのですが スタイルシートで実現可能なのでしょうか。 いろいろ調べながらやってみましたが 解決できなかったので知恵をお貸し頂ければと思い 投稿させて頂きました。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • スクロールバーのデザインを変えたい

    CSSの設定で div#information { height: 150px; overflow: scroll; } という風に記述した時に現れるスクロールバーのデザインを変えたいのですが、IE以外でも対応している方法はないでしょうか? スクロールバーのデザインを変えるいい方法がありましたら教えて下さい。

    • ベストアンサー
    • HTML
  • レスポンシブデザインで、インラインフレーム

    ワードプレスでレスポンシブデザインで、インラインフレームを設置したのですが、 どうもうまくいきません。PCに合わせるとスマホがみだれ、逆にすると逆になります。 ようやくましな形にしましたが、PC側のインラインフレームの中が左に寄ってしまいます。 pcのメインの幅は600PXです。 それからスマホでスクロールバーでスクロールさせよと CSSハックを設置しましたが、こちらも効きません。 どうしたらよいのでしょうか? http://demo.kurafukudo.com/pc/ CSS div.frame, div.frame iframe[style], div.frame span { width: 100% !important; } @media screen and (max-device-width: 480px) { .frame div{height:300px; overflow:auto; -webkit-overflow-scrolling: touch;} } HTML <div class="frame"><iframe src="http://demo.kurafukudo.com/p_pc/" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes"style="border-color:#000000; scrollbar-base-color: #ccff99;  scrollbar-arrow-color: #0000ff;">このページはインラインフレームを使用しております。未対応ブラウザは閲覧できませんのでご了承ください。 </iframe> 呼び出し先 <table width="90%" > <tbody> <tr> <th colspan="2"height="18"> SONY</th> </tr> <tr> <td width="50%" height="18">SDV13228DJ WB</td> <td width="50%" align="right">100,000</td> </tr> <tr> 省略

    • ベストアンサー
    • HTML

専門家に質問してみよう