diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index d84b15c76..40bc0000c 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -1,45 +1,45 @@ --- -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 ウェブサイトのスタイリングオプションの詳細をみていき、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 の「hello world」スターターに基づいた新しい Gatsby が作成されました。 ```text ├── package.json @@ -48,9 +48,9 @@ You now have a new Gatsby site (based on the Gatsby "hello world" starter) with │   └── 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 のデベロッパーツールは F12 を押して開きます）、次のように表示されます。 -![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 プラグインとレイアウトコンポーネントについて学びます。