C-14. CSS変数の宣言

2021.12.31

CSSの変数（カスタムプロパティ）を知っておこう

CSSドキュメント内で定義される値のことです。変数とは文字列や数値などを入れる箱のようなもので、数値や文字列を入れたり出したりすることで、中身を変えることができます。

CSS変数の定義については、--ハイフンふたつを使って定義します。　（以下では、–my-cool-backgroundが変数名になります。）

:rootというのは、グローバル変数というものです。

MDN CSS カスタムプロパティ (変数) の使用 参考サイト

以下の内容を記述して実際に表示させてみてください。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <style>
        :root {
         /* --my-cool-background に色を宣言します。*/
          --my-cool-background: #73a4f4;
        }
 
        #foo {
          /*var(--my-cool-background)で値を取得します */
          background-color: var(--my-cool-background);
        }
        
      p {
        color: var(--my-cool-background);
      }
 
　  </style>
 
    <body>
      <div id="foo">
        <span>サンプル表示　色の宣言で統一できます。</span>
      </div>
      
     <div >
        <p>サンプル表示　色の宣言で統一できます。</p>
      </div>
   </body>

ブラウザ実行結果

課題

「C-13. グリッドの設定」課題で作成した内容で、どれかの値を変数で統一してください。

※１色に統一または、文字を単色に統一などで、編集してください。

作成したファイル名をindex_2_24.htmlにして送ってください。

ヒント

1
2
3
4
5
6
7
:root{
    --my-cool-background: ;
  }
 
.〇〇{
    background: /* var()で値を取得 */;
}

課題・復習用検索キーワード

検索例
🔍CSS　変数の宣言
🔍CSS　:root
🔍CSS　変数の宣言　例