現象
作成中のHPをVS CodeのLive Serverでプレビューとして見た。
CSSとSCSSが反映されない。
期待値
logo.svgをwidth: 120px;
、height: 40px;
に設定したい。
再現手順
下記のコードをGoogle Chromeで実行する。
index.html
<!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>
header.scss
.header {
.header__profile_button {
width: 120px;
height: 40px;
}
}
header.css(header.scssをコンパイルしたもの)
.header .header__profile_button {
width: 120px;
height: 40px;
}
下のURLのサイトを模写していました