header ボタンが反映されません

前提・実現したいこと

ボタンの文字を白色にし、ボタン背景をグラデーション（右からピンクと紫）にしたい

発生している問題・エラーメッセージ

ありません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>中級編</title>
8    <link rel="stylesheet" href="CSS/destyle.css">
9    <link rel="stylesheet" href="CSS/style.css">
10</head>
11<body>
12    <header class="header">
13        <div class="header-inner">
14           <a href="#"> 
15               <img class="img-logo" src="image/Logo.png" alt="ロゴ">
16            </a>
17            <h1 class="logo-text">コーディング</h1>
18            <nav class="nav">
19                <ul class="header-list">
20                    <li class="list-item"><a href="#">特徴</a></li>
21                    <li class="list-item"><a href="#">価格</a></li>
22                    <li class="list-item"><a href="#">お問い合わせ</a></li>
23                </ul>
24            </nav>
25            <div class="cmn-link header-link">
26                <a href="#">お問い合わせ</a>
27            </div>
28        </div>
29    </header>
30

header.css
1@charset "UTF-8";
2/*色*/
3/*basic*/
4/*ボタン*/
5/*fv*/
6/*contact*/
7html {
8  font-size: 62.5%;
9}
10
11body {
12  max-width: 1366px;
13  max-height: 768px;
14  background-color: #fff;
15  font-size: 1.6rem;
16  font-family: 'Noto Sans JP' sans-serif;
17  color: #333333;
18}
19
20img {
21  width: 100%;
22  height: auto;
23}
24
25a {
26  text-decoration: none;
27}
28
29/*共通タイトル*/
30.main-title {
31  margin-bottom: 20px;
32  text-align: center;
33  font-size: 3.2rem;
34  margin: 0 auto;
35}
36
37.sub-title {
38  margin-bottom: 67px;
39  text-align: center;
40  font-size: 1.6rem;
41  color: #3BA6C9;
42}
43
44.wrapper {
45  width: 1022px;
46}
47
48/*ボタン*/
49.cmn-link {
50  background-color: #FA41CC;
51  background-color: #6020B0;
52  -webkit-box-shadow: 0px 3px 6px #00000029;
53          box-shadow: 0px 3px 6px #00000029;
54  border-radius: 10px;
55}
56
57.cmn-link > p {
58  display: block;
59  font-size: 1.4rem;
60  text-align: center;
61}
62
63.header {
64  background-color: #FFFFFF;
65  max-height: 94px;
66  position: fixed;
67  top: 0;
68  z-index: 999;
69  width: 100%;
70  -webkit-box-shadow: 0px 3px 6px #00000029;
71          box-shadow: 0px 3px 6px #00000029;
72}
73
74.header-inner {
75  max-width: 1022px;
76  margin: 0 auto;
77  padding: 0 20px;
78  display: -webkit-box;
79  display: -webkit-flex;
80  display: -ms-flexbox;
81  display: flex;
82  -webkit-box-align: center;
83  -webkit-align-items: center;
84      -ms-flex-align: center;
85          align-items: center;
86  -webkit-box-pack: justify;
87  -webkit-justify-content: space-between;
88      -ms-flex-pack: justify;
89          justify-content: space-between;
90  height: 100%;
91}
92
93.header .img-logo {
94  width: 55px;
95  height: 55px;
96}
97
98.nav .header-list {
99  display: -webkit-box;
100  display: -webkit-flex;
101  display: -ms-flexbox;
102  display: flex;
103  -webkit-box-pack: justify;
104  -webkit-justify-content: space-between;
105      -ms-flex-pack: justify;
106          justify-content: space-between;
107  -webkit-box-align: center;
108  -webkit-align-items: center;
109      -ms-flex-align: center;
110          align-items: center;
111}
112
113.nav .header-list .list-item + .list-item {
114  padding-left: 46px;
115}
116
117.nav .header-link {
118  width: 155px;
119  height: 37px;
120  background-color: linear-gradient(to right, #FA41CC, #6020B0);
121}
122
123.nav .header-link > a {
124  color: #fff;
125  font-size: 1.4rem;
126  text-align: center;
127}
128
129

header.scss
1.header{
2    background-color: #FFFFFF;
3    max-height: 94px;
4    position: fixed;
5    top: 0;
6    z-index: 9999;
7    width: 100%;
8    box-shadow: 0px 3px 6px #00000029;
9
10    &-inner{
11        max-width: 1022px;
12        margin: 0 auto;
13        padding: 0 20px;
14        display: flex;
15        align-items: center;
16        justify-content: space-between;
17        height: 100%;
18
19    }
20        .img-logo{
21            width: 55px;
22            height: 55px;
23
24        }
25
26        .logo-text{
27            font-size: 2.4rem;
28            font-weight: bold;
29            margin-left: 16px;
30
31        }
32    }
33    .nav{
34        .header-list{
35            display: flex;
36            justify-content: space-between;
37            align-items: center;
38            .list-item{
39                + .list-item{
40                    padding-left: 46px;
41                }
42
43            }
44
45        }
46
47        .header-link{
48            width: 155px;
49            height: 37px;
50            >a{
51                color: #fff;
52                font-size: 1.4rem;
53                text-align: center;
54            }
55            
56        }
57
58    }
59
60

試したこと

グーグルアナリティクスで原因追及し、color: などを指定できることが分かった。
→そもそも、反映されてないことに気づく
CSS反映されない
こちらを調べ、確認したものの解決できずにします

行動規範の内容に同意します

回答1件

何をしたいかわかりませんが「.nav .header-link」の半角スペースと「background-color」を下記に直せばグラデーションが効くと思います(私のローカルで確認した上では)
.nav,.header-link {
width: 155px;
height: 37px;
background: linear-gradient(to right, #FA41CC, #6020B0);

}

投稿2021/07/15 14:18

himazin_bivar

総合スコア23

free_teku

2021/07/16 00:33

直りました。ありがとうございます。私、変数を使っているのですが、変数のどの部分に原因があるのでしょうか？ ※コンパイルはされています。 {base.scss} /*色*/ /*basic*/ $bg-color: #eefbfb; $sub-ttl-color: #3BA6C9; $txt-color: #333; /*ボタン*/ $btn-color: linear-gradient( to right, #FA41CC, #6020B0); /*fv*/ $pic-color: linear-gradient( to right, #05a5fa, #63fbd7); /*contact*/ $contact-bg:linear-gradient( to right, #05A5FA,#63FBD7,#67FFD6);

himazin_bivar

2021/07/18 08:38

どこの話ですか？ソース全部提示してください

free_teku

2021/07/21 07:25

以前、」回答いただいたコードで解消されました。グラデーションで表示できましたが、base.scssのように変数を使って、headerのぼたんなどを変更したいです。 base.scssに問題があるように思いますが、ないようなので関連するリソース送ります！何卒宜しくお願い致します。

free_teku

2021/07/21 07:27

style.scss @import "./foundation/bace"; @import "./foundation/general"; @import "./layout/header"; @import "./content/fv"; @import "./content/features"; @import "./content/price"; //@import "./content/faq"; @import "./content/blog"; @import "./content/works"; @import "./content/contact"; @import "./layout/footer";

行動規範の内容に同意します