ホームページのheaderを ``` <script> //共通パーツ読み込み $(function() { $("#header").load("components/header.html"); }); </script> ``` で読み込み ``` <div id="header"></div> ``` で表示してます。 このヘッダー自体は表示されてるんですがcssが効いてません。 cssの読み込みは共通化する前と全く書き換えてません。 どなたか理由がわかる人はいますか? ### 追記 header.htmlの中には元コードの中身のhtmlの<header></header>のなかみをコピーしてタグを<div id="header">に変えて貼り付けています。cssは同一階層のresponsive_2c/css/style.cssに記載があり、headでは相対パスで読み込んでいます。 ``` /*================================================ * ヘッダー ================================================*/ header { box-sizing:border-box; position:relative; width:100%; padding-bottom: 10px; } .header_inner { padding-top: 10px; padding-bottom: 10px; overflow: hidden; } .summary { position:absolute; top:0; right:10px; margin-top: 10px; margin-right: 0; margin-bottom: 0; margin-left: 0; } .logo { float: left; } .tel { float: right; } /*================================================ * スマートフォン向けデザイン ================================================*/ @media screen and (max-width:800px) { header { z-index:2; position:fixed; top:0; left:0; width:100%; padding:15px 10px; background-color: #FFF; } .header_inner { padding: 0; } #main { float:none; width:100%; } #sub { float:none; width:100%; } } ``` cssの該当箇所のコードは以上になります。 header.htmlはこうなってます。 ``` <div id="header"> <div class="h1_wrapper none"> <!-- InstanceBeginEditable name="h1" --> <h1>hogehoge</h1> <!-- InstanceEndEditable --> </div> <div class="inner header_inner"> <p class="logo"><a href="http:/hogehoge.com/"><img src="responsive_2c/images/logo.png" width="300" alt="hogehogeclinic"></a></p> <p class="tel"><img src="responsive_2c/images/tel.png" alt="06-1111-1111"></p> </div><!-- /.inner --> <div class="inner"> </div> <p class="m-1 none_pctab"><a href="https://ssl.haisha-yoyaku.jp/login/serviceAppoint/index?SITE_CODE=hp" target="_blank"><img src="common/img/btn_yoyaku_sp.png" alt="ネット予約"></a></p> </div> </div>