var()

ヴァー（関数）

意味 CSS変数の値を取得

var()とは？

var()関数は、CSSで定義されたカスタムプロパティ（変数）の値を取得するために使用します。これにより、複数の場所で同じ値を再利用することができ、メンテナンスが容易になります。

var()の具体的な使い方

カスタムプロパティを使用してテキスト色を設定する例

<style>
    :root {
        --main-color: black;
    }
    .var-color {
        color: var(--main-color);
        background-color: lightgray;
        padding: 20px;
    }
</style>

<p class='var-color'>テキスト色: var(--main-color)</p>

bodyセレクタ内でvar()関数を使って'--main-color'の値を参照し、テキストの色を設定しています。

複数のカスタムプロパティを使用してスタイルを設定する例

<style>
  :root {
    --padding: 20px;
    --border-radius: 5px;
  }

  .box {
    padding: var(--padding);
    border-radius: var(--border-radius);
    background-color: lightblue;
  }
</style>

<div class='box'>
  カスタムプロパティを使用したボックス
</div>

複数のカスタムプロパティを使用して、ボックスのパディングと角丸を設定しています。

var()に関するよくある質問

Q. var()の利点は？

A. var()を使用すると、値の再利用が容易になり、テーマの変更やメンテナンスが簡単になります。また、メディアクエリやJavaScriptと組み合わせて動的なスタイリングが可能になります。

Q. var()のフォールバック値とは？

A. var()関数の第2引数にフォールバック値を指定できます。例：var(--main-color, black)。これにより、カスタムプロパティが未定義の場合にデフォルト値を使用できます。

Q. var()はブラウザ互換性は？

A. var()は現代的なブラウザでよくサポートされています。ただし、IE11以前などの古いブラウザでは動作しないため、必要に応じてフォールバックやポリフィルを検討する必要があります。

var()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのvar()やhsl()、hsla()、calc()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。