動的なクラスとスタイル
クラスとスタイルをリアクティブにバインドします。
「動的なクラスとスタイル」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
テンプレートでの動的なスタイル設定
Angularでは、クラスやインラインスタイルをコンポーネントの状態にバインドできます。これにより、データの変化に応じてUIが自動的に更新されます。
単一クラスのバインディング
[class.name]を使うと、boolean式に基づいて1つのCSSクラスを切り替えられます。
<div [class.active]="isActive">Item</div>
// component
isActive = true;ngClassで複数のクラスを指定する
ngClassを使うと、クラス名をboolean値に対応付けたオブジェクトによって、複数のクラスを一度に適用できます。
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>配列と文字列を使ったngClass
ngClassには、クラス名の文字列や配列も指定できます。
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>単一スタイルのバインディング
[style.property]を使うと、1つのインラインCSSプロパティを値にバインドできます。
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";単位付きのスタイルバインディング
単位の接尾辞を追加すると、数値をピクセルやパーセントなどの単位付きの値にバインドできます。
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;ngStyleで複数のスタイルを指定する
ngStyleを使うと、オブジェクトから複数のインラインスタイルを一度に設定できます。
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>競合時はクラスバインディングが優先される
静的クラスとバインドされたクラスが重複する場合、Angularはそれらをマージします。バインディングは動的クラスを付けるかどうかを制御しますが、静的クラスを削除することはありません。
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->状態への反応
バインディングは変更検知のたびに再評価されるため、コンポーネントのプロパティを更新すると、要素のスタイルがすぐに変わります。
toggle() {
this.isActive = !this.isActive;
}クラスとスタイルの使い分け
保守性を高めるため、CSSルールを使ったクラスバインディングを優先してください。計算された幅や色など、本当に動的な値には直接のスタイルバインディングを使用します。
Signalsとの連携
クラスとスタイルのバインディングはSignalsでも機能します。テンプレート式でsignalを呼び出すだけです。
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);クイックチェック
動的なクラスとスタイルについて理解度を確認しましょう。
まとめ
[class.name]で1つのクラスを、ngClassで複数のクラスを切り替えられます。[style.prop]（単位の指定も可能）で1つのスタイルを、ngStyleで複数のスタイルを設定できます。バインディングは、Signalsを含む状態に自動的に反応します。
よくある質問
「動的なクラスとスタイル」レッスンは無料ですか？
はい。「動的なクラスとスタイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「動的なクラスとスタイル」で何を学びますか？
クラスとスタイルをリアクティブにバインドします。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「動的なクラスとスタイル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。