質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

731閲覧

cssの一部を変更したいです

seakai

総合スコア24

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/28 01:13

編集2021/04/28 03:33

前提・実現したいこと

.headerでbackground-color: turquoise;にしたいです。
この前はbackground-color: purple;にしていました。
他の指定は反映されるのですが、background-color: turquoise;だけが反映されず、前に指定した色が残ったままです。

vscodeを使用していて、Live Sass Compilerでscssをcssに変換し、cssでもbackground-color: turquoise;になっていることを確認しました。
chromeでスーパーリロードもしてみましたが変わりません。

<body>タグの上に<link rel="stylesheet" href="css/header.css">と記入しています。

この場合、何がおかしいのかご教示いただけると幸いです。

該当のソースコード

html

1<header class="header"> 2 <div class="header_logo"> 3 <a href=""> 4 <img src="img/logo.jpg" alt="Engress"> 5 </a> 6 </div> 7 <nav class="header_nav"> 8 <div class="ham"><a href=""><span class="ham-line ham-line1"></span><span class="ham-line ham-line2"></span><span 9 class="ham-line ham-line3"></span></a></div> 10 <ul class="header_list"> 11 <li class="header_list-item"><a href="" class="p">1</a></li> 12 <li class="header_list-item"><a href="" class="p">2</a></li> 13 <li class="header_list-item"><a href="" class="p">3</a></li> 14 <li class="header_list-item"><a href="" class="p">4</a></li> 15 </ul> 16 <div class="header_right"> 17 <div class="tel-box"> 18 <small class="tel-hour">open</small> 19 <p class="tel-number"><a href="tel:+81-90-0000-0000" class="p">000-0000-0000</a></p> 20 </div> 21 <div class="square-request-btn header-btn"><a href=""><span class="square-request-btn-text">資料請求</span></a> 22 </div> 23 <div class="contact-btn header-btn"><a href=""><span class="contact-btn-text">お問い合わせ</span></a></div> 24 </div> 25 </nav> 26 </header>

scss

