↩ テクノロジー 開発 非公開: CSS で変数を使用してスタイリングを合理化する方法

CSS で変数を使用してスタイリングを合理化する方法

ほとんどの Web サイトは CSS を使用して、外観を磨き、さまざまな Web ページコンポーネントのスタイルを設定します。 CSS (Cascading Style Sheet) は、技術的にはプログラミング言語ではありません。ただし、CSS を JavaScript などのプログラミング言語と組み合わせて使用​​すると、応答性の高いインタラクティブな Web ページを作成できます。

JavaScript などのプログラミング言語を使用したことがある場合は、変数を宣言して値を割り当て、コードのさまざまな部分で再利用できることをご存知でしょう。幸いなことに、同じ概念を CSS にも適用できるということです。

この記事では、CSS 変数を定義し、その利点について説明し、CSS で変数を宣言して使用する方法を示します。

CSS の変数とは
CSS の変数とは
コンテンツ 表示

CSSの変数とは何ですか?

CSS 変数は、Web 開発者がスタイルシートを通じて再利用できる値を保存できるカスタム プロパティです。たとえば、コードベースの見出し、段落、div などの要素で再利用できるフォント スタイル、背景色、フォント サイズを宣言できます。

CSS 変数を使用する理由これらは理由の一部です。

  • コードの更新が容易になります。 変数を宣言すると、すべての要素を手動で更新することなく、スタイルシート全体を再利用できます。
  • 繰り返しを減らす: コードベースが大きくなるにつれて、類似したクラスや要素があることがわかります。すべての項目に CSS コードを記述する代わりに、単純に CSS 変数を使用できます。
  • コードのメンテナンスを容易にする: ビジネスを継続していきたい場合、コードのメンテナンスは重要です。
  • 読みやすさの向上: 現代社会ではコラボレーションが奨励されています。 CSS で変数を使用すると、読みやすいコンパクトなコードベースが得られます。
  • 一貫性の維持が容易: CSS 変数は、ソース コードが成長したり、アプリのサイズが増加したりしても、一貫したスタイルを維持するのに役立ちます。たとえば、Web サイト全体のボタンで使用する余白、パディング、フォント スタイル、色を宣言できます。

CSSで変数を宣言する方法

CSS の変数とは何か、そしてそれらを使用する必要がある理由は理解できたので、変数を宣言する方法を説明していきます。

CSS 変数を宣言するには、要素の名前から始めて、次に 2 つのダッシュ (-)、目的の名前と値を記述します。基本的な構文は次のとおりです。 

 element {

--variable-name: value;

}

たとえば、ドキュメント全体にパディングを適用したい場合は、次のように宣言できます。 

 body { 

--padding: 1rem;

}

CSS の変数のスコープ

CSS 変数のスコープは、ローカル (特定の要素内でアクセス可能) またはグローバル (スタイル シート全体でアクセス可能) に設定できます。

ローカル変数

ローカル変数は特定のセレクターに追加されます。たとえば、ボタンに追加できます。これは一例です。 

 .button {

    --button-bg-color: #33ff4e;

  }

背景色の変数は、ボタン セレクターとその子で使用できます。

グローバル変数

宣言すると、コード内の任意の要素でグローバル変数を使用できるようになります。 :root 疑似クラスを使用してグローバル変数を宣言します。これが私たちがそれらを宣言する方法です。 

 :root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

  }

上記のコードでは、見出し、段落、div、さらには本文全体など、さまざまな要素で宣言された変数を使用できます。

CSSで変数を使用する方法

デモンストレーション目的でプロジェクトを作成し、index.html ファイルとstyles.css ファイルを追加します。

index.html ファイルには、2 つの見出し ( h1 と h2 ) と段落 ( p ) を持つ単純な div を含めることができます。 

 <div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

style.css ファイルには次のものを含めることができます。 

 :root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

    --font-size: 16px;

    --font-style: italic;

  }

  body {

    background-color: var(--primary-color);

    font-size: var(--font-size);

  }

  h1 {

    color: var(--secondary-color);

    font-style: var(--font-style)

  }

  h2 {

    font-weight: var(--font-weight)

  }

  p {

    font-size: calc(var(--font-size) * 1.2);

  }

Web ページがレンダリングされると、次のようになります。

screenzy-1681246689788
screenzy-1681246689788

上記のコードから、 :root 要素でグローバル変数を宣言しました。いずれかの要素でグローバル変数を使用するには、var キーワードを使用する必要があります。たとえば、グローバル変数として宣言した背景色を適用するには、コードを次のように記述します。

