divの中に外部のHTMLを埋め込む

質問

divの中に外部のHTMLを埋め込む（読み込む）ことはできますか？推奨されていますか？
その際には何というタグで読み込むのでしょうか？

IE8/9を対象にしています。

jqueryで作った独自のコンテンツ（html)を読み込みたいです。
なぜメインのHTMLに直接j独自コンテンツのソースを張ろうと思わなかったのは
こちら側で作ったコンテンツを第三者に配布した場合、
jqueryで作ったページが利用しているCSSのidセレクタ名などがメイン（読込み先html）が利用しているCSSのidとかぶってしまう可能性があると思ったからです。
メインページが読み込むCSSはメインページが利用するCSSただ１つとしておきたいのです。

何かいい方法はありますか？

回答No.1

ORUKA1951 · ベストアンサー

他のHTMLを読み込む方法は、一般的にはiframeですが、HTML4.01では、DOCTYPEが、framesetしか使えません。しかし、frameset自体が非推奨です。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』

　objectを使用することが出来ます。objectは、何でも入れられます。ただし、frameほど複雑なことは出来ません。

　それ以前に、『こちら側で作ったコンテンツを第三者に配布した場合、
jqueryで作ったページが利用しているCSSのidセレクタ名などがメイン（読込み先html）が利用しているCSSのidとかぶってしまう可能性があると思ったからです。』の意味がわかりません。

　少なくともidは、リンク先でも、javascriptのtargetでもないのに使うことは避けましょう。class名はいくら重複してもスタイルシートで区別できるはずです。--ちゃんとしたHTMLならですが・・

<div class="section">
　<h2>見出し</h2>
　<p>記事のまとめ</p>
　<div class="section">
　　<h2>項見出し</h2>
　　<p>簡単な記事</p>
　　<div class="section">
　　　<h2>サブ項目</h2>
　　</div>
　　<div class="section">
　　　<h2>サブ項目</h2>
　　</div>
　</div>
</div>
<div class="section">
　<h2>見出し</h2>
　<p>記事のまとめ</p>
　<div class="section">
　　<h2>項見出し</h2>
　　<p>簡単な記事</p>
　　<div class="section">
　　　<h2>サブ項目</h2>
　　</div>
　　<div class="section">
　　　<h2>サブ項目</h2>
　　</div>
　</div>
</div>
というHTMLがあったとして、スタイルシートを次のように書くことで、すべての<h2>の色が変わりますよね。
(注)上記HTMLのソース中のタブは全角スペースに置換してあるので、タブないし半角スペースに戻してください。

div.section h2{color:red;}
div.section div.section h2{color:blue;}
div.section div.section div.section h2{color:aqua;}
div.section div.section div.section + div.section h2{color:black;}
div.section div.section div.section + div.section + div.section h2{color:maroon;}
div.section + div.section h2{color:fuchsia;}
div.section + div.section div.section h2{color:gray;}
div.section + div.section div.section div.section h2{color:green;}
div.section + div.section div.section div.section + div.section h2{color:lime;}
div.section + div.section div.section div.section + div.section + div.section h2{color:yellow;}

IDは決してデザインのために記述すべきではありません。(スタイルシートの説明のために使うことはありますが、通常のHTMLではリンクのターゲットやjavascriptのターゲットのように、文書中の一意の要素を特定するためだけに使用します。
　class名は、ページ内に何度登場しても良いですが、その目的はIDと同様に
『文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのものです。たとえば、それが本文記事でしたらsectionとか・・。
　もし、そのようにきちんと書かれていたら、そのidやclass名を使って====!!!文書構造を利用して!!!!====スタイルシートでプレゼンテーションを指定していきます。
　しかも多く利用されるスタイルシートは【カスケーディング】スタイルシートですから、カスケーディングの仕組みを利用すると、簡単にデザインしたい要素が決まるはずです。
HTMLが、
.section 編
　　.section 章
　　　　.section 項
と言う形でしたら
二つ目以降の編の　div.section + div.section
項　　　　　　　　　　　　　　　div.section
の二つ目以降の項の　　　　　　　　　　　　　+div.section
のみだし　　　　　　　　　　　　　　　　　　　　　　　　h2
の色は、yellow

と、実に簡単に設定できますね。後からスタイルシートを見るだけでHTMLなんて見なくても意味がわかるし、修正・メンテナンスも簡単です。

★たとえば、簡単に<div>で囲むだけでも、その内部のデザインを他の区別して指定できますよ。
　idをむやみに使わなければダブル事はありません。
　class名は、どんなにダブろうがスタイルシートのセレクタさえきちんと書けば問題ありません。
　　　そもそも、idもclassもそのため--スタイルシートのものではありません。あくまで、文書構造を補完するために付けられたidやclass名を利用するだけです。
　この段階を乗り越えないと、本当の意味でのHTMLとスタイルシートの利用は出来ません。

補足

ありがとうございます。

＞『こちら側で作ったコンテンツを第三者に配布した場合、
jqueryで作ったページが利用しているCSSのidセレクタ名などがメイン（読込み先html）が利用しているCSSのidとかぶってしまう可能性があると思ったから』

というのは

(javascript.css)←こちらが配布するCSS
.test {
color:red;
}

(style.css)←相手がメインで使っているCSS
.test {
color:blue;
}

メインのhtml
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/javascript.css" />
省略
<p class="test">メインテキスト</p>
<p class="test">Jqueryテキスト</p>
省略

こうなるとメインテキストは本来「青色」で相手は指定しているのにもかかわらず
こちらが配布するCSSでたまたま同じclass名が指定されてあったら
クラス名がかぶってしまい、後から読み込まれたほうのjavascript.cssのtestセレクタ（class)で
メインテキストは「赤色」になってしまいますよね？