1@charset 'utf-8'; 2 3//style.scss 4 5/* 6html5doctor.com Reset Stylesheet 7v1.6.1 8Last Updated: 2010-09-17 9Author: Richard Clark - http://richclarkdesign.com 10Twitter: @rich_clark 11*/ 12 13html, 14body, 15div, 16span, 17object, 18iframe, 19h1, 20h2, 21h3, 22h4, 23h5, 24h6, 25p, 26blockquote, 27pre, 28abbr, 29address, 30cite, 31code, 32del, 33dfn, 34em, 35img, 36ins, 37kbd, 38q, 39samp, 40small, 41strong, 42sub, 43sup, 44var, 45b, 46i, 47dl, 48dt, 49dd, 50ol, 51ul, 52li, 53fieldset, 54form, 55label, 56legend, 57table, 58caption, 59tbody, 60tfoot, 61thead, 62tr, 63th, 64td, 65article, 66aside, 67canvas, 68details, 69figcaption, 70figure, 71footer, 72header, 73hgroup, 74menu, 75nav, 76section, 77summary, 78time, 79mark, 80audio, 81video { 82 margin: 0; 83 padding: 0; 84 border: 0; 85 outline: 0; 86 font-size: 100%; 87 vertical-align: baseline; 88 background: transparent; 89} 90 91body { 92 line-height: 1; 93} 94 95article, 96aside, 97details, 98figcaption, 99figure, 100footer, 101header, 102hgroup, 103menu, 104nav, 105section { 106 display: block; 107} 108 109nav ul { 110 list-style: none; 111} 112 113blockquote, 114q { 115 quotes: none; 116} 117 118blockquote:before, 119blockquote:after, 120q:before, 121q:after { 122 content: ''; 123 content: none; 124} 125 126a { 127 margin: 0; 128 padding: 0; 129 font-size: 100%; 130 vertical-align: baseline; 131 background: transparent; 132} 133 134/* change colours to suit your needs */ 135ins { 136 background-color: #ff9; 137 color: #000; 138 text-decoration: none; 139} 140 141/* change colours to suit your needs */ 142mark { 143 background-color: #ff9; 144 color: #000; 145 font-style: italic; 146 font-weight: bold; 147} 148 149del { 150 text-decoration: line-through; 151} 152 153abbr[title], 154dfn[title] { 155 border-bottom: 1px dotted; 156 cursor: help; 157} 158 159table { 160 border-collapse: collapse; 161 border-spacing: 0; 162} 163 164/* change border colour to suit your needs */ 165hr { 166 display: block; 167 height: 1px; 168 border: 0; 169 border-top: 1px solid #cccccc; 170 margin: 1em 0; 171 padding: 0; 172} 173 174input, 175select { 176 vertical-align: middle; 177} 178 179// reset CSS ここまで 180 181@function vw($width, $px) { 182 @return $px / $width * 100vw; 183} 184 185@function vh($height, $px) { 186 @return $px / $height * 100vh; 187} 188 189$sp: 375px; // スマホ 190$ipad: 768px; // iPad 191$spc: 1280px; // PC通常 192$bpc: 1600px; // PC大画面 193 194@mixin sp { 195 @media (min-width: ($sp)) { 196 @content; 197 } 198} 199 200@mixin ipad { 201 @media (min-width: ($ipad)) { 202 @content; 203 } 204} 205 206@mixin spc { 207 @media (min-width: ($spc)) { 208 @content; 209 } 210} 211 212@mixin bpc { 213 @media (min-width: ($bpc)) { 214 @content; 215 } 216} 217 218$navyBlue: #1B224C; 219$yellowOrange: #F5A623; 220$thinGray: #D5D5D5; 221$moreThinGray: #F8F8F8; 222 223html { 224 font-size: 62.5%; 225 /* -> 10px; */ 226} 227 228body { 229 font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 230 ; 231} 232 233h1 { 234 font-size: 4.8rem; 235 font-weight: bold; 236 line-height: 1.4; 237} 238 239h2 { 240 font-size: 3.6rem; 241 font-weight: bold; 242 line-height: 1.4; 243} 244 245h3 { 246 font-size: 3.2rem; 247 font-weight: bold; 248 line-height: 1.7; 249} 250 251h4 { 252 font-size: 2.6rem; 253 font-weight: bold; 254 line-height: 1.5; 255} 256 257h5 { 258 font-size: 1.8rem; 259 font-weight: 200; 260 line-height: 1.7; 261} 262 263p, 264.p { 265 font-size: 1.6rem; 266 font-weight: 200; 267 line-height: 1.7; 268} 269 270small { 271 font-size: 1.2rem; 272 font-weight: 200; 273 line-height: 1.7; 274} 275 276a { 277 text-decoration: none; 278} 279 280ul { 281 list-style: none; 282} 283 284.container { 285 margin: 0 auto; 286 width: 100%; 287 288 @include sp { 289 width: vw(1280, 900); 290 } 291 292 @include bpc { 293 max-width: 1600px; 294 } 295} 296

scss

1 2//header.scss 3 4@charset "utf-8"; 5 6@import 'style.scss'; 7 8.header { 9 display: flex; 10 height: 8rem; 11 width: 100vw; 12 background-color: turquoise; 13} 14 15.header_logo { 16 a { 17 img { 18 width: 13.6rem; 19 height: 2.7rem; 20 } 21 } 22} 23 24.header_nav { 25 display: flex; 26 width: 100%; 27} 28 29.ham { 30 display: none; 31 32 a { 33 .ham-line {} 34 35 .ham-line1 {} 36 37 .ham-line2 {} 38 39 .ham-line3 {} 40 } 41} 42 43.header_list { 44 display: flex; 45} 46 47.header_list-item { 48 a {} 49} 50 51.header_right { 52 display: flex; 53 margin-left: auto; 54} 55 56.tel-box {} 57 58.tel-hour {} 59 60.tel-number { 61 a {} 62} 63 64.header-btn { 65 font-size: 1.4rem; 66 font-weight: bold; 67 line-height: 1.7; 68} 69 70.square-request-btn { 71 background-color: $yellowOrange; 72} 73 74.contact-btn { 75 background-color: $navyBlue; 76}

