CSS変数（カスタムプロパティ）の使い方をわかりやすく解説
CSS変数（カスタムプロパティ）は、Webページ内で繰り返し使う値に名前を付けて管理できる便利な機能です。色やサイズなどの値を一箇所で定義しておけば、変更が必要になったときもその定義を書き換えるだけで、ページ全体に反映させることができます。
CSS変数の基本的な使い方
変数は --（ハイフン2つ）で始まる名前を付けて定義します。通常は :root セレクタ内に宣言することで、ドキュメント全体から参照できるようになります。定義した変数を使う際は、var() 関数の中に変数名を指定します。
- 定義：
--変数名: 値;の形式で記述する - 使用：
var(--変数名)として呼び出す - スコープ：
:rootに定義すれば全要素で利用可能
CSS変数の実装例
以下のコードでは、背景色と文字色をCSS変数として定義し、#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.
</div>
<br>
</body>
</html>
この例では、:root 内で背景色に --my-bg-color: blue;、文字色に --my-color: white; を設定しています。#demo 要素では var() 関数を使ってこれらの値を参照しているため、青い背景に白い文字が表示されます。
CSS変数を使うメリット
- メンテナンス性の向上： テーマカラーなどを一箇所で管理でき、変更作業が効率化される
- 一貫性の確保： 同じ値を複数箇所で使い回せるため、デザインの統一感が保たれる
- 動的な変更が可能： JavaScriptから変数の値を書き換えれば、実行時にスタイルを切り替えられる
テーマカラーの切り替えやダークモードの実装などでも活用される機能なので、ぜひマスターしておきましょう。
-
CSSのrightプロパティとは？構文と使い方を実例付きで解説
CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini
-
CSSのtext-indentプロパティでテキストのインデントを設定する方法
テキストのインデント（字下げ）を行うには、CSSの text-indent プロパティを使用します。このプロパティは、段落の最初の行だけをインデントするためのもので、文章の読みやすさやデザイン性を高めたい場合に便利です。text-indentプロパティの基本text-indent には、px（ピクセル）、em、% などの単位を指定できます。値が大きいほど、最初の行が右側に大きくずれます。例1：pxでインデントを指定するまずは、30px を指定した基本的な例を見てみましょう。<!DOCTYPE html> <html> <head> <style>