ページ中のある特定のエリアだけCSSを無効にしたい

やりたいこと

以下のようなHTML、Javascriptがあるとき

<div class="container" style="margin-top:100px;">
</div>

の内部だけ、CSS（今の場合は、bootstrap.min.css、custom.css）の影響を受けないようにしたいです。

以下のHTMLでは、ページ全体がCSSの影響を受けないようになってしまうようです。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>〇〇〇</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta name="description" content="">
8  <meta name="author" content="">
9  <link href="/styles/bootstrap.min.css" rel="stylesheet">
10  <link href="/styles/custom.css" rel="stylesheet">
11  <script src="/scripts/jquery-1.8.3.min.js"></script>
12</head>
13<body>
14<header>
15  <div class="container-top" style="width:90%;">
16    <div class="row">
17              <ul class="dropdown">
18                <li><a href="/menu-a/">MENU A</a></li>
19                <li><a href="/menu-b/">MENU B</a></li>
20                <li><a href="/menu-c/">MENU C</a></li>
21              </ul>
22    </div>
23  </div>
24</header>
25
26<div class="container" style="margin-top:100px;">
27  <div class="page-header">
28    <h4>TITLE</h4>
29  </div>
30<hr>
31<!-- ここにはHTMLタグを含んだ文字が入ります。 このエリアがけCSSの影響を受けないようにしたいです。この部分にどういったHTMLタグが入るのかは、動的に変わるので特定はできない。-->
32<hr>
33</div>
34
35<div style="margin-bottom:100px;"></div>
36
37<script>
38$(document).ready(function(){
39  //$('.container').load(function(){
40    $.each($.makeArray(document.styleSheets), function(){
41      this.disabled=true;
42    });
43    $('*').removeAttr('style');
44  //});
45});
46</script>
47<footer>
48</footer>
49</body>
50</html>
51

試したこと

上記jQueryを試した

maisumakun

2019/07/09 02:53

「CSSの影響を受けないようにしたいです。」とありますが、適用を除外したいCSSはどのようなものでしょうか。

sakura-shi

2019/07/09 02:58 編集

headerで読み込んでいるcssファイルの設定内容の影響を一切受けないようにしたい

行動規範の内容に同意します

回答5件

「Bootstrapを全部外したい」というように、CSSの中身を書き直せない、あるいは書き直すのも手間がかかるというような状況であれば、<iframe>でHTMLごと分けてしまうというのも1つの方法かもしれません。

投稿2019/07/09 02:58

maisumakun

総合スコア146544

yambejp

2019/07/09 03:01

なるほどね。みんな頭いいなー

行動規範の内容に同意します

ベストアンサー

いっそのことそのエリアだけiframeでコンテンツ読み込ませるとか。

投稿2019/07/09 02:59

m.ts10806

総合スコア80888

m.ts10806

2019/07/09 03:16 編集

一応、maisumakunさんの回答を見て回答したわけではないので。自身が思っている内容が既に回答ついてたらあえて同じ回答を突っ込むなんてことはしません。その回答に支持のコメントをすることはありますが。

行動規範の内容に同意します

CSSの影響を受けない

影響しないようにCSSを書くしか無いのでは？

css
1<style>
2div:not(.container){background-Color:red}
3</style>
4<div>1</div>
5<div>2</div>
6<div class="container">here</div>
7<div>3</div>
8<div>4</div>