css

1//header.css 2 3@charset "UTF-8"; 4/* 5html5doctor.com Reset Stylesheet 6v1.6.1 7Last Updated: 2010-09-17 8Author: Richard Clark - http://richclarkdesign.com 9Twitter: @rich_clark 10*/ 11html, 12body, 13div, 14span, 15object, 16iframe, 17h1, 18h2, 19h3, 20h4, 21h5, 22h6, 23p, 24blockquote, 25pre, 26abbr, 27address, 28cite, 29code, 30del, 31dfn, 32em, 33img, 34ins, 35kbd, 36q, 37samp, 38small, 39strong, 40sub, 41sup, 42var, 43b, 44i, 45dl, 46dt, 47dd, 48ol, 49ul, 50li, 51fieldset, 52form, 53label, 54legend, 55table, 56caption, 57tbody, 58tfoot, 59thead, 60tr, 61th, 62td, 63article, 64aside, 65canvas, 66details, 67figcaption, 68figure, 69footer, 70header, 71hgroup, 72menu, 73nav, 74section, 75summary, 76time, 77mark, 78audio, 79video { 80 margin: 0; 81 padding: 0; 82 border: 0; 83 outline: 0; 84 font-size: 100%; 85 vertical-align: baseline; 86 background: transparent; 87} 88 89body { 90 line-height: 1; 91} 92 93article, 94aside, 95details, 96figcaption, 97figure, 98footer, 99header, 100hgroup, 101menu, 102nav, 103section { 104 display: block; 105} 106 107nav ul { 108 list-style: none; 109} 110 111blockquote, 112q { 113 quotes: none; 114} 115 116blockquote:before, 117blockquote:after, 118q:before, 119q:after { 120 content: ''; 121 content: none; 122} 123 124a { 125 margin: 0; 126 padding: 0; 127 font-size: 100%; 128 vertical-align: baseline; 129 background: transparent; 130} 131 132/* change colours to suit your needs */ 133ins { 134 background-color: #ff9; 135 color: #000; 136 text-decoration: none; 137} 138 139/* change colours to suit your needs */ 140mark { 141 background-color: #ff9; 142 color: #000; 143 font-style: italic; 144 font-weight: bold; 145} 146 147del { 148 text-decoration: line-through; 149} 150 151abbr[title], 152dfn[title] { 153 border-bottom: 1px dotted; 154 cursor: help; 155} 156 157table { 158 border-collapse: collapse; 159 border-spacing: 0; 160} 161 162/* change border colour to suit your needs */ 163hr { 164 display: block; 165 height: 1px; 166 border: 0; 167 border-top: 1px solid #cccccc; 168 margin: 1em 0; 169 padding: 0; 170} 171 172input, 173select { 174 vertical-align: middle; 175} 176 177html { 178 font-size: 62.5%; 179 /* -> 10px; */ 180} 181 182body { 183 font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 184} 185 186h1 { 187 font-size: 4.8rem; 188 font-weight: bold; 189 line-height: 1.4; 190} 191 192h2 { 193 font-size: 3.6rem; 194 font-weight: bold; 195 line-height: 1.4; 196} 197 198h3 { 199 font-size: 3.2rem; 200 font-weight: bold; 201 line-height: 1.7; 202} 203 204h4 { 205 font-size: 2.6rem; 206 font-weight: bold; 207 line-height: 1.5; 208} 209 210h5 { 211 font-size: 1.8rem; 212 font-weight: 200; 213 line-height: 1.7; 214} 215 216p, 217.p { 218 font-size: 1.6rem; 219 font-weight: 200; 220 line-height: 1.7; 221} 222 223small { 224 font-size: 1.2rem; 225 font-weight: 200; 226 line-height: 1.7; 227} 228 229a { 230 text-decoration: none; 231} 232 233ul { 234 list-style: none; 235} 236 237.container { 238 margin: 0 auto; 239 width: 100%; 240} 241 242@media (min-width: 375px) { 243 .container { 244 width: 70.3125vw; 245 } 246} 247 248@media (min-width: 1600px) { 249 .container { 250 max-width: 1600px; 251 } 252} 253 254.header { 255 display: -webkit-box; 256 display: -ms-flexbox; 257 display: flex; 258 height: 8rem; 259 width: 100vw; 260 background-color: turquoise; 261} 262 263.header_logo a img { 264 width: 13.6rem; 265 height: 2.7rem; 266} 267 268.header_nav { 269 display: -webkit-box; 270 display: -ms-flexbox; 271 display: flex; 272 width: 100%; 273} 274 275.ham { 276 display: none; 277} 278 279.header_list { 280 display: -webkit-box; 281 display: -ms-flexbox; 282 display: flex; 283} 284 285.header_right { 286 display: -webkit-box; 287 display: -ms-flexbox; 288 display: flex; 289 margin-left: auto; 290} 291 292.header-btn { 293 font-size: 1.4rem; 294 font-weight: bold; 295 line-height: 1.7; 296} 297 298.square-request-btn { 299 background-color: #F5A623; 300} 301 302.contact-btn { 303 background-color: #1B224C; 304} 305/*# sourceMappingURL=header.css.map */

