ホームページの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では相対パスで読み込んでいます。
cssの該当箇所のコードは以下になります。
/*================================================
* ヘッダー
================================================*/
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%;
}
}
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>