Skip to content

Commit b484a9d

Browse files
rdlabordlabo
committed
translate(ja): translate about theming
1 parent e18feb6 commit b484a9d

File tree

9 files changed

+152
-152
lines changed

9 files changed

+152
-152
lines changed

‎docs/theming/advanced.md‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ sidebar_label: 高度なカスタマイズ
66
import CodeColor from '@components/page/theming/CodeColor';
77

88
<head>
9-
<title>高度なカスタマイズ: Quickly Customize App Colors using CSS | Ionic</title>
9+
<title>高度なカスタマイズ: CSSを使用してアプリの色をすばやくカスタマイズ | Ionic</title>
1010
<meta
1111
name="description"
12-
content="CSS-based theming enables apps to customize colors quickly by loading a CSS file or changing CSS property values. Read to learn about Ionic Advanced Theming."
12+
content="CSSベースのテーマ設定により、CSSファイルをロードするか、CSSプロパティ値を変更することで、アプリの色をすばやくカスタマイズできます。Ionic高度なテーマ設定について学びましょう。"
1313
/>
1414
</head>
1515

@@ -52,35 +52,35 @@ iOS 15 と macOS の Safari は自動的に適切なテーマカラーを決定
5252

5353
テーマセクションのアプリケーション変数とステップ変数は、アプリケーションの色を変更するのに便利ですが、しばしば、複数のコンポーネントで使用される変数が必要になることがあります。以下の変数は、コンポーネント間で共有され、グローバルなパディング設定などを変更することができます。
5454

55-
### Application Variables
55+
### アプリケーション変数
5656