補足情報(FW/ツールのバージョンなど)

scssで書いています。

追記

画面のスクショです。

![イメージ説明]

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

itagagaki

2021/04/28 01:24

ちゃんとターコイズで表示されましたよ。
K_3578

2021/04/28 01:26

保存もされてるのに色だけ変わらないのか、Chromeのデベロッパーツールでcssが反映されているかは 確認されましたか?
Lhankor_Mhy

2021/04/28 01:27 編集

お試しいただきたいことがあります。 デベロッパーズツールの「Elements」を開き、 <link rel="stylesheet" href="css/header.css"> の、               ↑ここを右クリックして 「Open in new tab」をクリックするとどうなりますか?
seakai

2021/04/28 03:34

デベロッパーズツールの「Elements」を開き、 <link rel="stylesheet" href="css/header.css"> の、               ↑ここを右クリックして 「Open in new tab」をクリックするとどうなりますか? → background-color: turquoise;となっています。 ですが追記の画像の通り、画面はpurpleのままなんです。。
itagagaki

2021/04/28 03:50

デベロッパーズツールのElementsペインで <header class="header"> の行を選択したとき、Stylesペインに.headerのスタイルはどのように表示されていますか? そこでも background-color: turquoise; になっていますか?
seakai

2021/04/28 04:05

デベロッパーズツールのElementsペインで <header class="header"> の行を選択したとき、Stylesペインに.headerのスタイルはどのように表示されていますか? そこでも background-color: turquoise; になっていますか? →そこではbackground-color: purple;になっています。
itagagaki

2021/04/28 04:29

そこが問題ですね。 とりあえず css/header.css は本当に読み込まれていると仮定して… スタイルを設定しているのは css/header.css だけなんでしょうか。 他にも何かCSSを読み込んでいたり、あるいはHTMLファイル内に何かCSSを書いていたりしていないでしょうか。 どこかでpurpleを指定しているところがある気がするので、それを探しましょう。
seakai

2021/04/28 04:46

できました! 他にも読み込んでいるcssがあり、他のcssに影響があったみたいです。 「purple」で検索して「turquoise」と置換するとturquoiseになりました。 ありがとうございます。
guest

回答1

0

自己解決

他にも読み込んでいるcssがあり、他のcssに影響があったみたいです。
「purple」で検索して「turquoise」と置換するとturquoiseになりました。
ありがとうございました。

投稿2021/04/28 04:46

seakai

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問