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

2024-06-17

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

[class] バインディング: 単一のクラスを条件に応じて追加・削除します。

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

[class] バインディング

構文:

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

説明:

classExpression は、真偽値を返す式です。
式が true の場合、指定されたクラスが要素に追加されます。

例:

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

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

利点:

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

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

[ngClass] ディレクティブ

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

classObject は、クラス名をキー、真偽値を返す式を値としたオブジェクトです。
オブジェクト内の各キー・値ペアが評価されます。

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

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

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

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

使い分け

単一のクラスを条件に応じて制御する場合は、[class] バインディングがおすすめです。

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

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

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

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

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

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

補足:

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

[class] バインディング

<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 の初期状態では  要素に special クラスが適用されていません。

結果:

isSpecial が false の場合: 特別な文章
isSpecial が true の場合: 特別な文章

[ngClass] ディレクティブ

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 プロパティの状態に応じて、 要素に special クラスと important クラスを動的に適用します。

isSpecial が false かつ isImportant が false の場合: 特別な重要文章

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

Angularで動的にCSSクラスを適用するその他の方法

以下に、代表的な方法とそれぞれの利点・欠点をご紹介します。

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

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

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

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

上記の例では、isSpecial プロパティが true の場合、 要素の 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>

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

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

コンポーネントスタイル

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

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

.special {
  color: red;
}

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

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

CSS変数

CSS変数を使用して、動的にスタイル値を定義できます。
JavaScriptから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');
  }
}