background-color: var(--primary-color);

他のすべての要素をチェックすると、 var キーワードがどのように適用されているかの傾向がわかります。

JavaScript で CSS 変数を使用する

ローカル変数とグローバル変数を使用して、JavaScript で CSS 変数を使用する方法を説明します。

既存のコードにアラート要素を追加できます。

<div class="alert">Click me!</div>

新しい index.html ドキュメントは次のようになります。 

 <div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

    <div class="alert">Click me!</div>

変数をスタイル設定できます。次のコードを既存の CSS コードに追加します。 

 .alert {

    --bg-color: red; /* Define local variable */

    background-color: var(--bg-color); /* Use the local variable for the background color */

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: var(--font-weight); /*Use the global variable for font weight*/

    width: 50px;

  }

私たちは次のことを行いました。

  • アラート要素内にローカル変数を定義しました。

--bg-color: red

  • var キーワードを使用してこのローカル変数にアクセスします。

background-color: var(--bg-color);

  • 前に宣言したグローバル変数をフォントの太さとして使用しました。

font-weight: var(--font-weight);

JavaScript コードを追加する

アラート要素を応答性の高いものにすることができます。それをクリックすると、ブラウザ上に次のようなポップアップが表示されます。 「 JavaScript で CSS 変数を使用しました !!!!」。

<script/> タグを使用して HTML コードを囲むことで、JavaScript コードを HTML コードに直接追加できます。 JavaScript コードは HTML コードの後、 </body> タグを閉じる前に配置する必要があります。

このコードを追加します。 

 <script>

        const alertDiv = document.querySelector('.alert');

        alertDiv.addEventListener('click', function() {

          window.alert("We have used CSS Variables with JavaScript!!!!");

        });

      </script>

HTML コードは次のようになります。

2023-04-11-15-19-10 のスクリーンショット
2023-04-11-15-19-10 のスクリーンショット

私たちの JavaScript は次のことを行います。

  • document.querySelector() を使用してアラート要素を見つけます。
  • アラート要素に変数 alertDiv を割り当てます。
  • alertDiv では、 addEventListener() メソッドを使用して「クリック」イベントを追加します。
  • window.alert() を使用して、クリック イベントが発生したときにメッセージを表示します。

ページがレンダリングされると、次のようになります。

screenzy-1681246835983
screenzy-1681246835983

alert をクリックすると、次のメッセージが表示されます。

screenzy-1681246888674
screenzy-1681246888674

CSS 変数のフォールバック値

スタイルシートで定義されていない変数を参照するとどうなりますか?適用しようとしている CSS 効果は適用されません。フォールバック値は、参照されていない変数の代わりに表示されるエフェクトの値を提供します。

フォールバック値は次の点で役立ちます。

  • 特定のブラウザが CSS 変数を理解できない場合は、select プロパティにフォールバック先を含めることができます。
  • CSS 変数が原因でページが期待どおりに動作しないと思われる場合は、フォールバック値を使用してそれが真かどうかをテストできます。

カンマで区切って複数のフォールバック プロパティを指定できます。たとえば、次のコードを考えてみましょう。 

 :root {

    --primary-color: #007bff;

  }

  .btn {

    background-color: var(--primary-color, red, yellow);

    padding: 10px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

  }

グローバル変数を使用するときに、 primary-color 単語のスペルを間違えると、宣言されていないことを意味し、フォールバック値である赤が選択されます。

このコードを使用すると、それをより適切に示すことができます。 

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        :root {

    --primary-color: #007bff;

  }

  .btn {

    background-color: var(--primary-color, red);

    padding: 10px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

  }

    </style>

</head>

<body>

    <button class="btn">Click me!</button>

</body>

</html>

これをブラウザでレンダリングすると、次のようになります。

screenzy-1681246957036
screenzy-1681246957036

ただし、次のように同じコードを取得して、 button セレクターの 1 文字だけを変更することができます。 

 .btn {

    background-color: var(--primary-colr, red); /*I have misspelled primary-color to be primary-colr */

    padding: 10px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

  }

ブラウザはこれをレンダリングします。

screenzy-1681247011055
screenzy-1681247011055

CSS での動的値変数と計算値変数の使用

動的値は、 ユーザー入力などの特定のイベントまたは条件に基づいて自動的に更新されます。

