Angularコンポーネントのスタイル

では、CSSを通して私たちのマークアップにスタイルを適用しましょう。 そのために、コンポーネントのマークアップ用のCSSスタイルが記述されるファイル app.component.cssが役立ちます。 この際、AngularはスタイルがCSSモジュールとして機能するように自動的に処理します。 これは、すべてのセレクターがコンポーネントのマークアップに対してのみ機能し、外部のマークアップには影響を与えないことを意味します。

実際に確認してみましょう。私たちのコンポーネントに次のマークアップがあるとします：

app/app.component.html<div>
  abcde
</div>

div要素に色を設定してみましょう：

app/app.component.cssdiv {
  color: red;
}

これにより、このスタイルが私たちのコンポーネント内のdiv要素にのみ適用され、他のいかなる要素にも適用されないことを確信できます。