【初心者向け】Angularで要素にスタイルを適用する方法：スタイルバインディング、ngStyle、スタイル属性、コンポーネントスタイル、CSS変数

Angularにおける [ngClass] と [class] バインディングの違い

1. [class] バインディング
   単一のクラスを条件に応じて追加・削除します。
2. [ngClass] ディレクティブ
   複数のクラスを条件に応じて動的に追加・削除します。

それぞれの詳細と使い分けについて、以下で分かりやすく解説します。

[class] バインディング

構文

<element [class]="classExpression">
</element>

説明

• 式が false の場合、指定されたクラスが要素から削除されます。
• classExpression は、真偽値を返す式です。

例

<p [class.special]="isSpecial">
  特別な文章
</p>

上記の例では、isSpecial プロパティが true の場合のみ、special クラスが <p> 要素に追加されます。

利点

• 単一のクラスを条件に応じて制御するのに適している
• シンプルで分かりやすい構文

欠点

• 複数のクラスを動的に制御するには不向き

[ngClass] ディレクティブ

<element [ngClass]="classObject">
</element>

• キーに対応する式が false の場合、そのキーに対応するクラスが要素から削除されます。
• オブジェクト内の各キー・値ペアが評価されます。
• classObject は、クラス名をキー、真偽値を返す式を値としたオブジェクトです。

<p [ngClass]="{'special': isSpecial, 'important': isImportant}">
  特別な重要文章
</p>

上記の例では、isSpecial プロパティが true の場合、special クラスが要素に追加されます。 同様に、isImportant プロパティが true の場合、important クラスが要素に追加されます。

• 条件に応じて複雑なクラス制御が可能

• [class] バインディングよりも記述量が多くなる

使い分け

• 複数のクラスを動的に制御する場合は、[ngClass] ディレクティブがおすすめです。
• 単一のクラスを条件に応じて制御する場合は、[class] バインディングがおすすめです。

以下は、それぞれの具体的な使用例です。

[class] バインディングの使用例

• ボタンがクリックされた状態に応じて、アクティブ状態を示すクラスを追加する
• フォーム入力欄がバリデーションエラーになった場合に、エラーを示すクラスを追加する

[ngClass] ディレクティブの使用例

• レスポンシブデザインで、画面サイズに応じて要素のスタイルを切り替える
• 要素の状態に応じて、複数のクラスを動的に追加・削除する
• ユーザーロールに応じて、要素に異なるスタイルを適用する

[class] バインディングと [ngClass] ディレクティブは、どちらも要素に動的にCSSクラスを適用するために使用できます。 それぞれの特性を理解し、状況に応じて適切な方法を選択することが重要です。

• Angular 13以降では、[class] バインディングも [ngClass] ディレクティブと同様に複数のクラスを制御できるようになっています。

<p [class.special]="isSpecial">
  特別な文章
</p>

TypeScript

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p [class.special]="isSpecial">
      特別な文章
    </p>
  `,
})
export class AppComponent {
  isSpecial = false;
}

上記のコードでは、isSpecial プロパティが false の初期状態では <p> 要素に special クラスが適用されていません。

しかし、isSpecial プロパティを true に変更すると、<p> 要素に special クラスが適用されます。

結果

• isSpecial が true の場合: <p class="special">特別な文章</p>
• isSpecial が false の場合: <p>特別な文章</p>

HTML

<p [ngClass]="{'special': isSpecial, 'important': isImportant}">
  特別な重要文章
</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p [ngClass]="{'special': isSpecial, 'important': isImportant}">
      特別な重要文章
    </p>
  `,
})
export class AppComponent {
  isSpecial = false;
  isImportant = false;
}

上記のコードでは、isSpecial プロパティと isImportant プロパティの状態に応じて、<p> 要素に special クラスと important クラスを動的に適用します。

• isSpecial が true かつ isImportant が true の場合: <p class="special important">特別な重要文章</p>

• 実際の開発では、もっと複雑な条件分岐や、複数の要素へのクラス適用などを行うことも可能です。

スタイルバインディング ([style])

<element [style]="styleObject">
</element>

• キーに対応するスタイルプロパティに、値が設定されます。
• styleObject は、CSSプロパティ名をキー、値を値としたオブジェクトです。

<p [style]="{'color': isSpecial ? 'red' : 'blue'}">
  特別な文章
</p>

上記の例では、isSpecial プロパティが true の場合、<p> 要素の color プロパティが red に設定されます。isSpecial プロパティが false の場合は、color プロパティが blue に設定されます。

• インラインでスタイルを定義できる

• スタイルシートの分離性が損なわれる
• 複雑なスタイルを定義するには不向き

ngStyle ディレクティブ

<element ngStyle="styleExpression">
</element>

• 式が評価されたスタイルオブジェクトが、要素に適用されます。
• styleExpression は、スタイルオブジェクトを返す式です。

<p ngStyle="{ 'color': isSpecial ? 'red' : 'blue' }">
  特別な文章
</p>

上記の例は、[style] バインディングの例と同様の効果になります。

• [style] バインディングよりも柔軟なスタイル定義が可能

スタイル属性

<element style="style-definition">
</element>

• 要素に直接スタイルが適用されます。
• style-definition は、CSSスタイル定義を文字列で記述します。

<p style="color: red;">
  特別な文章
</p>

上記の例では、<p> 要素の color プロパティに red が設定されます。

• 簡単なスタイルを定義するのに適している

コンポーネントスタイル

• スタイルカプセル化により、スタイルの干渉を防ぐことができます。
• コンポーネントのテンプレート内でスタイルを定義し、コンポーネントインスタンスに適用します。

<p class="special">
  特別な文章
</p>

.special {
  color: red;
}

上記の例では、AppComponent コンポーネントのテンプレート内で special クラスを定義し、コンポーネントの CSS ファイルでスタイルを定義しています。

• 保守性がしやすい
• 再利用性が高い
• スタイルをコンポーネントにカプセル化できる

CSS変数

• JavaScriptからCSS変数の値を変更することで、スタイルを動的に更新できます。
• CSS変数を使用して、動的にスタイル値を定義できます。

:root {
  --primary-color: red;
}

.special {
  color: var(--primary-color);
}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p class="special">
      特別な文章
    </p>
  `,
})
export class AppComponent {
  changeColor() {
    document.documentElement.style.setProperty('--primary-color', 'blue');
  }
}