Q&A
ちゃんと黒 (#000000) になるようですが？
前提・実現したいこと
タイトルとサブタイトル（Home_section）の背景に色をつけたい
該当のソースコード
top,html
html
1<head> 2 <link rel="stylesheet" href="top.scss"> 3</head> 4<body> 5 <div class="Home_section Home_header"> 6 <span class="Home_title_sub"> 7 <span>サブタイトル</span> 8 </span> 9 <span class="Home_title_main"> 10 <span>タイトル</span> 11 </span> 12 </div> 13</body>
top.scss
scss
1.Home_section 2:nth-of-type(2n+1){ 3 background: #000000; 4} 5 6.Home_section 7:nth-of-type(2n){ 8 background:#fff; 9}
試したこと
background-colorに変更しても色がつかなかった
補足情報（FW/ツールのバージョンなど）
VSCodeを使用しています
試していただきありがとうございます。
コードは正しいのにうまく表示できない場合、どのような原因があると考えられますか？
そもそもSCSSはコンパイルしてCSS化しないとブラウザには解釈できないのでは。
Live Sass compilerを拡張機能にインストールして有効状態なのですが、反映されていないということですか？
回答2件
0
Live Sass compilerによってtop.sccsからtop.cssファイルが出来ているなら、
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="top.css"> 6</head> 7<body> 8 <div class="Home_section Home_header"> 9 <span class="Home_title_sub"> 10 <span>サブタイトル</span> 11 </span> 12 <span class="Home_title_main"> 13 <span>タイトル</span> 14 </span> 15 </div> 16</body>
で効くと思います。
質問に提示のコードでは
HTML
1 <link rel="stylesheet" href="top.scss">
となっていますが、拡張子が.sccsのファイルをスタイルシートとして読み込んでもダメなようです。
（提示されているtop.sccsファイルの内容はSCSSの文法は使っておらず、ただのCSSとしても通用する内容ではありますが）
投稿2021/09/26 12:46
総合スコア8402
Live Sass compilerの設定をしていませんでした。設定後、正しく表示されました。
助けていただきありがとうございます。これからもよろしくお願いします。
0
ベストアンサー
Live Sass compilerを下記のサイトを参照して設定することで正しく表示されました。
投稿2021/09/26 13:20
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
