css変数
指定方法
- 大元には下記のように設定
-
:rootは固定の記述 -
--brand-colorが変数名、右側には指定したい値を設定
:root {
--brand-color: skyblue;
}
- 各要素には下記のように設定
-
var();の中に上部で設定した変数を記述 -
color: skyblue;と設定した状態になる
h1 {
margin: 0;
color: var(--brand-color);
border-bottom: 2px solid var(--brand-color);
}
全体のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Advanced CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>テスト</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</section>
</body>
</html>
@charset "utf-8";
:root {
/* --brand-color: orange; */
--brand-color: skyblue;
}
body {
margin: 0;
}
section {
max-width: 600px;
margin: 0 auto;
width: calc(100% - 16px - 16px);
}
h1 {
margin: 0;
color: var(--brand-color);
border-bottom: 2px solid var(--brand-color);
}
p {
margin: 0;
}