1419942163 2つのwebページを1つに纏める際のcssの扱い方


webページを作っています。サイトAのページの中に、サイトBのコンテンツを、デザインをそのままで挿入したいです。(添付画像参照)その場合のCSSの合体の仕方で困っています。サイトBは、サイトB独自のcss(styleB.css)で作り込まれています。リセットCSSもサイトAとBで違います。サイトAに組み込んだコンテンツZには、styleA.cssではなくstyleB.cssを適用したいです。こういった場合cssの移行(合体)は、どのような方法で行うのが良いのでしょうか?コンテンツZのデザインに関係している部分をstyleB.cssから探してコピーし、styleA.cssに追加する、という手順はとても時間がかかりますが、その方法しか無いでしょうか?より作業時間の少ない方法が有れば嬉しいです。iframe以外の方法でご教授頂ければ幸いです。どうぞよろしくお願い致します。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2014/12/30 21:22:43
  • 終了:2015/01/06 21:25:03

回答(1件)

id:gizmo5 No.1

gizmo5回答回数484ベストアンサー獲得回数1382014/12/31 12:56:47

ポイント200pt

具体的な CSS を見ていないので的を外しているかもしれませんが、私ならコンテンツZ をひとつの要素で囲んで styleB.css のセレクタをその要素の下位になるように全て書き換えます。

<div class="container-b">
	コンテンツZ
</div>
/* DIV.container-b をセレクタに追加する */
DIV.container-b h3 {
	...

リセットのCSSはコードは違うにしてもリセットの為に使われているのであれば大差ないと思います。

id:AQUARROWS

ご回答ありがとうございます。

>styleB.css のセレクタをその要素の下位になるように全て書き換え

styleB.css内のセレクタ全てにDIV.container-bを付与するという解釈で良いでしょうか?「コンテンツZに関係する箇所を探して」という作業をしないのは時間の短縮になりますね!不要な記述が残る事になりますが、今回は時間を短縮したいので、ご教示頂いた方法が役に立ちそうです。ありがとうございます。

2015/01/06 13:19:51
id:AQUARROWS

質問文に書いた方法よりも「もっと一般的な方法」とか「こちらの方が時間がかからない」とか「便利な変換ツール」などの画期的な方法が有るのかもしれない、と考え質問致しました。引き続き宜しくお願い致します。

  • id:jislotz
    自分、そのとても時間がかかる手順でやっちゃうかも…。効率の良いツールとか何にも知らない。
    いい回答つくといいなと期待。
    「CSS 不要な記述」をGoogle検索したら
    Firefoxの拡張、Dust-Me Selectorsの情報を得られたけど、
    もっと良いツールはきっとあるはず。
  • id:AQUARROWS
    >ジント兄さん様

    コメントありがとうございます。ブラウザの拡張機能で探してみました。おっしゃる通り、もっと目的に近いツールが見つかると良いのですが。ありがとうございます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません