75887


ホームページのheaderを

[code]

    <script>
    //共通パーツ読み込み
      $(function() {
           $("#header").load("components/header.html");
    });
    </script>
    
[/code]

で読み込み

[code]

    <div id="header"></div>
    
[/code]

で表示してます。  
このヘッダー自体は表示されてるんですがcssが効いてません。  
cssの読み込みは共通化する前と全く書き換えてません。  
どなたか理由がわかる人はいますか？

### 追記

header.htmlの中には元コードの中身のhtmlの `<header></header>` の中身をコピーしてタグを `<div
id="header">` に変えて貼り付けています。  
cssは同一階層のresponsive_2c/css/style.cssに記載があり、headでは相対パスで読み込んでいます。

cssの該当箇所のコードは以下になります。

[code]

    /*================================================
     *  ヘッダー
     ================================================*/
    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%;
        }
    
    }
    
[/code]

header.htmlはこうなってます。

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2021-05-17T01:54:50.643
75884
2021-05-17T04:22:04.657
2021-05-17T04:14:29.097
3060
45338
question
javascript html jquery css
JavaScriptで.loadしたheaderにcssが適用されない


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

今のCSS

[code]

    header {
    
[/code]

書き換え後

[code]

    #header {
    
[/code]

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


CC BY-SA 4.0
2021-05-17T04:22:04.657
75887
2021-05-17T04:22:04.657
22665
75884
answer