という問題があるのではないかと思います。

回答No.5

tracer

No.4さんの回答が完璧ですね！
内容は他の方と同じですが、ちょっと補足的に書いてみます。

配布を検討されているのでしたら、一番の解決策は、被らないようなidやclassをつけることですね。100%被らないものはありませんが、ほぼ被らないようにするのは、そんなに難しくないと思いますよ。他の回答にもありましたね。おそらく、この方法が一般的です。

最も簡単な回避策としては、iframeが挙げられますが、これは設置側からすると嫌われる場合もありますね。

No.4さんの回答に、scopeの使用がありましたが、現在scopeが正常に動作するブラウザってありましたっけ？

回答No.4

神崎 渉瑠（@taloo）

class名とスタイルシートの競合は、いくつかの方法で何とかできます。
・<iframe>か<object>を使用すれば、セレクタが競合することはありません。
（それぞれ独立したファイルとして扱われるので）

・style属性で１つずつ指定していけば、その要素にだけ適用されます。

・HTML5なら、scoped属性が使えます。

<section>
<style scoped>
p.foo{color: red;}
</style>
<p class="foo">赤い文字</p>
</section>
<p class="foo">標準文字</p>

IDがかぶっている場合はどうしようもありません。
<iframe>などを使うか、プレフィクスを付けるなどしてかぶらないことを保証してください。

回答No.3

LOHA

クラス名などが被るのを防ぎたいのであれば、単純にその名前を工夫するだけで良いのではないのでしょうか？
例えばsomething.jsという名前で配信するのであれば関連する全てのクラス名を .something-classname といった感じで指定するようにするだけで、十分な気がします。
絶対に被るのが嫌というのであれば .com-example-something-classname のような感じでドメインをつければ確実かもしれません（見たことありませんが）。

回答No.2

ORUKA1951

＞<p class="test">メインテキスト</p>
＞<p class="test">Jqueryテキスト</p>
<div>
<p class="test">メインテキスト</p>
<p class="test">Jqueryテキスト</p>
</div>

なら、本来のスタイルシートのほうは
p.test:first-child{color:blue;}/* 詳細度 0,0,2,1 */
p.test{color:red;}/* 詳細度 0,0,1,1 */

とかにしておけば、相手がたとえ指定しても、詳細度が高いので上書きされませんね。

要は、HTMLが文書構造がきちんと示されていれば--くかもりはそのためのもの---、セレクタでプレゼンテーションを指定する対象が特定できるということです。

もちろん、
<div class="default">
　<p class="test">メインテキスト</p>
</div>
<div class="ins">
　<p class="test">Jqueryテキスト</p>
</div>

とするか、本来のHTML的に
<div>
　<p class="test">メインテキスト</p>
　<ins>
　　　<p class="test">jqueryテキスト</p>
　</ins>
</div>
として
div>p.test{color:blue;}
として置けば良いし・・・

　様々な指定方法が用意されています。カスケーディングの機能があるからCSSを使うのですから、まずカスケーディングを身につけないと何のためのスタイルシートかわからないですよ。
★5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
★6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

　他のHTMLを読むなんて変なことをしなくても、方法は必ずあります。