From 77ea47ff46101c50a703ab3ad652900197883e1c Mon Sep 17 00:00:00 2001 From: Hirotaka Mizutani Date: Thu, 16 Jan 2020 00:01:52 +0900 Subject: [PATCH 1/8] docs: translate tutorial/part-two/index --- docs/tutorial/part-two/index.md | 145 ++++++++++++++++---------------- 1 file changed, 72 insertions(+), 73 deletions(-) diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index d84b15c76..c21fd7431 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -1,56 +1,56 @@ --- -title: Introduction to Styling in Gatsby +title: Gatsby のスタイリング入門 typora-copy-images-to: ./ disableTableOfContents: true --- - + -Welcome to part two of the Gatsby tutorial! +Gatsby チュートリアルのパート 2 へようこそ！ -## What's in this tutorial? +## このチュートリアルの内容は？ -In this part, you're going to explore options for styling Gatsby websites and dive deeper into using React components for building sites. +このパートでは、Gatsby Web サイトのスタイリングのオプションを詳しくみていき、React コンポーネントを使用してサイトを構築する方法について詳しく説明していきます。 -## Using global styles +## グローバルスタイルの使用 -Every site has some sort of global style. This includes things like the site's typography and background colors. These styles set the overall feel of the site — much like the color and texture of a wall sets the overall feel of a room. +すべてのサイトには、ある種のグローバルなスタイルがあります。これには、サイトのタイポグラフィや背景色などを含みます。これらのスタイルは、サイト全体の雰囲気を設定します。壁の色や質感が部屋の全体的な雰囲気を設定するのに似ています。 -### Creating global styles with standard CSS files +### 標準的な CSS ファイルを使用してグローバルスタイルを作成する -One of the most straightforward ways to add global styles to a site is using a global `.css` stylesheet. +グローバルなスタイルをサイトに追加するもっとも簡単な方法の 1 つは、グローバルな `.css`スタイルシートを使用することです。 -#### ✋ Create a new Gatsby site +#### ✋ 新しい Gatsby サイトの作成 -Start by creating a new Gatsby site. It may be best (especially if you're new to the command line) to close the terminal windows you used for [part one](/tutorial/part-one/) and start a new terminal session for part two. +新しい Gatsby サイトを作成することから始めます。[パート 1](/tutorial/part-one/)で使用したターミナルウィンドウを閉じて、パート 2 の新しいターミナルセッションを開始するのがよいでしょう（特にコマンドラインを初めて使う方の場合）。 -Open a new terminal window, create a new "hello world" gatsby site, and start the development server: +新しいターミナルウィンドウを開き、新しい"hello world"という gatsby サイトを作成して、開発サーバーを起動します。 ```shell gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world cd tutorial-part-two ``` -You now have a new Gatsby site (based on the Gatsby "hello world" starter) with the following structure: +次の構成の新しい Gatsby サイト（Gatsby の"hello world"スターターに基づいた）が作成されました。 ```text ├── package.json ├── src -│   └── pages -│   └── index.js +│└── pages +│└── index.js ``` -#### ✋ Add styles to a css file +#### ✋ CSS ファイルにスタイルを追加する -1. Create a `.css` file in your new project: +1. 新しいプロジェクトに`.css`ファイルを作成します。 ```shell cd src @@ -59,9 +59,9 @@ cd styles touch global.css ``` -> Note: Feel free to create these directories and files using your code editor, if you'd prefer. +> ヒント: 必要に応じて、コードエディターを使用してこれらのディレクトリーとファイルを作成してください。 -You should now have a structure like this: +これで、次のような構造になります。 ```text ├── package.json @@ -72,7 +72,7 @@ You should now have a structure like this: │   └── global.css ``` -2. Define some styles in the `global.css` file: +2. `global.css`ファイルにいくつかのスタイルを定義します。 ```css:title=src/styles/global.css html { @@ -80,18 +80,18 @@ html { } ``` -> Note: The placement of the example css file in a `/src/styles/` folder is arbitrary. +> ヒント: 例の css ファイルを `/src/styles/` フォルダーに配置するのは任意です。 -#### ✋ Include the stylesheet in `gatsby-browser.js` +#### ✋️ `gatsby-browser.js`にスタイルシートをインクルード -1. Create the `gatsby-browser.js` +1. `gatsby-browser.js`を作成 ```shell cd ../.. touch gatsby-browser.js ``` -Your project's file structure should now look like this: +プロジェクトのファイル構造は次のようになります。 ```text ├── package.json @@ -103,9 +103,9 @@ Your project's file structure should now look like this: ├── gatsby-browser.js ``` -> 💡 What is `gatsby-browser.js`? Don't worry about this too much and for now, just know that `gatsby-browser.js` is one of a handful of special files that Gatsby looks for and uses (if they exist). Here, the naming of the file **is** important. If you do want to explore more now, check out [the docs](/docs/browser-apis/). +> 💡 `gatsby-browser.js`とは何でしょうか？まだこのファイルについてあまり気にする必要はありません。今のところ、`gatsby-browser.js`は（存在する場合）Gatsby が探して使用するいくつかの特別なファイルの 1 つであるということだけ留意しておいてください。ここでは、ファイルの命名が**重要**です。もっと詳しく知りたい場合は、[ドキュメント](/docs/browser-apis/)をご覧ください。 -2. Import your recently-created stylesheet in the `gatsby-browser.js` file: +2. 先ほど作成したスタイルシートを`gatsby-browser.js`ファイルにインポートします。 ```javascript:title=gatsby-browser.js import "./src/styles/global.css" @@ -114,43 +114,43 @@ import "./src/styles/global.css" // require('./src/styles/global.css') ``` -> Note: Both CommonJS (`require`) and ES Module (`import`) syntax work here. If you’re not sure which to choose, `import` is usually a good default. When working with files that are only run in a Node.js environment however (like `gatsby-node.js`), `require` will need to be used. +> ヒント: CommonJS（`require`）と ES モジュール（`import`）の両方の構文がここで機能します。どちらを選択するかわからない場合は、通常、 `import`がデフォルトとして適切です。ただし、Node.js 環境でのみ実行するファイル（`gatsby-node.js`など）を使用する場合は、`require`を使用する必要があります。 -3. Start the development server: +3. 開発サーバーを起動します。 ```shell gatsby develop ``` -If you take a look at your project in the browser, you should see a lavender background applied to the "hello world" starter: +ブラウザーでプロジェクトを表示すると、ラベンダーの背景が適用された"hello world"スターターを確認できます。 ![Lavender Hello World!](global-css.png) -> Tip: This part of the tutorial has focused on the quickest and most straightforward way to get started styling a Gatsby site — importing standard CSS files directly, using `gatsby-browser.js`. In most cases, the best way to add global styles is with a shared layout component. [Check out the docs](/docs/global-css/) for more on that approach. +> Tip: チュートリアルのこのパートでは、Gatsby サイトのスタイリングを開始するためにもっとも早く、もっとも簡単な方法に焦点を当てています。つまり、 `gatsby-browser.js`を使用して標準 CSS ファイルを直接インポートします。ほとんどの場合、グローバルスタイルを追加する最良の方法は、共有レイアウトコンポーネントを使用します。そのアプローチの詳細について[ドキュメントをご覧ください](/docs/global-css/)。 -## Using component-scoped CSS +## コンポーネントスコープの CSS の使用 -So far, we've talked about the more traditional approach of using standard css stylesheets. Now, we'll talk about various methods of modularizing CSS to tackle styling in a component-oriented way. +これまで、標準的な CSS スタイルシートを使用して、より伝統的なアプローチについて説明してきました。次に、CSS をモジュール化してコンポーネント指向の方法でスタイリングに取り組むさまざまな方法について説明します。 ### CSS Modules -Let's explore **CSS Modules**. Quoting from -[the CSS Module homepage](https://github.com/css-modules/css-modules): +**CSS Modules**を詳細にみてみましょう。以下から引用します。 +[CSS Modules のホームページ](https://github.com/css-modules/): -> A **CSS Module** is a CSS file in which all class names and animation names -> are scoped locally by default. +> **CSS Module モジュール**は、すべてのクラス名とアニメーション名を含む CSS ファイルで、 +> デフォルトでスコープをローカルにします。 -CSS Modules are very popular because they let you write CSS normally but with a lot more safety. The tool automatically generates unique class and animation names, so you don't have to worry about selector name collisions. +CSS Modules は非常に人気があります。CSS Modules を使用すると、CSS を通常どおり作成でき、はるかに安全性が高いからです。このツールは、一意のクラス名とアニメーション名を自動的に生成するため、セレクター名の衝突を心配する必要がありません。 -Gatsby works out of the box with CSS Modules. This approach is highly recommended for those new to building with Gatsby (and React in general). +Gatsby は、CSS Modules をすぐに使用できます。このアプローチは、はじめて Gatsby（および React 全般）を使用して構築する方に強くお勧めします。 -#### ✋ Build a new page using CSS Modules +#### ✋ CSS Modules を使用して新しいページを作成 -In this section, you'll create a new page component and style that page component using a CSS Module. +このセクションでは、CSS Modules を使用して、新しいページコンポーネントを作成し、そのページコンポーネントのスタイルを設定します。 -First, create a new `Container` component. +最初に、新しい`Container`コンポーネントを作成します。 -1. Create a new directory at `src/components` and then, in this new directory, create a file named `container.js` and paste the following: +1. `src/components`に新しいディレクトリーを作成し、この新しいディレクトリーに`container.js`という名前のファイルを作成して、次を貼り付けます。 ```jsx:title=src/components/container.js import React from "react" @@ -161,9 +161,9 @@ export default ({ children }) => ( ) ``` -You'll notice you imported a css module file named `container.module.css`. Let's create that file now. +`container.module.css`という名前の css module ファイルをインポートしていることに気づいたことでしょう。そのファイルを作成しましょう。 -2. In the same directory (`src/components`), create a `container.module.css` file and copy/paste the following: +2. 同じディレクトリ（`src/components`）で、`container.module.css`ファイルを作成し、以下をコピーして貼り付けします。 ```css:title=src/components/container.module.css .container { @@ -172,9 +172,9 @@ You'll notice you imported a css module file named `container.module.css`. Let's } ``` -You'll notice that the file name ends with `.module.css` instead of the usual `.css`. This is how you tell Gatsby that this CSS file should be processed as a CSS module rather than plain CSS. +ファイル名が通常の`.css`ではなく`.module.css`で終わっていることに気付いたことでしょう。これは、この CSS ファイルをプレーンな CSS ではなく CSS module として処理する必要があることを Gatsby に伝えます。 -3. Create a new page component by creating a file at +3. 次のファイルに新しいページコンポーネント作成します。 `src/pages/about-css-modules.js`: ```jsx:title=src/pages/about-css-modules.js @@ -190,17 +190,17 @@ export default () => ( ) ``` -Now, if you visit `http://localhost:8000/about-css-modules/`, your page should look something like this: +これで、`http://localhost:8000/about-css-modules/`にアクセスすると、ページは次のようになります。 -![Page with CSS module styles](css-modules-basic.png) +![CSS module スタイルのページ](css-modules-basic.png) -#### ✋ Style a component using CSS Modules +#### ✋ CSS Modules を使用してコンポーネントのスタイルを設定 -In this section, you'll create a list of people with names, avatars, and short Latin biographies. You'll create a `` component and style that component using a CSS module. +このセクションでは、名前、アバターと短いラテン語の経歴（Lorem Ipsum - ダミーテキスト）を含む人々のリストを作成します。``コンポーネントと CSS モジュールを使用したスタイルを作成します。 -1. Create the file for the CSS at `src/pages/about-css-modules.module.css`. +1. `src/pages/about-css-modules.module.css`という CSS のファイルを作成します。 -2. Paste the following into the new file: +2. 新しいファイルに次を貼り付けます。 ```css:title=src/pages/about-css-modules.module.css .user { @@ -236,7 +236,7 @@ In this section, you'll create a list of people with names, avatars, and short L } ``` -3. Import the new `src/pages/about-css-modules.module.css` file into the `about-css-modules.js` page you created earlier by editing the first few lines of the file like so: +3. ファイルの最初の数行を次のように編集して、以前作成した`about-css-modules.js`ページに新しく`src/pages/about-css-modules.module.css`ファイルをインポートします。 ```javascript:title=src/pages/about-css-modules.js import React from "react" @@ -248,14 +248,13 @@ import Container from "../components/container" console.log(styles) ``` -The `console.log(styles)` code will log the resulting import so you can see the result of your processed `./about-css-modules.module.css` file. If you open the developer console (using e.g. Firefox or Chrome's developer tools, often by the F12 key) in your browser, you'll see: +`console.log(styles)`コードはインポートした結果をログ出力するので、`./about-css-modules.module.css`ファイルの処理結果を見ることができます。ブラウザーで開発者コンソール（Firefox や Chrome のデベロッパーツールを使用）を開くと、次のように表示されます。 -![Import result of CSS module in console](css-modules-console.png) +![コンソールでの CSS Module のインポート結果](css-modules-console.png) -If you compare that to your CSS file, you'll see that each class is now a key in the imported object pointing to a long string e.g. `avatar` points to `src-pages----about-css-modules-module---avatar---2lRF7`. These are the class names CSS Modules generates. They're guaranteed to be unique across your site. And because you have to import them to use the classes, there's never any question about where some CSS is being used. +これを CSS ファイルと比較すると、それぞれのクラス名がインポートしたオブジェクトの長い文字列になっていることがわかります。例えば、`avatar`は`src-pages----about-css-modules-module---avatar---2lRF7`になっています。これらは、CSS Modules が生成するクラス名です。サイト全体で一意になることを保証しています。また、クラスを使用するのに、それらをインポートする必要があるため、CSS がどこで使用されているかが明白になります。 -4. Create a new `` component inline in the `about-css-modules.js` page - component. Modify `about-css-modules.js` so it looks like the following: +4. `about-css-modules.js`ページコンポーネントにインラインで``コンポーネントを新しく作成します。`about-css-modules.js`を次のように変更します。 ```jsx:title=src/pages/about-css-modules.js import React from "react" @@ -296,27 +295,27 @@ export default () => ( ) ``` -> Tip: Generally, if you use a component in multiple places on a site, it should be in its own module file in the `components` directory. But, if it's used only in one file, create it inline. +> Tip: 一般に、サイト内の複数箇所でコンポーネントを使用する場合、 `components`ディレクトリに独自のモジュールファイルを配置する必要があります。ただし、1 つのファイルでのみ使用する場合は、インラインで作成します。 -The finished page should now look like: +完成したページは次のようになります。 -![User list page with CSS modules](css-modules-userlist.png) +![CSS Modules を含むユーザーリストページ](css-modules-userlist.png) ### CSS-in-JS -CSS-in-JS is a component-oriented styling approach. Most generally, it is a pattern where [CSS is composed inline using JavaScript](https://reactjs.org/docs/faq-styling.html#what-is-css-in-js). +CSS-in-JS は、コンポーネント指向なスタイリングのためのアプローチです。もっとも一般的なのは、[JavaScript を使用して CSS をインラインで構成](https://reactjs.org/docs/faq-styling.html#what-is-css-in-js)するパターンです。 -#### Using CSS-in-JS with Gatsby +#### Gatsby で CSS-in-JS を使用する -There are many different CSS-in-JS libraries and many of them have Gatsby plugins already. We won't cover an example of CSS-in-JS in this initial tutorial, but we encourage you to [explore](/docs/styling/) what the ecosystem has to offer. There are mini-tutorials for two libraries, in particular, [Emotion](/docs/emotion/) and [Styled Components](/docs/styled-components/). +多くの様々な CSS-in-JS ライブラリーがあり、それらの多くにはすでに Gatsby プラグインがあります。この最初のチュートリアルでは CSS-in-JS の例を取り上げませんが、コミュニティーが提供しているドキュメントの[詳細をみる](/docs/styling/)ことをお勧めします。その中に、[Emotion](/docs/emotion/)と[Styled Components](/docs/styled-components/)の 2 つのライブラリのミニチュートリアルがあります。 -#### Suggested reading on CSS-in-JS +#### CSS-in-JS に関するお勧めの読み物 -If you're interested in further reading, check out [Christopher "vjeux" Chedeau's 2014 presentation that sparked this movement](https://speakerdeck.com/vjeux/react-css-in-js) as well as [Mark Dalgleish's more recent post "A Unified Styling Language"](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660). +さらに詳しものを読んでみたい場合は、[このムーブメントを引き起こした Christopher "vjeux" Chedeau の 2014 年のプレゼンテーション](https://speakerdeck.com/vjeux/react-css-in-js)と[Mark Dalgleish の最近の投稿"A Unified Styling Language"](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)を参考にしてください。 -### Other CSS options +### その他の CSS の選択肢 -Gatsby supports almost every possible styling option (if there isn't a plugin yet for your favorite CSS option, [please contribute one!](/contributing/how-to-contribute/)) +Gatsby は、CSS スタイリングのための選択肢をほぼすべてサポートしています（もしお気に入りの CSS スタイリングのプラグインがまだない場合は、[貢献してください！](/contributing/how-to-contribute/)) - [Typography.js](/packages/gatsby-plugin-typography/) - [Sass](/packages/gatsby-plugin-sass/) @@ -324,8 +323,8 @@ Gatsby supports almost every possible styling option (if there isn't a plugin ye - [Stylus](/packages/gatsby-plugin-stylus/) - [PostCSS](/packages/gatsby-plugin-postcss/) -and more! +さらにもっとあります！ -## What's coming next? +## 次は何ですか？ -Now continue on to [part three of the tutorial](/tutorial/part-three/), where you'll learn about Gatsby plugins and layout components. +[チュートリアルのパート 3](/tutorial/part-three/)に進み、Gatsby プラグインとレイアウトコンポーネントについて学びます。 From f0f2179c6ec968d1d74474156118ba2b795eb35a Mon Sep 17 00:00:00 2001 From: Hirotaka Mizutani Date: Fri, 17 Jan 2020 12:47:24 +0900 Subject: [PATCH 2/8] Add space between hankaku and zenkaku Co-Authored-By: Jesse Katsumata --- docs/tutorial/part-two/index.md | 52 ++++++++++++++++----------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index c21fd7431..4338bdb0e 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -26,7 +26,7 @@ Gatsby チュートリアルのパート 2 へようこそ！ ### 標準的な CSS ファイルを使用してグローバルスタイルを作成する -グローバルなスタイルをサイトに追加するもっとも簡単な方法の 1 つは、グローバルな `.css`スタイルシートを使用することです。 +グローバルなスタイルをサイトに追加するもっとも簡単な方法の 1 つは、グローバルな `.css` スタイルシートを使用することです。 #### ✋ 新しい Gatsby サイトの作成 @@ -39,7 +39,7 @@ gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-wo cd tutorial-part-two ``` -次の構成の新しい Gatsby サイト（Gatsby の"hello world"スターターに基づいた）が作成されました。 +次の構成の新しい Gatsby サイト（Gatsby の "hello world" スターターに基づいた）が作成されました。 ```text ├── package.json @@ -50,7 +50,7 @@ cd tutorial-part-two #### ✋ CSS ファイルにスタイルを追加する -1. 新しいプロジェクトに`.css`ファイルを作成します。 +1. 新しいプロジェクトに `.css` ファイルを作成します。 ```shell cd src @@ -72,7 +72,7 @@ touch global.css │   └── global.css ``` -2. `global.css`ファイルにいくつかのスタイルを定義します。 +2. `global.css` ファイルにいくつかのスタイルを定義します。 ```css:title=src/styles/global.css html { @@ -82,9 +82,9 @@ html { > ヒント: 例の css ファイルを `/src/styles/` フォルダーに配置するのは任意です。 -#### ✋️ `gatsby-browser.js`にスタイルシートをインクルード +#### ✋️ `gatsby-browser.js` にスタイルシートをインクルード -1. `gatsby-browser.js`を作成 +1. `gatsby-browser.js` を作成 ```shell cd ../.. @@ -103,9 +103,9 @@ touch gatsby-browser.js ├── gatsby-browser.js ``` -> 💡 `gatsby-browser.js`とは何でしょうか？まだこのファイルについてあまり気にする必要はありません。今のところ、`gatsby-browser.js`は（存在する場合）Gatsby が探して使用するいくつかの特別なファイルの 1 つであるということだけ留意しておいてください。ここでは、ファイルの命名が**重要**です。もっと詳しく知りたい場合は、[ドキュメント](/docs/browser-apis/)をご覧ください。 +> 💡 `gatsby-browser.js` とは何でしょうか？まだこのファイルについてあまり気にする必要はありません。今のところ、`gatsby-browser.js` は（存在する場合）Gatsby が探して使用するいくつかの特別なファイルの 1 つであるということだけ留意しておいてください。ここでは、ファイルの命名が**重要**です。もっと詳しく知りたい場合は、[ドキュメント](/docs/browser-apis/)をご覧ください。 -2. 先ほど作成したスタイルシートを`gatsby-browser.js`ファイルにインポートします。 +2. 先ほど作成したスタイルシートを `gatsby-browser.js` ファイルにインポートします。 ```javascript:title=gatsby-browser.js import "./src/styles/global.css" @@ -114,7 +114,7 @@ import "./src/styles/global.css" // require('./src/styles/global.css') ``` -> ヒント: CommonJS（`require`）と ES モジュール（`import`）の両方の構文がここで機能します。どちらを選択するかわからない場合は、通常、 `import`がデフォルトとして適切です。ただし、Node.js 環境でのみ実行するファイル（`gatsby-node.js`など）を使用する場合は、`require`を使用する必要があります。 +> ヒント: CommonJS（`require`）と ES モジュール（`import`）の両方の構文がここで機能します。どちらを選択するかわからない場合は、通常、 `import` がデフォルトとして適切です。ただし、Node.js 環境でのみ実行するファイル（`gatsby-node.js` など）を使用する場合は、`require` を使用する必要があります。 3. 開発サーバーを起動します。 @@ -122,11 +122,11 @@ import "./src/styles/global.css" gatsby develop ``` -ブラウザーでプロジェクトを表示すると、ラベンダーの背景が適用された"hello world"スターターを確認できます。 +ブラウザーでプロジェクトを表示すると、ラベンダーの背景が適用された "hello world" スターターを確認できます。 ![Lavender Hello World!](global-css.png) -> Tip: チュートリアルのこのパートでは、Gatsby サイトのスタイリングを開始するためにもっとも早く、もっとも簡単な方法に焦点を当てています。つまり、 `gatsby-browser.js`を使用して標準 CSS ファイルを直接インポートします。ほとんどの場合、グローバルスタイルを追加する最良の方法は、共有レイアウトコンポーネントを使用します。そのアプローチの詳細について[ドキュメントをご覧ください](/docs/global-css/)。 +> Tip: チュートリアルのこのパートでは、Gatsby サイトのスタイリングを開始するためにもっとも早く、もっとも簡単な方法に焦点を当てています。つまり、 `gatsby-browser.js` を使用して標準 CSS ファイルを直接インポートします。ほとんどの場合、グローバルスタイルを追加する最良の方法は、共有レイアウトコンポーネントを使用します。そのアプローチの詳細について[ドキュメントをご覧ください](/docs/global-css/)。 ## コンポーネントスコープの CSS の使用 @@ -134,10 +134,10 @@ gatsby develop ### CSS Modules -**CSS Modules**を詳細にみてみましょう。以下から引用します。 +**CSS Modules** を詳細にみてみましょう。以下から引用します。 [CSS Modules のホームページ](https://github.com/css-modules/): -> **CSS Module モジュール**は、すべてのクラス名とアニメーション名を含む CSS ファイルで、 +> **CSS Module** は、すべてのクラス名とアニメーション名を含む CSS ファイルで、 > デフォルトでスコープをローカルにします。 CSS Modules は非常に人気があります。CSS Modules を使用すると、CSS を通常どおり作成でき、はるかに安全性が高いからです。このツールは、一意のクラス名とアニメーション名を自動的に生成するため、セレクター名の衝突を心配する必要がありません。 @@ -148,9 +148,9 @@ Gatsby は、CSS Modules をすぐに使用できます。このアプローチ このセクションでは、CSS Modules を使用して、新しいページコンポーネントを作成し、そのページコンポーネントのスタイルを設定します。 -最初に、新しい`Container`コンポーネントを作成します。 +最初に、新しい `Container` コンポーネントを作成します。 -1. `src/components`に新しいディレクトリーを作成し、この新しいディレクトリーに`container.js`という名前のファイルを作成して、次を貼り付けます。 +1. `src/components` に新しいディレクトリーを作成し、この新しいディレクトリーに `container.js` という名前のファイルを作成して、次を貼り付けます。 ```jsx:title=src/components/container.js import React from "react" @@ -161,9 +161,9 @@ export default ({ children }) => ( ) ``` -`container.module.css`という名前の css module ファイルをインポートしていることに気づいたことでしょう。そのファイルを作成しましょう。 +`container.module.css` という名前の css module ファイルをインポートしていることに気づいたことでしょう。そのファイルを作成しましょう。 -2. 同じディレクトリ（`src/components`）で、`container.module.css`ファイルを作成し、以下をコピーして貼り付けします。 +2. 同じディレクトリ（`src/components`）で、`container.module.css` ファイルを作成し、以下をコピーして貼り付けします。 ```css:title=src/components/container.module.css .container { @@ -172,7 +172,7 @@ export default ({ children }) => ( } ``` -ファイル名が通常の`.css`ではなく`.module.css`で終わっていることに気付いたことでしょう。これは、この CSS ファイルをプレーンな CSS ではなく CSS module として処理する必要があることを Gatsby に伝えます。 +ファイル名が通常の `.css` ではなく `.module.css` で終わっていることに気付いたことでしょう。これは、この CSS ファイルをプレーンな CSS ではなく CSS module として処理する必要があることを Gatsby に伝えます。 3. 次のファイルに新しいページコンポーネント作成します。 `src/pages/about-css-modules.js`: @@ -190,15 +190,15 @@ export default () => ( ) ``` -これで、`http://localhost:8000/about-css-modules/`にアクセスすると、ページは次のようになります。 +これで、`http://localhost:8000/about-css-modules/` にアクセスすると、ページは次のようになります。 ![CSS module スタイルのページ](css-modules-basic.png) #### ✋ CSS Modules を使用してコンポーネントのスタイルを設定 -このセクションでは、名前、アバターと短いラテン語の経歴（Lorem Ipsum - ダミーテキスト）を含む人々のリストを作成します。``コンポーネントと CSS モジュールを使用したスタイルを作成します。 +このセクションでは、名前、アバターと短いラテン語の経歴（Lorem Ipsum - ダミーテキスト）を含む人々のリストを作成します。`` コンポーネントと CSS モジュールを使用したスタイルを作成します。 -1. `src/pages/about-css-modules.module.css`という CSS のファイルを作成します。 +1. `src/pages/about-css-modules.module.css` という CSS のファイルを作成します。 2. 新しいファイルに次を貼り付けます。 @@ -236,7 +236,7 @@ export default () => ( } ``` -3. ファイルの最初の数行を次のように編集して、以前作成した`about-css-modules.js`ページに新しく`src/pages/about-css-modules.module.css`ファイルをインポートします。 +3. ファイルの最初の数行を次のように編集して、以前作成した `about-css-modules.js` ページに新しく `src/pages/about-css-modules.module.css` ファイルをインポートします。 ```javascript:title=src/pages/about-css-modules.js import React from "react" @@ -248,13 +248,13 @@ import Container from "../components/container" console.log(styles) ``` -`console.log(styles)`コードはインポートした結果をログ出力するので、`./about-css-modules.module.css`ファイルの処理結果を見ることができます。ブラウザーで開発者コンソール（Firefox や Chrome のデベロッパーツールを使用）を開くと、次のように表示されます。 +`console.log(styles)`コードはインポートした結果をログ出力するので、`./about-css-modules.module.css` ファイルの処理結果を見ることができます。ブラウザーで開発者コンソール（Firefox や Chrome のデベロッパーツールを使用）を開くと、次のように表示されます。 ![コンソールでの CSS Module のインポート結果](css-modules-console.png) -これを CSS ファイルと比較すると、それぞれのクラス名がインポートしたオブジェクトの長い文字列になっていることがわかります。例えば、`avatar`は`src-pages----about-css-modules-module---avatar---2lRF7`になっています。これらは、CSS Modules が生成するクラス名です。サイト全体で一意になることを保証しています。また、クラスを使用するのに、それらをインポートする必要があるため、CSS がどこで使用されているかが明白になります。 +これを CSS ファイルと比較すると、それぞれのクラス名がインポートしたオブジェクトの長い文字列になっていることがわかります。例えば、`avatar` は `src-pages----about-css-modules-module---avatar---2lRF7` になっています。これらは、CSS Modules が生成するクラス名です。サイト全体で一意になることを保証しています。また、クラスを使用するのに、それらをインポートする必要があるため、CSS がどこで使用されているかが明白になります。 -4. `about-css-modules.js`ページコンポーネントにインラインで``コンポーネントを新しく作成します。`about-css-modules.js`を次のように変更します。 +4. `about-css-modules.js` ページコンポーネントにインラインで `` コンポーネントを新しく作成します。`about-css-modules.js` を次のように変更します。 ```jsx:title=src/pages/about-css-modules.js import React from "react" @@ -295,7 +295,7 @@ export default () => ( ) ``` -> Tip: 一般に、サイト内の複数箇所でコンポーネントを使用する場合、 `components`ディレクトリに独自のモジュールファイルを配置する必要があります。ただし、1 つのファイルでのみ使用する場合は、インラインで作成します。 +> Tip: 一般に、サイト内の複数箇所でコンポーネントを使用する場合、 `components` ディレクトリに独自のモジュールファイルを配置する必要があります。ただし、1 つのファイルでのみ使用する場合は、インラインで作成します。 完成したページは次のようになります。 From ee59fd5d231a06e662c3c8a280580738992a05a4 Mon Sep 17 00:00:00 2001 From: Hirotaka Mizutani Date: Fri, 17 Jan 2020 15:43:49 +0900 Subject: [PATCH 3/8] docs: fix quotes --- docs/tutorial/part-two/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index 4338bdb0e..a30d8f3ea 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -32,14 +32,14 @@ Gatsby チュートリアルのパート 2 へようこそ！ 新しい Gatsby サイトを作成することから始めます。[パート 1](/tutorial/part-one/)で使用したターミナルウィンドウを閉じて、パート 2 の新しいターミナルセッションを開始するのがよいでしょう（特にコマンドラインを初めて使う方の場合）。 -新しいターミナルウィンドウを開き、新しい"hello world"という gatsby サイトを作成して、開発サーバーを起動します。 +新しいターミナルウィンドウを開き、新しい「hello world」という gatsby サイトを作成して、開発サーバーを起動します。 ```shell gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world cd tutorial-part-two ``` -次の構成の新しい Gatsby サイト（Gatsby の "hello world" スターターに基づいた）が作成されました。 +次の構成の新しい Gatsby サイト（Gatsby の「hello world」スターターに基づいた）が作成されました。 ```text ├── package.json @@ -122,7 +122,7 @@ import "./src/styles/global.css" gatsby develop ``` -ブラウザーでプロジェクトを表示すると、ラベンダーの背景が適用された "hello world" スターターを確認できます。 +ブラウザーでプロジェクトを表示すると、ラベンダーの背景が適用された「hello world」スターターを確認できます。 ![Lavender Hello World!](global-css.png) @@ -248,7 +248,7 @@ import Container from "../components/container" console.log(styles) ``` -`console.log(styles)`コードはインポートした結果をログ出力するので、`./about-css-modules.module.css` ファイルの処理結果を見ることができます。ブラウザーで開発者コンソール（Firefox や Chrome のデベロッパーツールを使用）を開くと、次のように表示されます。 +`console.log(styles)` コードはインポートした結果をログ出力するので、`./about-css-modules.module.css` ファイルの処理結果を見ることができます。ブラウザーで開発者コンソール（Firefox や Chrome のデベロッパーツールを使用）を開くと、次のように表示されます。 ![コンソールでの CSS Module のインポート結果](css-modules-console.png) @@ -307,11 +307,11 @@ CSS-in-JS は、コンポーネント指向なスタイリングのためのア #### Gatsby で CSS-in-JS を使用する -多くの様々な CSS-in-JS ライブラリーがあり、それらの多くにはすでに Gatsby プラグインがあります。この最初のチュートリアルでは CSS-in-JS の例を取り上げませんが、コミュニティーが提供しているドキュメントの[詳細をみる](/docs/styling/)ことをお勧めします。その中に、[Emotion](/docs/emotion/)と[Styled Components](/docs/styled-components/)の 2 つのライブラリのミニチュートリアルがあります。 +多くの様々な CSS-in-JS ライブラリーがあり、それらの多くにはすでに Gatsby プラグインがあります。この最初のチュートリアルでは CSS-in-JS の例を取り上げませんが、コミュニティーが提供しているドキュメントの[詳細をみる](/docs/styling/)ことをお勧めします。その中に、[Emotion](/docs/emotion/) と [Styled Components](/docs/styled-components/) の 2 つのライブラリのミニチュートリアルがあります。 #### CSS-in-JS に関するお勧めの読み物 -さらに詳しものを読んでみたい場合は、[このムーブメントを引き起こした Christopher "vjeux" Chedeau の 2014 年のプレゼンテーション](https://speakerdeck.com/vjeux/react-css-in-js)と[Mark Dalgleish の最近の投稿"A Unified Styling Language"](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)を参考にしてください。 +さらに詳しものを読んでみたい場合は、[このムーブメントを引き起こした Christopher "vjeux" Chedeau の 2014 年のプレゼンテーション](https://speakerdeck.com/vjeux/react-css-in-js)と [Mark Dalgleish の最近の投稿「A Unified Styling Language」](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)を参考にしてください。 ### その他の CSS の選択肢 From 72329c455c0dacdb20e4e1a33bcadba7732ed530 Mon Sep 17 00:00:00 2001 From: Hirotaka Mizutani Date: Sun, 19 Jan 2020 12:49:08 +0900 Subject: [PATCH 4/8] docs: fix feedbacks --- docs/tutorial/part-two/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index a30d8f3ea..d79ae77f3 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -80,9 +80,9 @@ html { } ``` -> ヒント: 例の css ファイルを `/src/styles/` フォルダーに配置するのは任意です。 +> ヒント: 例で使用している css ファイルを `/src/styles/` フォルダーに配置するのは任意です。 -#### ✋️ `gatsby-browser.js` にスタイルシートをインクルード +#### ✋ `gatsby-browser.js` にスタイルシートを含める 1. `gatsby-browser.js` を作成 From e0dc06ef03065962b9309b96fd064730147c945e Mon Sep 17 00:00:00 2001 From: Hirotaka Mizutani Date: Sun, 19 Jan 2020 13:18:30 +0900 Subject: [PATCH 5/8] docs: fix spaces --- docs/tutorial/part-two/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index d79ae77f3..ec954a911 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -44,8 +44,8 @@ cd tutorial-part-two ```text ├── package.json ├── src -│└── pages -│└── index.js +│   └── pages +│   └── index.js ``` #### ✋ CSS ファイルにスタイルを追加する From 8073a03089c66f1ee05d9bc802556479bb7fd884 Mon Sep 17 00:00:00 2001 From: Hirotaka Mizutani Date: Tue, 21 Jan 2020 11:54:32 +0900 Subject: [PATCH 6/8] docs: Update feedbacks --- docs/tutorial/part-two/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index ec954a911..1b57b8cf0 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -4,7 +4,7 @@ typora-copy-images-to: ./ disableTableOfContents: true --- - +