

**現象**  
作成中のHPをVS CodeのLive Serverでプレビューとして見た。  
CSSとSCSSが反映されない。

**期待値**  
logo.svgを`width: 120px;`、`height: 40px;`に設定したい。

**再現手順**

下記のコードをGoogle Chromeで実行する。

index.html

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ポートフォリオサイト1</title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
        <header class="header">
            <a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
            <nav class="header__breadcrumb-trail">
                    <a href="" class="header__breadcrumb-trail">About</a>
                    <a href="" class="header__breadcrumb-trail">Bicycle</a>
            </nav>
        </header>
    
    <!-- 省略 -->
    
    </body>
    </html>
    
[/code]

header.scss

[code]

    .header {
        .header__profile_button {
                width: 120px;
                height: 40px;
        }
    }
    
[/code]

header.css（header.scssをコンパイルしたもの）

[code]

    .header .header__profile_button {
      width: 120px;
      height: 40px;
    }
    
[/code]

下のURLのサイトを模写していました

<https://code-step.com/demo/html/profile/>


CC BY-SA 4.0
2021-12-10T13:42:15.183
84053
2021-12-16T23:50:54.613
2021-12-16T23:50:54.613
36906
36906
question
css html5 scss
HPを作成中ですが、CSSとSCSSが反映されません。


基本的なことを確認しますが、  
header.scssをコンパイルしてheader.cssは作れたのですか？

header.scss

[code]

    .header {
        .header__profile_button {
                width: 120px;
                height: 40px;
        }
    }
    
[/code]

header.scssをコンパイルしてできたheader.css

[code]

    .header .header__profile_button {
      width: 120px;
      height: 40px;
    }
    /*# sourceMappingURL=header.css.map */
    
[/code]


CC BY-SA 4.0
2021-12-11T01:44:24.420
84060
2021-12-11T01:44:24.420
43005
84053
answer