0

ホームページの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>
4
  • いただいたコードだけではちょっと原因がわかりませんでした。header.htmlの内容、CSSをどこに記述しているのか、CSSのコードを再現性が取れるように、追記いただけますか?参考:再現可能な短いサンプルコードの書き方
    – keitaro_so
    Commented 2021年5月17日 2:15
  • header.htmlの中には元コードの中身のhtmlの<header></header>のなかみをコピーしてタグを<div id="header">に変えて貼り付けています。cssは同一階層のresponsive_2c/css/style.cssに記載があり、headでは相対パスで読み込んでいます。 Commented 2021年5月17日 2:37
  • タグを変えているということはタグの組み方を間違えている?header.htmlの中身を見ないことには判断ができそうにないですね。・お手数ですが公開できない部分はもちろん除いていただいて結構なのでheader.htmlを質問に追記いただけると幸いです。
    – keitaro_so
    Commented 2021年5月17日 3:07
  • 追記致しました。よろしくお願いします。 Commented 2021年5月17日 4:01

1 件の回答 1

0

header<div id="header">に書き換えていますが、
CSSのほうを書き換え忘れていますね

今のCSS

header {

書き換え後

#header {

これでCSSが当たると思います

2

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。