57-
| Name | Description |
57+
| Name | 説明 |
5858
| --------------------------- | ---------------------------------------------------------------------------------------------------- |
59-
| `--ion-font-family` | Font family of the app |
60-
| `--ion-statusbar-padding` | Statusbar padding top of the app |
61-
| `--ion-safe-area-top` | Adjust the safe area inset top of the app |
62-
| `--ion-safe-area-right` | Adjust the safe area inset right of the app |
63-
| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app |
64-
| `--ion-safe-area-left` | Adjust the safe area inset left of the app |
65-
| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin) |
66-
| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding) |
67-
| `--ion-placeholder-opacity` | Adjust the opacity of the placeholders used in the input, textarea, searchbar, and select components |
68-
69-
### Grid Variables
70-
71-
| Name | Description |
59+
| `--ion-font-family` | アプリのフォントファミリー |
60+
| `--ion-statusbar-padding` | アプリのステータスバーの上部パディング |
61+
| `--ion-safe-area-top` | アプリのセーフエリアインセット上部を調整 |
62+
| `--ion-safe-area-right` | アプリのセーフエリアインセット右側を調整 |
63+
| `--ion-safe-area-bottom` | アプリのセーフエリアインセット下部を調整 |
64+
| `--ion-safe-area-left` | アプリのセーフエリアインセット左側を調整 |
65+
| `--ion-margin` | [Margin属性](../layout/css-utilities.md#element-margin)のマージンを調整 |
66+
| `--ion-padding` | [Padding属性](../layout/css-utilities.md#element-padding)のパディングを調整 |
67+
| `--ion-placeholder-opacity` | input、textarea、searchbar、selectコンポーネントで使用されるプレースホルダーの不透明度を調整 |
68+
69+
### グリッド変数
70+
71+
| Name | 説明 |
7272
| ------------------------------ | ---------------------------------------------- |
73-
| `--ion-grid-columns` | Number of columns in the grid |
74-
| `--ion-grid-padding-xs` | Padding of the grid for xs breakpoints |
75-
| `--ion-grid-padding-sm` | Padding of the grid for sm breakpoints |
76-
| `--ion-grid-padding-md` | Padding of the grid for md breakpoints |
77-
| `--ion-grid-padding-lg` | Padding of the grid for lg breakpoints |
78-
| `--ion-grid-padding-xl` | Padding of the grid for xl breakpoints |
79-
| `--ion-grid-column-padding-xs` | Padding of the grid columns for xs breakpoints |
80-
| `--ion-grid-column-padding-sm` | Padding of the grid columns for sm breakpoints |
81-
| `--ion-grid-column-padding-md` | Padding of the grid columns for md breakpoints |
82-
| `--ion-grid-column-padding-lg` | Padding of the grid columns for lg breakpoints |
83-
| `--ion-grid-column-padding-xl` | Padding of the grid columns for xl breakpoints |
73+
| `--ion-grid-columns` | グリッドの列数 |
74+
| `--ion-grid-padding-xs` | xsブレークポイントのグリッドのパディング |
75+
| `--ion-grid-padding-sm` | smブレークポイントのグリッドのパディング |
76+
| `--ion-grid-padding-md` | mdブレークポイントのグリッドのパディング |
77+
| `--ion-grid-padding-lg` | lgブレークポイントのグリッドのパディング |
78+
| `--ion-grid-padding-xl` | xlブレークポイントのグリッドのパディング |
79+
| `--ion-grid-column-padding-xs` | xsブレークポイントのグリッド列のパディング |
80+
| `--ion-grid-column-padding-sm` | smブレークポイントのグリッド列のパディング |
81+
| `--ion-grid-column-padding-md` | mdブレークポイントのグリッド列のパディング |
82+
| `--ion-grid-column-padding-lg` | lgブレークポイントのグリッド列のパディング |
83+
| `--ion-grid-column-padding-xl` | xlブレークポイントのグリッド列のパディング |
8484

8585
## 既知の変数の制限
8686

@@ -163,9 +163,9 @@ $text-darker: darken($text, 15);
163163
$text-lighter: lighten($text, 15);
164164
```
165165

166-
After running through the Sass compiler, the colors will have the following values:
166+
Sassコンパイラを実行した後、色は次の値になります：
167167

168-
| Variable | Value |
168+
| Variable | 値 |
169169
| ------------------- | ---------------------------------------------- |
170170
| `$background` | <CodeColor color="#0054e9">#0054e9</CodeColor> |
171171
| `$background-shade` | <CodeColor color="#004acd">#004acd</CodeColor> |
@@ -178,23 +178,23 @@ After running through the Sass compiler, the colors will have the following valu
178178

179179
これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionic では、これが[各色にバリエーションがある](colors.md#layered-colors)理由であり、テーマ設定に[stepped colors](themes.md#stepped-colors)が必要な理由でもあります。
180180

181-
There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
181+
これを可能にする[色の変更提案](https://github.com/w3c/csswg-drafts/issues/3187)について議論しているドラフトとイシューがあります。
182182

183-
## Safe Area Padding
183+
## セーフエリアパディング
184184

185-
The safe area of a display is the section that is not covered by the device's notch, status bar, or other elements that are part of the device's UI and not the app's. The dimensions of the safe area are different across devices and orientations (portrait or landscape).
185+
ディスプレイのセーフエリアは、デバイスのノッチ、ステータスバー、またはデバイスのUIの一部でありアプリの一部ではないその他の要素によって覆われていないセクションです。セーフエリアの寸法は、デバイスや向き（縦向きまたは横向き）によって異なります。
186186

187-
For example, below are screenshots of an iPhone 14 Pro Max. The red section is the safe area, and the white sections are places where the app's content would be covered up.
187+
たとえば、以下はiPhone 14 Pro Maxのスクリーンショットです。赤いセクションがセーフエリアで、白いセクションはアプリのコンテンツが覆われる場所です。
188188

189189
| Portrait | Landscape |
190190
| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
191191
| <img src={require('@site/static/img/theming/ios-portrait-top.png').default} /> | <img src={require('@site/static/img/theming/ios-landscape-left.png').default} /> |
192192

193-
To accommodate this, Ionic automatically adds padding to certain components. For example, the first `ion-toolbar` component placed in an `ion-modal` will receive padding according to the top edge of the device's safe area. This avoids the device's notch covering up the header text.
193+
これに対応するため、Ionicは特定のコンポーネントに自動的にパディングを追加します。たとえば、`ion-modal`内に配置された最初の`ion-toolbar`コンポーネントは、デバイスのセーフエリアの上端に応じてパディングを受け取ります。これにより、デバイスのノッチがヘッダーテキストを覆うことを防ぎます。
194194

195195
<img src={require('@site/static/img/theming/modal-header-padding.png').default} />
196196

197-
This padding can be manually adjusted through CSS using the `--ion-safe-area-(dir)` variables described in [Application Variables](#application-variables). Values can be set for the whole application, or on a per component basis. For example:
197+
このパディングは、[アプリケーション変数](#application-variables)で説明されている`--ion-safe-area-(dir)`変数を使用してCSSで手動で調整できます。値はアプリケーション全体、またはコンポーネントごとに設定できます。例：
198198

199199
```css
200200
html {

‎docs/theming/basics.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import ColorAccordion from '@components/page/theming/ColorAccordion';
99
<title>テーマ | Ionic Apps: Color and Theming Basics Definition</title>
1010
<meta
1111
name="description"
12-
content="The definition of theming apps just got simplified. Ionic Framework is built with pre-baked styles and colors which are extremely easy to change and modify."
12+
content="アプリのテーマ設定の定義が簡素化されました。Ionic Frameworkは、変更や修正が非常に簡単な事前に用意されたスタイルと色で構築されています。"
1313
/>
1414
</head>
1515

@@ -23,7 +23,7 @@ Ionic には 9 つのデフォルトカラーがあり、多くのコンポー
2323

2424
<ColorAccordion />
2525

26-
## Platform Standards
26+
## プラットフォーム標準
2727

2828
Ionic コンポーネントは、アプリが動作しているプラットフォームに応じて、見た目や動作を調整します。私たちはこれを **Adaptive Styling** と呼んでいます。これにより、開発者は複数のプラットフォームで同じコードベースを使用しながら、特定のプラットフォームで「ネイティブ」な外観のアプリを構築することができます。
2929

‎docs/theming/colors.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import NewColorGenerator from '@components/page/theming/NewColorGenerator';
77
import CodeColor from '@components/page/theming/CodeColor';
88

99
<head>
10-
<title>Ionic CSS Color Component: Style or Change Default App Colors</title>
10+
<title>Ionic CSS Colorコンポーネント: デフォルトアプリの色をスタイル設定または変更</title>
1111
<meta
1212
name="description"
13-
content="Ionic has nine default colors that can be used to change the color of many components. Learn how to utilize Ionic CSS color properties to style your apps."
13+
content="Ionicには、多くのコンポーネントの色を変更するために使用できる9つのデフォルトカラーがあります。Ionic CSS colorプロパティを活用してアプリをスタイル設定する方法を学びます。"
1414
/>
1515
</head>
1616

@@ -37,7 +37,7 @@ Ionic には、多くのコンポーネントの配色を変更するために
3737

3838
<LayeredColorsSelect />
3939

40-
## Modifying Colors
40+
## 色の変更
4141

4242
配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、`secondary color` を <code-color mode="md" value="#006600"></code-color> に変更する時、以下の CSS プロパティが必要です。
4343

@@ -107,7 +107,7 @@ div {
107107

108108
CSS 変数の設定方法と使い方についての詳しい情報は [CSS Variables documentation](css-variables.md) をご覧ください。
109109

110-
## New Color Creator
110+
## 新しい色の作成
111111

112112
名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色を Ionic プロジェクトで利用できます。
113113

‎docs/theming/css-shadow-parts.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ title: CSS Shadow Parts
33
---
44

55
<head>
6-
<title>CSS Shadow Parts - Style CSS Properties Inside of A Shadow Tree</title>
6+
<title>CSS Shadow Parts - シャドウツリー内のCSSプロパティをスタイル設定</title>
77
<meta
88
name="description"
9-
content="CSS Shadow Parts allow developers to style CSS properties on elements inside of a shadow tree. Read to learn more about customizing Ionic Shadow DOM components."
9+
content="CSS Shadow Partsにより、開発者はシャドウツリー内の要素のCSSプロパティをスタイル設定できます。Ionic Shadow DOMコンポーネントのカスタマイズについて詳しく学びましょう。"
1010
/>
1111
</head>
1212

@@ -41,7 +41,7 @@ ion-select .select-placeholder {
4141
}
4242
```
4343

44-
So how do we solve this? [CSS Shadow Parts](#shadow-parts-explained)!
44+
では、どうすれば解決できるでしょうか？[CSS Shadow Parts](#shadow-parts-explained)です！
4545

4646
## Shadow Parts の説明
4747

@@ -65,7 +65,7 @@ Shadow Parts は、開発者がシャドウツリーの外側から、シャド
6565

6666
これらの Parts が公開されたことで、要素は [::part](#how-part-works) を使って直接スタイルを設定することができるようになりました。
6767

68-
### How ::part works
68+
### ::partの動作方法
6969

7070
<!-- prettier-ignore -->
7171
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">`::part()`</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。

‎docs/theming/css-variables.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ title: CSS変数
33
---
44

55
<head>
6-
<title>CSS Variables | CSS Custom Properties for Variables & Components</title>
6+
<title>CSS変数 | 変数とコンポーネント用のCSSカスタムプロパティ</title>
77
<meta
88
name="description"
9-
content="Ionic components are built with CSS Variables for easy custom app properties. They allow a value to be stored in one place, then referenced in multiple places."
9+
content="Ionicコンポーネントは、カスタムアプリプロパティを簡単にするためにCSS変数で構築されています。1か所に値を保存し、複数の場所から参照できます。"
1010
/>
1111
</head>
1212

@@ -16,7 +16,7 @@ Ionic のコンポーネントは、アプリケーションを簡単にカス
1616

1717
### グローバル変数
1818

19-
CSS 変数は、アプリケーションの `:root` セレクタでグローバルに設定できます。They can also be applied only for a specific mode. Ionic が提供するグローバル変数の詳細については、[Ionic 変数](#ionic-variables)を参照してください。
19+
CSS 変数は、アプリケーションの `:root` セレクタでグローバルに設定できます。特定のモードにのみ適用することもできます。Ionic が提供するグローバル変数の詳細については、[Ionic 変数](#ionic-variables)を参照してください。
2020

2121
Ionic CLI を使用して Angular、React、または Vue プロジェクトを開始すると Ionic のデフォルト変数を上書きすることができる `src/theme/variables.scss` が作成されます。
2222

0 commit comments

Comments
 (0)