このコードを研究してください。 

 <!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>CSS Variables with JavaScript</title>

    <style>

        :root {

          --color: #333; 

        }

        #color-input {

          margin-left: 1em;

        }

        #color-input {

          --color: var(--color-input);

        }

      </style>

  </head>

  <body>

    <label for="color-input">Choose a color:</label>

<input type="color" id="color-input">

  </body>

</html>

上記のコードは次のことを行います。

  • : :root セレクターを使用して、変数 --color デフォルト値 #333 で宣言します。
  • #color-input 使用して入力要素を選択します。
  • --color の値は var(--color-input) に設定されます。これは、ユーザーがカラー ピッカーを使用して新しい色を選択すると、色が常に更新されることを意味します。

計算値は、 他のプロパティまたは変数に基づいて計算を実行します。このコードを使用してそれを説明できます。 

 :root {

  --base-font-size: 14px;

  --header-font-size: calc(var(--base-font-size) * 3);

}

h2 {

  font-size: var(--header-font-size);

}

このコード ブロックから、次のことがわかります。

  • 基本フォント サイズを定義する --base-font-size 変数があります。
  • --header-font-size 、 –base-font-size の値の 3 倍です。
  • --header-font-size を指定して var を使用する h1 セレクターがあります。
  • したがって、Web ページ内のすべての h1 は、 --base-font-size のサイズの 3 倍になります。

まとめ

CSS 変数を使用して開発プロセスを高速化し、保守しやすいコードを作成する方法を理解しました。カスタム変数は、HTML や React などのライブラリで使用できます。 CSS を使用して React のスタイルを設定するために使用できるさまざまなアプローチを確認してください。

ソースコードは ここで 確認できます。

「 CSS で変数を使用してスタイリングを合理化する方法」についてわかりやすく解説！絶対に観るべきベスト2動画

CSSカスタムプロパティの使い方 #shorts
https://www.youtube-nocookie.com/shorts/LrENNvPQhGw
【2022】これから使えるCSSプロパティ18選！新しく使える便利なCSSテクニック！
https://www.youtube-nocookie.com/watch?v=EeZM5SXuCsU&pp=ygVNIENTUyDjgaflpInmlbDjgpLkvb_nlKjjgZfjgabjgrnjgr_jgqTjg6rjg7PjgrDjgpLlkIjnkIbljJbjgZnjgovmlrnms5UmaGw9SkE%3D

ほとんどの Web サイトは CSS を使用して、外観を磨き、さまざまな Web ページコンポーネントのスタイルを設定します。 CSS (Cascading Style Sheet) は、技術的にはプログラミング言語ではありません。ただし、CSS を JavaScript などのプログラミング言語と組み合わせて使用​​すると、応答性の高いインタラクティブな Web ページを作成できます。

JavaScript などのプログラミング言語を使用したことがある場合は、変数を宣言して値を割り当て、コードのさまざまな部分で再利用できることをご存知でしょう。幸いなことに、同じ概念を CSS にも適用できるということです。

この記事では、CSS 変数を定義し、その利点について説明し、CSS で変数を宣言して使用する方法を示します。

CSS の変数とは
CSS の変数とは
コンテンツ 表示

CSSの変数とは何ですか?

CSS 変数は、Web 開発者がスタイルシートを通じて再利用できる値を保存できるカスタム プロパティです。たとえば、コードベースの見出し、段落、div などの要素で再利用できるフォント スタイル、背景色、フォント サイズを宣言できます。

CSS 変数を使用する理由これらは理由の一部です。

  • コードの更新が容易になります。 変数を宣言すると、すべての要素を手動で更新することなく、スタイルシート全体を再利用できます。
  • 繰り返しを減らす: コードベースが大きくなるにつれて、類似したクラスや要素があることがわかります。すべての項目に CSS コードを記述する代わりに、単純に CSS 変数を使用できます。
  • コードのメンテナンスを容易にする: ビジネスを継続していきたい場合、コードのメンテナンスは重要です。
  • 読みやすさの向上: 現代社会ではコラボレーションが奨励されています。 CSS で変数を使用すると、読みやすいコンパクトなコードベースが得られます。
  • 一貫性の維持が容易: CSS 変数は、ソース コードが成長したり、アプリのサイズが増加したりしても、一貫したスタイルを維持するのに役立ちます。たとえば、Web サイト全体のボタンで使用する余白、パディング、フォント スタイル、色を宣言できます。

CSSで変数を宣言する方法

CSS の変数とは何か、そしてそれらを使用する必要がある理由は理解できたので、変数を宣言する方法を説明していきます。

