CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのvar()関数とは？カスタムプロパティの使い方を実例付きで解説

CSSのvar()関数は、カスタムプロパティ（CSS変数）として定義した値を、Webページ内のスタイルに適用するために使用します。プロパティに任意の名前を付けて値を設定しておけば、同じ値を何度も書き直す必要がなくなり、コードの再利用性と保守性が大幅に向上します。

var()関数の基本構文

カスタムプロパティは、ハイフン2つ（--）から始まる名前で定義します。一般的には:root疑似クラス内で宣言し、ページ全体で共通の変数として参照できるようにします。

:root {
  --my-bg-color: blue;
  --my-color: white;
}

#demo {
  background-color: var(--my-bg-color);
  color: var(--my-color);
}

サンプルコード

以下のコードを実行すると、var()関数によるカスタムプロパティの動作を確認できます。#demo要素の背景色と文字色が、それぞれ定義した変数の値（青・白）に置き換えられて表示されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         :root {
            --my-bg-color: blue;
            --my-color: white;
         }
         #demo {
            background-color: var(--my-bg-color);
            color: var(--my-color);
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <div id = "demo">
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
      </div>
      <br>
   </body>
</html>

押さえておきたいポイント

  • カスタムプロパティ名は必ず「--」で始めます（例：--my-color）。
  • :rootで定義すると、ドキュメント全体のどの要素からでも変数を参照できます。
  • テーマカラーや余白などの共通値を一括管理でき、デザイン変更時の修正作業を大幅に削減できます。
  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    テキストのインデント（字下げ）を行うには、CSSの text-indent プロパティを使用します。このプロパティは、段落の最初の行だけをインデントするためのもので、文章の読みやすさやデザイン性を高めたい場合に便利です。text-indentプロパティの基本text-indent には、px（ピクセル）、em、% などの単位を指定できます。値が大きいほど、最初の行が右側に大きくずれます。例1：pxでインデントを指定するまずは、30px を指定した基本的な例を見てみましょう。<!DOCTYPE html> <html> <head> <style>