mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-11 02:33:10 +08:00
174e31b3fc
Translated 85 skill sub-reference files to achieve full parity with the English source: - skills/angular-developer/references/ — 35 files (all references) - skills/remotion-video-creation/rules/ — 28 files (all rules) - skills/tinystruct-patterns/references/ — 5 files - skills/openclaw-persona-forge/references/ — 6 files - skills/skill-comply/prompts/ — 3 files - skills/lead-intelligence/agents/ — 4 files - skills/brand-voice/references/ — 1 file - skills/frontend-slides/ — 2 files - hooks/memory-persistence/README.md — 1 file English source parity: 0 missing files (excluding rules/zh/, internal docs, and experimental examples absent from zh-CN)
92 lines
3.2 KiB
Markdown
92 lines
3.2 KiB
Markdown
# コンポーネントスタイリング
|
||
|
||
Angular コンポーネントは、カプセル化とモジュール性を実現するために、テンプレートに特定のスタイルを定義できます。
|
||
|
||
## スタイルの定義
|
||
|
||
スタイルはインラインまたは別ファイルで定義できます。
|
||
|
||
```ts
|
||
@Component({
|
||
selector: 'app-photo',
|
||
// インラインスタイル
|
||
styles: `
|
||
img {
|
||
border-radius: 50%;
|
||
}
|
||
`,
|
||
// または外部ファイル
|
||
styleUrl: 'photo.component.css',
|
||
})
|
||
export class Photo {}
|
||
```
|
||
|
||
## ビューエンカプセレーション
|
||
|
||
すべてのコンポーネントには、スタイルのスコープを決定するビューエンカプセレーション設定があります。
|
||
|
||
| モード | 動作 |
|
||
| :------------------------------ | :-------------------------------------------------------------------------------------------- |
|
||
| `Emulated`（デフォルト） | 一意の HTML 属性を使用してスタイルをコンポーネントにスコープします。グローバルスタイルは引き続き影響する可能性があります。 |
|
||
| `ShadowDom` | ブラウザのネイティブ Shadow DOM API を使用してスタイルを完全に分離します。 |
|
||
| `None` | カプセル化を無効にします。コンポーネントスタイルはグローバルになります。 |
|
||
| `ExperimentalIsolatedShadowDom` | コンポーネントのスタイルのみが適用されることを厳密に保証します。 |
|
||
|
||
### 使用方法
|
||
|
||
```ts
|
||
import { ViewEncapsulation } from '@angular/core';
|
||
|
||
@Component({
|
||
...,
|
||
encapsulation: ViewEncapsulation.None,
|
||
})
|
||
export class GlobalStyled {}
|
||
```
|
||
|
||
## 特殊セレクター
|
||
|
||
### `:host`
|
||
|
||
コンポーネントのホスト要素（コンポーネントのセレクターに一致する要素）を対象にします。
|
||
|
||
```css
|
||
:host {
|
||
display: block;
|
||
border: 1px solid black;
|
||
}
|
||
```
|
||
|
||
### `:host-context()`
|
||
|
||
先祖の何らかの条件に基づいてホスト要素を対象にします。
|
||
|
||
```css
|
||
/* 先祖に 'theme-dark' クラスがある場合にスタイルを適用する */
|
||
:host-context(.theme-dark) {
|
||
background-color: #333;
|
||
}
|
||
```
|
||
|
||
### `::ng-deep`
|
||
|
||
特定のルールのビューエンカプセレーションを無効にし、子コンポーネントに「漏れ」させます。
|
||
**注意：Angular チームは `::ng-deep` の使用を強く推奨しません。** これは後方互換性のためにのみサポートされています。
|
||
|
||
## テンプレート内のスタイル
|
||
|
||
コンポーネントのテンプレートで直接 `<style>` 要素を使用できます。ビューエンカプセレーションのルールは引き続き適用されます。
|
||
|
||
```html
|
||
<style>
|
||
.dynamic-class {
|
||
color: red;
|
||
}
|
||
</style>
|
||
<div class="dynamic-class">Hello</div>
|
||
```
|
||
|
||
## 外部スタイル
|
||
|
||
CSS での `<link>` や `@import` の使用は外部スタイルとして扱われます。**外部スタイルはエミュレートされたビューエンカプセレーションの影響を受けません。**
|