CSS 変数を宣言するには、要素の名前から始めて、次に 2 つのダッシュ (-)、目的の名前と値を記述します。基本的な構文は次のとおりです。 

 element {

--variable-name: value;

}

たとえば、ドキュメント全体にパディングを適用したい場合は、次のように宣言できます。 

 body { 

--padding: 1rem;

}

CSS の変数のスコープ

CSS 変数のスコープは、ローカル (特定の要素内でアクセス可能) またはグローバル (スタイル シート全体でアクセス可能) に設定できます。

ローカル変数

ローカル変数は特定のセレクターに追加されます。たとえば、ボタンに追加できます。これは一例です。 

 .button {

    --button-bg-color: #33ff4e;

  }

背景色の変数は、ボタン セレクターとその子で使用できます。

グローバル変数

宣言すると、コード内の任意の要素でグローバル変数を使用できるようになります。 :root 疑似クラスを使用してグローバル変数を宣言します。これが私たちがそれらを宣言する方法です。 

 :root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

  }

上記のコードでは、見出し、段落、div、さらには本文全体など、さまざまな要素で宣言された変数を使用できます。

CSSで変数を使用する方法

デモンストレーション目的でプロジェクトを作成し、index.html ファイルとstyles.css ファイルを追加します。

index.html ファイルには、2 つの見出し ( h1 と h2 ) と段落 ( p ) を持つ単純な div を含めることができます。 

 <div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

style.css ファイルには次のものを含めることができます。 

 :root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

    --font-size: 16px;

    --font-style: italic;

  }

  body {

    background-color: var(--primary-color);

    font-size: var(--font-size);

  }

  h1 {

    color: var(--secondary-color);

    font-style: var(--font-style)

  }

  h2 {

    font-weight: var(--font-weight)

  }

  p {

    font-size: calc(var(--font-size) * 1.2);

  }

Web ページがレンダリングされると、次のようになります。

screenzy-1681246689788
screenzy-1681246689788

上記のコードから、 :root 要素でグローバル変数を宣言しました。いずれかの要素でグローバル変数を使用するには、var キーワードを使用する必要があります。たとえば、グローバル変数として宣言した背景色を適用するには、コードを次のように記述します。

background-color: var(--primary-color);

他のすべての要素をチェックすると、 var キーワードがどのように適用されているかの傾向がわかります。

JavaScript で CSS 変数を使用する

ローカル変数とグローバル変数を使用して、JavaScript で CSS 変数を使用する方法を説明します。

既存のコードにアラート要素を追加できます。

<div class="alert">Click me!</div>

新しい index.html ドキュメントは次のようになります。 

 <div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

    <div class="alert">Click me!</div>

変数をスタイル設定できます。次のコードを既存の CSS コードに追加します。 

 .alert {

    --bg-color: red; /* Define local variable */

    background-color: var(--bg-color); /* Use the local variable for the background color */

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: var(--font-weight); /*Use the global variable for font weight*/

    width: 50px;

  }

私たちは次のことを行いました。

  • アラート要素内にローカル変数を定義しました。

--bg-color: red

  • var キーワードを使用してこのローカル変数にアクセスします。

background-color: var(--bg-color);

  • 前に宣言したグローバル変数をフォントの太さとして使用しました。

font-weight: var(--font-weight);

JavaScript コードを追加する

アラート要素を応答性の高いものにすることができます。それをクリックすると、ブラウザ上に次のようなポップアップが表示されます。 「 JavaScript で CSS 変数を使用しました !!!!」。

<script/> タグを使用して HTML コードを囲むことで、JavaScript コードを HTML コードに直接追加できます。 JavaScript コードは HTML コードの後、 </body> タグを閉じる前に配置する必要があります。

このコードを追加します。 

 <script>

        const alertDiv = document.querySelector('.alert');

        alertDiv.addEventListener('click', function() {

          window.alert("We have used CSS Variables with JavaScript!!!!");

        });

      </script>

HTML コードは次のようになります。

2023-04-11-15-19-10 のスクリーンショット
2023-04-11-15-19-10 のスクリーンショット

私たちの JavaScript は次のことを行います。

  • document.querySelector() を使用してアラート要素を見つけます。
  • アラート要素に変数 alertDiv を割り当てます。
  • alertDiv では、 addEventListener() メソッドを使用して「クリック」イベントを追加します。
  • window.alert() を使用して、クリック イベントが発生したときにメッセージを表示します。

