Skip to content

Commit 4fe5d9f

Browse files
authored
docs: translate sfc style features (#602)
1 parent fae4ba6 commit 4fe5d9f

File tree

1 file changed

+33
-33
lines changed

1 file changed

+33
-33
lines changed

src/api/sfc-style.md

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
sidebarDepth: 1
33
---
44

5-
# SFC Style Features
5+
# SFC スタイルの機能
66

77
## `<style scoped>`
88

9-
When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by using PostCSS to transform the following:
9+
`<style>` タグが `scoped` 属性を持つとき、その CSS は現在のコンポーネントの要素にだけ適用されます。これは Shadow DOM に見られるスタイルのカプセル化に似ています。いくつかの注意点がありますが、ポリフィルは必要ありません。これは PostCSS を使った次のような変換で実現しています:
1010

1111
```vue
1212
<style scoped>
@@ -20,7 +20,7 @@ When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements
2020
</template>
2121
```
2222

23-
Into the following:
23+
次のようになります:
2424

2525
```vue
2626
<style>
@@ -34,13 +34,13 @@ Into the following:
3434
</template>
3535
```
3636

37-
### Child Component Root Elements
37+
### 子コンポーネントのルート要素
3838

39-
With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.
39+
`scoped` を使うと、親コンポーネントのスタイルは子コンポーネントに漏れません。しかし、子コンポーネントのルートノードは、親スコープの CSS と子スコープの CSS の両方が影響を受けます。これは親コンポーネントがレイアウトの目的で子コンポーネントのルート要素をスタイルできるようにするという設計のためです。
4040

41-
### Deep Selectors
41+
### ディープセレクタ
4242

43-
If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `:deep()` pseudo-class:
43+
`scoped` スタイルのセレクタを「深く」したい場合、例えば子コンポーネントに影響を与えたい場合は、`:deep()` 擬似クラスを使用できます:
4444

4545
```vue
4646
<style scoped>
@@ -50,7 +50,7 @@ If you want a selector in `scoped` styles to be "deep", i.e. affecting child com
5050
</style>
5151
```
5252

53-
The above will be compiled into:
53+
上記は次のようにコンパイルされます:
5454

5555
```css
5656
.a[data-v-f3f3eg9] .b {
@@ -59,12 +59,12 @@ The above will be compiled into:
5959
```
6060

6161
:::tip
62-
DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
62+
`v-html` で作られた DOM コンテンツは、スコープ付きスタイルの影響を受けませんが、ディープセレクタを使ってスタイルすることができます。
6363
:::
6464

65-
### Slotted Selectors
65+
### スロットセレクタ
6666

67-
By default, scoped styles do not affect contents rendered by `<slot/>`, as they are considered to be owned by the parent component passing them in. To explicitly target slot content, use the `:slotted` pseudo-class:
67+
デフォルトでスコープ付きスタイルは、親コンポーネントが所有しているコンテンツとみなして、`<slot/>` でレンダリングされたコンテンツに影響を与えません。スロットのコンテンツを明示的に対象にするには、`:slotted` 擬似クラスを使用できます:
6868

6969
```vue
7070
<style scoped>
@@ -74,9 +74,9 @@ By default, scoped styles do not affect contents rendered by `<slot/>`, as they
7474
</style>
7575
```
7676

77-
### Global Selectors
77+
### グローバルセレクタ
7878

79-
If you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another `<style>` (see below):
79+
グローバルに 1 つのルールだけを適用したい場合、別の `<style>` を作るのではなく、`:global` 擬似クラスを使用できます(後述):
8080

8181
```vue
8282
<style scoped>
@@ -86,29 +86,29 @@ If you want just one rule to apply globally, you can use the `:global` pseudo-cl
8686
</style>
8787
```
8888

89-
### Mixing Local and Global Styles
89+
### ローカルとグローバルのスタイル併用
9090

91-
You can also include both scoped and non-scoped styles in the same component:
91+
スコープ付きとスコープなしのスタイルの両方を同じコンポーネントに含めることもできます:
9292

9393
```vue
9494
<style>
95-
/* global styles */
95+
/* グローバルスタイル */
9696
</style>
9797
9898
<style scoped>
99-
/* local styles */
99+
/* ローカルスタイル */
100100
</style>
101101
```
102102

103-
### Scoped Style Tips
103+
### スコープ付きスタイルのヒント
104104

105-
- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit.
105+
- **スコープ付きスタイルでもクラスが不要になるわけではないです**。ブラウザがさまざまな CSS セレクタをレンダリングする方法のため、`p { color: red }` はスコープ付きの場合(例えば属性セレクタと合わせた場合)に何杯も遅くなります。`.example { color: red }` のようにクラスや ID を代わりに使えば、このパフォーマンスへの影響をほぼ解消することができます。
106106

107-
- **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
107+
- **再帰的コンポーネントの子孫セレクタには注意が必要です!** `.a .b` セレクタを使った CSS ルールでは、`.a` に一致する要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントに含まれるすべての `.b` がルールに一致してしまいます。
108108

109109
## `<style module>`
110110

111-
A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modules/css-modules) and exposes the resulting CSS classes to the component as an object under the key of `$style`:
111+
`<style module>` タグは [CSS Modules](https://github.com/css-modules/css-modules) としてコンパイルされ、結果として得られる CSS クラスを `$style` というキーの下にオブジェクトとしてコンポーネントに公開します:
112112

113113
```vue
114114
<template>
@@ -124,13 +124,13 @@ A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modul
124124
</style>
125125
```
126126

127-
The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.
127+
この結果として得られるクラスは、衝突を避けるためにハッシュ化され、CSS を現在のコンポーネントだけにスコープするのと同じ効果を実現します。
128128

129-
Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
129+
[Global exceptions](https://github.com/css-modules/css-modules#exceptions)[Composition](https://github.com/css-modules/css-modules#composition) などの詳細については [CSS Modules の仕様](https://github.com/css-modules/css-modules) を参照してください。
130130

131-
### Custom Inject Name
131+
### カスタム注入名
132132

133-
You can customize the property key of the injected classes object by giving the `module` attribute a value:
133+
`module` 属性に値を指定することで、注入されたクラスオブジェクトのプロパティキーをカスタマイズできます:
134134

135135
```vue
136136
<template>
@@ -144,21 +144,21 @@ You can customize the property key of the injected classes object by giving the
144144
</style>
145145
```
146146

147-
### Usage with Composition API
147+
### Composition API での使用
148148

149-
The injected classes can be accessed in `setup()` and `<script setup>` via the [`useCssModule`](/api/global-api.html#usecssmodule) API. For `<style module>` blocks with custom injection names, `useCssModule` accepts the matching `module` attribute value as the first argument:
149+
注入されたクラスは、[`useCssModule`](/api/global-api.html#usecssmodule) API を介して `setup()``<script setup>` からアクセスできます。カスタム注入名のある `<style module>` ブロックは `useCssModule` が一致する `module` 属性の値を最初の引数として受け取ります:
150150

151151
```js
152-
// default, returns classes for <style module>
152+
// デフォルトでは <style module> を返します
153153
useCssModule()
154154

155-
// named, returns classes for <style module="classes">
155+
// 名前付きでは <style module="classes"> のクラスを返します
156156
useCssModule('classes')
157157
```
158158

159-
## State-Driven Dynamic CSS
159+
## 状態ドリブンな動的 CSS
160160

161-
SFC `<style>` tags support linking CSS values to dynamic component state using the `v-bind` CSS function:
161+
SFC `<style>` タグは `v-bind` CSS 関数を使って、CSS の値を動的コンポーネントの状態にリンクすることをサポートしています:
162162

163163
```vue
164164
<template>
@@ -182,7 +182,7 @@ export default {
182182
</style>
183183
```
184184

185-
The syntax works with [`<script setup>`](./sfc-script-setup), and supports JavaScript expressions (must be wrapped in quotes):
185+
この構文は [`<script setup>`](./sfc-script-setup) で動作して、JavaScript 式(引用符で囲む必要があります)をサポートしています:
186186

187187
```vue
188188
<script setup>
@@ -202,4 +202,4 @@ p {
202202
</style>
203203
```
204204

205-
The actual value will be compiled into a hashed CSS custom property, so the CSS is still static. The custom property will be applied to the component's root element via inline styles and reactively updated if the source value changes.
205+
実際の値はハッシュ化された CSS カスタムプロパティにコンパイルされるため、CSS は静的なままです。このカスタムプロパティは、インラインスタイルを介してコンポーネントのルート要素に適用され、ソースの値が変更されるとリアクティブに更新されます。

0 commit comments

Comments
 (0)