CSS変数の利用について

CSSの変数利用について

CSSの変数機能を利用して、フォントのカラーを変更したいです。

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

:root {} の所で設定した　--text-birght-color: #fff;変数を　.conA {}で呼び出しても
色が反映されず困っております。

@charset "UTF-8":

/* 基本色 */
:root {
    --main-color: #5D9AB2;
    --accent-color: #BF6A7A;
    --dark-color: #2B5566;
    --text-birght-color: #fff;
}

body {
    margin: 0;
    font-family: 'メイリオ',
        'Hiragino Kaku Gothic Pro',
        sans-serif;
}

/* コンテンツA : ヒーローイメージ */
.conA {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 450px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(img/fruits.jpg);
    background-position: center;
    background-size: cover;
    color: #fff;
    color: var(--text-birght-color);
    text-align: center;
}

.conA h1 {
    margin-top: 10;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15vw;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
}

.con p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
}

@media(min-width:768px) {
    .conA h1 {
        font-size: 115px;
    }

    .conA p {
        font-size: 24px;
    }
}

試したこと

ググって調べてみたところ特に記述は間違ってはいないと思うのですが、原因が分からず困っております。

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

テキストエディタにはBracketsを使用しています。

kei344

2020/02/08 15:38

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答2件

ベストアンサー

@charset 規則の末尾にはセミコロンを指定しますが、質問文のコードではコロンになっています (参考)。

4.1.5 At-rules

At-rules start with an at-keyword, an '@' character followed immediately by an identifier (for example, '@import', '@page').

An at-rule consists of everything up to and including the next semicolon (;) or the next block, whichever comes first.

これを修正することで、質問文の装飾は正常に動作するようになります (動作確認用リンク)。

CSS
1@charset "UTF-8"; /* 修正 */
2
3/* 基本色 */
4:root {
5    --main-color: #5D9AB2;
6    --accent-color: #BF6A7A;
7    --dark-color: #2B5566;
8    --text-birght-color: #fff;
9}
10
11body {
12    margin: 0;
13    font-family: 'メイリオ',
14        'Hiragino Kaku Gothic Pro',
15        sans-serif;
16}
17
18/* コンテンツA : ヒーローイメージ */
19.conA {
20    display: flex;
21    align-items: center;
22    justify-content: center;
23    height: 100vh;
24    min-height: 450px;
25    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(img/fruits.jpg);
26    background-position: center;
27    background-size: cover;
28    color: #fff;
29    color: var(--text-birght-color);
30    text-align: center;
31}
32
33.conA h1 {
34    margin-top: 10;
35    margin-bottom: 10px;
36    font-family: 'Montserrat', sans-serif;
37    font-size: 15vw;
38    letter-spacing: 0.2em;
39    margin-left: 0.2em;
40}
41
42.con p {
43    margin-top: 0;
44    margin-bottom: 0;
45    font-size: 18px;
46}
47
48@media(min-width:768px) {
49    .conA h1 {
50        font-size: 115px;
51    }
52
53    .conA p {
54        font-size: 24px;
55    }
56}