CSS辞典 var()関数の解説

CSS変数を使用する「var()関数」の使用方法を記載

概要・使用方法

{ プロパティ:var(変数); }Code language: JavaScript (javascript)

「var()関数」はCSS変数を使うことができます。

※internetExplorerでは未サポートです。

プログラム言語の変数どうよう値を一時的に保存しておくための箱になります。数字をいれておけばカウンタアップなどもすることができます。

CSS変数を定義するには2つのハイフン(–)に続けて変数名を記述します。

var()関数の変数定義

変数

変数定義した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 実行サンプル

val()関数のchromeブラウザの実行結果

Firefox 実行サンプル

val()関数のfirefoxブラウザの実行結果

edge 実行サンプル

val()関数のedgeブラウザの実行結果

opera 実行サンプル

val()関数のoperaブラウザの実行結果

すなりん

サイトの管理者「すなりん」です。現役のシステムエンジニアをしてます。要件定義からテスト、プロジェクトマネージャー、顧客調整、社内インフラなんでもこなします。いわゆるフルスタック・エンジニアです。 仕事柄色んな技術や製品を扱うことが多く、なかなか覚えているもの大変ですし、しばらくすると忘れてしまうことが多いので、自分なりの形で技術情報やIT関係の情報を掲載しています。 個人で仕事の合間をみながら記事の投稿やサイトを更新していますので、誤字や間違った内容があったりもしますので、閲覧者はご理解の上ご利用ください。

コメントを残す