コンポーネントスコープのスタイル
スタイルをコンポーネント内に限定します。
「コンポーネントスコープのスタイル」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
スタイルはコンポーネントに属する
Angularでは、各コンポーネントに独自のCSSを持たせることができます。デフォルトでは、これらのスタイルはスコープ化されます。つまり、そのコンポーネントのテンプレートにだけ適用され、ページの他の部分には影響しません。
インラインstyles配列
@Componentデコレーターのstyles配列を使って、スタイルをインラインで定義できます。
@Component({
selector: "app-card",
template: "<div class='card'>Hello</div>",
styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}外部styleUrls
一般的には、styleUrlsを使って1つ以上の外部スタイルシートを指定します。
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrls: ["./card.component.css"]
})
export class CardComponent {}styleUrlの省略形
スタイルシートが1つだけの場合、最新のAngularでは単数形のstyleUrlプロパティを使用できます。
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrl: "./card.component.css"
})
export class CardComponent {}スコープ化の動作
あるコンポーネントの.cardルールが、同じcardクラスを使う別のコンポーネントに漏れ出すことはありません。それぞれが分離されています。
/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */スコープ化の仕組み
Angularはコンポーネントの要素に一意の属性を追加し、それに一致するようCSSセレクターを書き換えます。そのため、スタイルはそのコンポーネント内にだけ適用されます。
<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>
/* generated css */
.card[_ngcontent-abc] { color: navy; }スタイルは外部から侵入しない
スタイルが外部に漏れないのと同様に、外部のスタイルが意図せずコンポーネントのルールを上書きすることもほとんどありません。これにより、コンポーネントを自己完結型に保てます。
グローバルスタイル
アプリ全体に適用するスタイルには、angular.jsonに記載されているグローバルなstyles.cssを使用します。これらはスコープ化されません。
/* src/styles.css - global */
body { font-family: system-ui; }複数のスタイルシート
コンポーネントでは、配列に複数のスタイルシートを指定して読み込むことができます。
@Component({
selector: "app-page",
styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}classバインディングの使用
スコープ化されたスタイルは、classバインディングと組み合わせることで、条件に応じて自然にルールを適用できます。
<div class="card" [class.featured]="isFeatured"></div>
/* card.component.css */
.featured { border-color: gold; }スコープ化の利点
スコープ化されたスタイルは、大規模なアプリでの名前の衝突を防ぎ、チームが独立して作業できるようにします。また、コンポーネントの再利用性が高まり、動作も理解しやすくなります。
クイックチェック
コンポーネントスコープのスタイルについて理解度を確認しましょう。
まとめ
コンポーネントには、styles、styleUrls、またはstyleUrlを使ってCSSを指定します。デフォルトでは、これらのルールはコンポーネント内にスコープされるため、競合を防げます。アプリ全体に適用するルールには、グローバルスタイルシートを使用します。
よくある質問
「コンポーネントスコープのスタイル」レッスンは無料ですか？
はい。「コンポーネントスコープのスタイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「コンポーネントスコープのスタイル」で何を学びますか？
スタイルをコンポーネント内に限定します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「コンポーネントスコープのスタイル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- コンポーネントスコープのスタイル
- ビューカプセル化モード
- HostとHost-Contextのスタイリング
- 動的なクラスとスタイル