CSS辞典 var()関数の解説
CSS変数を使用する「var()関数」の使用方法とサンプルコードを記載。
概要・使用方法
{ プロパティ:var(変数); }「var()関数」はCSS変数を使うことができます。
※internetExplorerでは未サポートです。
プログラム言語の変数どうよう値を一時的に保存しておくための箱になります。数字をいれておけばカウンタアップなどもすることができます。
CSS変数を定義するには２つのハイフン（–）に続けて変数名を記述します。
変数
| 変数 | 定義したCSS変数を指定する |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSS var関数サンプルページ</title>
<meta charset="uft-8">
<style>
:root{
--sky: #00a5de;
--box-width:300px;
--box-height:150px;
}
.box1{
width: var(--box-width);
height: var(--box-height);
background-color: var(--sky);
}
</style>
</head>
<body>
<div class="box1">var()関数</div>
</body>
</html>実行結果
var()関数
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
