From 2a4ebadec17313c772c8ddeceaaf4dc0d36de0f8 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sun, 10 Feb 2019 01:39:10 +0900 Subject: [PATCH 1/3] docs:translate faq-styling.md --- content/docs/faq-styling.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index ddc955e3d..0564c5c92 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -1,14 +1,14 @@ --- id: faq-styling -title: Styling and CSS +title: CSSとスタイルの使用 permalink: docs/faq-styling.html layout: docs category: FAQ --- -### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components} +### CSS のクラスをコンポーネントに適用するにはどうすれば？ {#how-do-i-add-css-classes-to-components} -Pass a string as the `className` prop: +このようにクラス名を string として `className` prop に与えてください。 ```jsx render() { @@ -16,7 +16,7 @@ render() { } ``` -It is common for CSS classes to depend on the component props or state: +このようにコンポーネントの props や state の状態を元に CSS クラスを割り当てる方法もよく使用されています。 ```jsx render() { @@ -28,24 +28,24 @@ render() { } ``` ->Tip +>ヒント > ->If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it. +>もしあなたが上記のようなコードを書くことが多い場合、[classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) というnpm パッケージを使うことで簡略化できます。 -### Can I use inline styles? {#can-i-use-inline-styles} +### インラインスタイルは使えますか？ {#can-i-use-inline-styles} -Yes, see the docs on styling [here](/docs/dom-elements.html#style). +はい、スタイルの書き方については[この資料](/docs/dom-elements.html#style)をご覧ください。 -### Are inline styles bad? {#are-inline-styles-bad} +### インラインスタイルは悪なの？ {#are-inline-styles-bad} -CSS classes are generally better for performance than inline styles. +パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりもパフォーマンスは優れています。 -### What is CSS-in-JS? {#what-is-css-in-js} +### CSS-in-JS とは? {#what-is-css-in-js} -"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries [here](https://github.com/MicheleBertoli/css-in-js). +"CSS-in-JS" とは外部ファイルでスタイルを定義するのとは違い、 JS を用いて CSS を生成するパターンのことを指します。数々の CSS-in-JS ライブラリの比較については[この資料](https://github.com/MicheleBertoli/css-in-js)をご覧ください。 -_Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname). +_注意：この機能は React の一部ではありません。サードパーティに提供されたライブラリ郡です。_ React はスタイルがどのように定義されているかには関心を持ちません。疑うのであれば、まずはいままでどおり別の `*.css` にスタイルを定義して、[`className`](/docs/dom-elements.html#classname) を使って参照するところからはじめると良いでしょう。 -### Can I do animations in React? {#can-i-do-animations-in-react} +### React で animation は使えますか？ {#can-i-do-animations-in-react} -React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example. +React を使って animations を動かすことは可能です。例として、[React Transition Group](https://reactcommunity.org/react-transition-group/) や [React Motion](https://github.com/chenglou/react-motion) をご覧ください。 From 8d55664ebacca703684fecd19e0496e962880413 Mon Sep 17 00:00:00 2001 From: jesse Date: Tue, 12 Feb 2019 11:52:31 +0900 Subject: [PATCH 2/3] doc: apply fix to reviewed section --- content/docs/faq-styling.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 0564c5c92..95398b32d 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -1,6 +1,6 @@ --- id: faq-styling -title: CSSとスタイルの使用 +title: CSS とスタイルの使用 permalink: docs/faq-styling.html layout: docs category: FAQ @@ -8,7 +8,7 @@ category: FAQ ### CSS のクラスをコンポーネントに適用するにはどうすれば？ {#how-do-i-add-css-classes-to-components} -このようにクラス名を string として `className` prop に与えてください。 +このようにクラス名を文字列として `className` プロパティに与えてください。 ```jsx render() { @@ -30,7 +30,7 @@ render() { >ヒント > ->もしあなたが上記のようなコードを書くことが多い場合、[classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) というnpm パッケージを使うことで簡略化できます。 +>もしあなたが上記のようなコードを書くことが多い場合、[classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) という npm パッケージを使うことで簡略化できます。 ### インラインスタイルは使えますか？ {#can-i-use-inline-styles} @@ -38,14 +38,14 @@ render() { ### インラインスタイルは悪なの？ {#are-inline-styles-bad} -パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりもパフォーマンスは優れています。 +パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりも優れています。 ### CSS-in-JS とは? {#what-is-css-in-js} -"CSS-in-JS" とは外部ファイルでスタイルを定義するのとは違い、 JS を用いて CSS を生成するパターンのことを指します。数々の CSS-in-JS ライブラリの比較については[この資料](https://github.com/MicheleBertoli/css-in-js)をご覧ください。 +"CSS-in-JS" とは外部ファイルでスタイルを定義するのとは違い、 JavaScript を用いて CSS を生成するパターンのことを指します。数々の CSS-in-JS ライブラリの比較については[この資料](https://github.com/MicheleBertoli/css-in-js)をご覧ください。 -_注意：この機能は React の一部ではありません。サードパーティに提供されたライブラリ郡です。_ React はスタイルがどのように定義されているかには関心を持ちません。疑うのであれば、まずはいままでどおり別の `*.css` にスタイルを定義して、[`className`](/docs/dom-elements.html#classname) を使って参照するところからはじめると良いでしょう。 +_注意：この機能は React の一部ではありません。サードパーティのライブラリ群により提供される機能です。_React はスタイルがどのように定義されているかには関心を持ちません。判断に困った場合は、まずは別の `*.css` にスタイルを定義して、[`className`](/docs/dom-elements.html#classname) を使って参照するところからはじめると良いでしょう。 -### React で animation は使えますか？ {#can-i-do-animations-in-react} +### React でアニメーションは使えますか？ {#can-i-do-animations-in-react} -React を使って animations を動かすことは可能です。例として、[React Transition Group](https://reactcommunity.org/react-transition-group/) や [React Motion](https://github.com/chenglou/react-motion) をご覧ください。 +React を使ってアニメーションを動かすことは可能です。例として、[React Transition Group](https://reactcommunity.org/react-transition-group/) や [React Motion](https://github.com/chenglou/react-motion) をご覧ください。 From f0cb8a394f8d4a008e5f6f73a130ee1757caf361 Mon Sep 17 00:00:00 2001 From: jesse Date: Wed, 13 Feb 2019 11:17:52 +0900 Subject: [PATCH 3/3] doc: apply textlint --- content/docs/faq-styling.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 95398b32d..0fc0d1f92 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -42,9 +42,9 @@ render() { ### CSS-in-JS とは? {#what-is-css-in-js} -"CSS-in-JS" とは外部ファイルでスタイルを定義するのとは違い、 JavaScript を用いて CSS を生成するパターンのことを指します。数々の CSS-in-JS ライブラリの比較については[この資料](https://github.com/MicheleBertoli/css-in-js)をご覧ください。 +"CSS-in-JS" とは外部ファイルでスタイルを定義するのとは違い、JavaScript を用いて CSS を生成するパターンのことを指します。数々の CSS-in-JS ライブラリの比較については[この資料](https://github.com/MicheleBertoli/css-in-js)をご覧ください。 -_注意：この機能は React の一部ではありません。サードパーティのライブラリ群により提供される機能です。_React はスタイルがどのように定義されているかには関心を持ちません。判断に困った場合は、まずは別の `*.css` にスタイルを定義して、[`className`](/docs/dom-elements.html#classname) を使って参照するところからはじめると良いでしょう。 +_注意：この機能は React の一部ではありません。サードパーティのライブラリ群により提供される機能です。_React はスタイルがどのように定義されているかには関心を持ちません。判断に困った場合は、まずは別の `*.css` にスタイルを定義して、[`className`](/docs/dom-elements.html#classname) を使って参照するところからはじめると良いでしょう。 ### React でアニメーションは使えますか？ {#can-i-do-animations-in-react}