ページがレンダリングされると、次のようになります。

screenzy-1681246835983
screenzy-1681246835983

alert をクリックすると、次のメッセージが表示されます。

screenzy-1681246888674
screenzy-1681246888674

CSS 変数のフォールバック値

スタイルシートで定義されていない変数を参照するとどうなりますか?適用しようとしている CSS 効果は適用されません。フォールバック値は、参照されていない変数の代わりに表示されるエフェクトの値を提供します。

フォールバック値は次の点で役立ちます。

  • 特定のブラウザが CSS 変数を理解できない場合は、select プロパティにフォールバック先を含めることができます。
  • CSS 変数が原因でページが期待どおりに動作しないと思われる場合は、フォールバック値を使用してそれが真かどうかをテストできます。

カンマで区切って複数のフォールバック プロパティを指定できます。たとえば、次のコードを考えてみましょう。 

 :root {

    --primary-color: #007bff;

  }

  .btn {

    background-color: var(--primary-color, red, yellow);

    padding: 10px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

  }

グローバル変数を使用するときに、 primary-color 単語のスペルを間違えると、宣言されていないことを意味し、フォールバック値である赤が選択されます。

このコードを使用すると、それをより適切に示すことができます。 

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        :root {

    --primary-color: #007bff;

  }

  .btn {

    background-color: var(--primary-color, red);

    padding: 10px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

  }

    </style>

</head>

<body>

    <button class="btn">Click me!</button>

</body>

</html>

これをブラウザでレンダリングすると、次のようになります。

screenzy-1681246957036
screenzy-1681246957036

ただし、次のように同じコードを取得して、 button セレクターの 1 文字だけを変更することができます。 

 .btn {

    background-color: var(--primary-colr, red); /*I have misspelled primary-color to be primary-colr */

    padding: 10px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

  }

ブラウザはこれをレンダリングします。

screenzy-1681247011055
screenzy-1681247011055

CSS での動的値変数と計算値変数の使用

動的値は、 ユーザー入力などの特定のイベントまたは条件に基づいて自動的に更新されます。

このコードを研究してください。 

 <!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>CSS Variables with JavaScript</title>

    <style>

        :root {

          --color: #333; 

        }

        #color-input {

          margin-left: 1em;

        }

        #color-input {

          --color: var(--color-input);

        }

      </style>

  </head>

  <body>

    <label for="color-input">Choose a color:</label>

<input type="color" id="color-input">

  </body>

</html>

上記のコードは次のことを行います。

  • : :root セレクターを使用して、変数 --color デフォルト値 #333 で宣言します。
  • #color-input 使用して入力要素を選択します。
  • --color の値は var(--color-input) に設定されます。これは、ユーザーがカラー ピッカーを使用して新しい色を選択すると、色が常に更新されることを意味します。

計算値は、 他のプロパティまたは変数に基づいて計算を実行します。このコードを使用してそれを説明できます。 

 :root {

  --base-font-size: 14px;

  --header-font-size: calc(var(--base-font-size) * 3);

}

h2 {

  font-size: var(--header-font-size);

}

このコード ブロックから、次のことがわかります。

  • 基本フォント サイズを定義する --base-font-size 変数があります。
  • --header-font-size 、 –base-font-size の値の 3 倍です。
  • --header-font-size を指定して var を使用する h1 セレクターがあります。
  • したがって、Web ページ内のすべての h1 は、 --base-font-size のサイズの 3 倍になります。

まとめ

CSS 変数を使用して開発プロセスを高速化し、保守しやすいコードを作成する方法を理解しました。カスタム変数は、HTML や React などのライブラリで使用できます。 CSS を使用して React のスタイルを設定するために使用できるさまざまなアプローチを確認してください。

ソースコードは ここで 確認できます。

「 CSS で変数を使用してスタイリングを合理化する方法」についてわかりやすく解説！絶対に観るべきベスト2動画

CSSカスタムプロパティの使い方 #shorts
https://www.youtube-nocookie.com/shorts/LrENNvPQhGw
【2022】これから使えるCSSプロパティ18選！新しく使える便利なCSSテクニック！
https://www.youtube-nocookie.com/watch?v=EeZM5SXuCsU&pp=ygVNIENTUyDjgaflpInmlbDjgpLkvb_nlKjjgZfjgabjgrnjgr_jgqTjg6rjg7PjgrDjgpLlkIjnkIbljJbjgZnjgovmlrnms5UmaGw9SkE%3D

最新記事一覧

関連記事一覧