ネットが遅くてイライラしてない!?

私はまだ初心者ですが、以前こちらでフレームに関して相談したところ、非推奨なので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を参照させるにはどうしたらいいでしょうか。

宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<object>を使用すればよいかと。


参考URLのページの「OBJECTによるインラインフレーム」部分をご参照下さい。

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

>外部HTMLファイルを参照したい



外部HTMLを取り込むならiframeですね。
書式的に非推奨ですが、そもそもやりたい自体が非推奨なことなのですから
敢て書式だけ合わせる意味もないでしょう。

もう一つは、javascriptをつかって取り込むことも不可能ではないです。
場合によってはサーバー側の技術としてcgiやphpなども手段として有効です。
(この場合はssiなどが手っ取り早いでしょうか・・・)

ただ、スキル的に現状では厳しそうですのでお勧めできる段階には
ないです。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTML5 iframe の代わり

HTML5でiframeが認められなくなりました。
今まで下記のように

ボタン1ボタン2ボタン3ボタン4ボタン5ボタン6
<旧iframe></旧iframe>

ボタンは表示し続け下にボタンに応じたページを
表示させたい場合一般的にどうすればよいのでしょうか?
javascriptに頼らざるをえませんでしょうか?
皆様のよきご回答をお待ちしております。

Aベストアンサー

><li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょう

 ブラウザの表示メニューから「スタイルシートなし」を選択してみたら、極めてシンプルなHTMLだと言うことがわかると思います。
 単純にページ内アンカーに飛んでいるだけです。

 HTML5では、HTML4.01以上に、文書構造に従ったマークアップが求められています。実はHTML4.01もそうであったが、
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」

 しかし、その部分はまったく守られていなかったために、HTML5では、文書構造を示すタグが追加されたにすぎません。!!!!

 ソースを見られてもお分かりのように、スタイルシートを除けば、わかりやすいマークアップがされています。あなたにも検索エンジンにもわかる。

 デザイン、どのように見せるかと、文書構造は独立して考えるべきです。まず、デザインは後回しにして、HTMLの基本をしっかりと学んでください。HTML5はまだ勧告の段階ではありませんから、HTML4.01strictを身につけること。
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
 とか。・・・HTML4.01ですが、HTML5は、HTML4.01strictの改訂版です。transitinalなんて知らなくて良い。

 その後、スタイルシートを学んでください。

><li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょう

 ブラウザの表示メニューから「スタイルシートなし」を選択してみたら、極めてシンプルなHTMLだと言うことがわかると思います。
 単純にページ内アンカーに飛んでいるだけです。

 HTML5では、HTML4.01以上に、文書構造に従ったマークアップが求められています。実はHTML4.01もそうであったが、
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.a...続きを読む

QHTMLのIFRAMEの代替について

HTMLで、現在iframeにてtargetを用いたホームページを作っています。
iframeのままでいられるのが一番いいのですが、高さの自動変換が不可能なため、作り直そうと考えています。ホームページの形としては、
iframe1
iframe2
iframe3
と分けて、iframe2にはiframe3で表示する連番の数字をクリックすると、targetとしてiframe2に画像のみのHTMLが表示され、クリックするとページが進むようになっています。
その画像のHTMLが縦に長い際には自動で高さを変えてくれるjavascriptなどを試してみたものの、どれも失敗に終わり、諦めて、自動で高さを変えてくれるheight=”auto”のようなことをしてくれる要素のあるモノを探しています。CSSなどで作るフレームもどきなどは、高さを自動で変えることはできるのでしょうか。
何か代替に心当たりのある方は、よろしくお願いします。

Aベストアンサー

それぞれのページの内容や数によってどの方法が良いかが決定します。
 多くの場合、最も良いシンプルな方法は、そもそも別ページにしてデザインを統一する事です。これは、検索エンジンに認識されることや検索エンジンの作成したデータにリンクしたときにサブページが表示されないなど・・。またブックマークにも正しく登録されます。もちろん作成も楽になります。もちろんHTMLの
 企業サイトでは、絶対にiframeを使わないのは上記の理由によるものです。それでは各ページに同じ内容を書くことになりますが、それはSSI(Server Side Includes)というとても古くからある技術かPHPなどのincludeを使用します。
 新しい技術ではなく、古くからある枯れた技術を使うほうが良いとお思います。

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

QiframeはSEO的に不利になる?

iframeはSEO的に不利になる!という記事をよく見かけるのですが、これは具体的にどういうことでしょうか?

よく見かけるというのは「iframeを使うことによって表示されたコンテンツはクローラーから見られた時に"意味のないコンテンツ"だと評価されるので、できるだけ使わないようにするべき」というものですが、iframeで表示したいコンテンツが特に意味のない"ただデザイン上使いたい"という理由であれば使用しても問題ないでしょうか?

例えばiframeを使う事によってページが重くなってしまい評価が下がってしまうだとか、iframeを使うこと自体がNGだとか、そういう理由から"iframeはSEO的に不利になる!"と言っているのか分かりません。

面倒な質問ですが宜しくお願いします

Aベストアンサー

SEO観点で不利だ有利だ、という話題は聞く耳をもたないほうがよろしいです。

SEOということば自体が、人を押しのけて自分が前に出ようという感覚です。
だから、自分と他とおんなじドングリだと思う発想から生まれています。

もし唯一無二のことを提供していたりするのであればそれしかないのですからSEOもなにもありません。

iframeですが、
これでなければいけないというのは、動画のようなものを扱いながらスマホでもPCでも大丈夫なレスポンシブなページにしたい場合です。
これでなければいけないなら使うしかないでしょう。情報が発信できなければ何も始まらない。

SEOなんて議論にもなりません。

一方、iframeを層状にして積むなんていう、意味不明なテクニックを行使しようとしたらgoogleは嫌います。
多数のブラウザに対応可能な保証はないからです。
一般にframe系を嫌うのは、多層化して事故確率が増えるからです。

それと、SEOなんて考えるのは入口ページだけでいいでしょう。
iframeで構成しているページにはリンクで飛ばせばいいのではないですか。

ひとより目立つためにどういう服を着たらいいかなんか考えずに、優れた独自のページを作ることに頭を使うのがまっとうではないでしょうか。
Googleもそう推奨していますよ。
小手先の変なページを切り捨てるためのペンギンやパンダの子孫はこれからもどんどん進化します。
ペンギンがどう動くか対策なんか考えている暇があるなら、皆が寄ってくる情報を展開するのがいいのではないですか。

SEO観点で不利だ有利だ、という話題は聞く耳をもたないほうがよろしいです。

SEOということば自体が、人を押しのけて自分が前に出ようという感覚です。
だから、自分と他とおんなじドングリだと思う発想から生まれています。

もし唯一無二のことを提供していたりするのであればそれしかないのですからSEOもなにもありません。

iframeですが、
これでなければいけないというのは、動画のようなものを扱いながらスマホでもPCでも大丈夫なレスポンシブなページにしたい場合です。
これでなければいけないなら使う...続きを読む


人気Q&Aランキング