diff --git a/docs/docs/post-css.md b/docs/docs/post-css.md index 8c94af53a..49f9ea50e 100644 --- a/docs/docs/post-css.md +++ b/docs/docs/post-css.md @@ -2,27 +2,27 @@ title: PostCSS --- -PostCSS transforms extended syntaxes and features into modern, browser-friendly CSS. This guide will show you how to get started with Gatsby and PostCSS. +PostCSS は拡張した構文と機能を、モダンで、ブラウザフレンドリーな CSS に変換します。このガイドでは、Gatsby と PostCSS をはじめる方法を紹介します。 -## Installing and configuring PostCSS +## PostCSS のインストールと設定 -This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [quick start guide](/docs/quick-start/), then come back. +このガイドは Gatsby プロジェクトがセットアップされていることを前提としています。プロジェクトをセットアップする必要がある場合、[クイックスタートガイド](/docs/quick-start/)を参照してください。 -1. Install the Gatsby plugin [gatsby-plugin-postcss](/packages/gatsby-plugin-postcss/). +1. Gatsby プラグイン [gatsby-plugin-postcss](/packages/gatsby-plugin-postcss/) をインストールします。 ```shell npm install --save gatsby-plugin-postcss ``` -2. Include the plugin in your `gatsby-config.js` file. +2. `gatsby-config.js` ファイルにプラグインを追加します。 ```javascript:title=gatsby-config.js plugins: [`gatsby-plugin-postcss`], ``` -> **Note**: If you need to pass options to PostCSS use the plugins options; see [postcss-loader](https://github.com/postcss/postcss-loader) for all available options. +> **ヒント**: PostCSS にオプションを渡したい場合は、プラグインオプションの中で設定します。設定可能な全てのオプションは [postcss-loader](https://github.com/postcss/postcss-loader) にて確認できます。 -3. Write your stylesheets using PostCSS (`.css` files) and require or import them as normal. +3. PostCSS(`.css` ファイル)にスタイルシートを記述し、通常通り require あるいは import してください。 ```css:title=styles.css @custom-media --med (width <= 50rem); @@ -40,13 +40,13 @@ plugins: [`gatsby-plugin-postcss`], import "./styles.css" ``` -### With CSS modules +### CSS modules と併用する -Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `App.css -> App.module.css`. Any file with the module extension will use CSS modules. +CSS モジュールを使用するための追加設定は不要です。拡張子に `.module` を追加するだけです。例:`App.css -> App.module.css` 。module 拡張子を持つファイルは CSS モジュールとして処理されます。 -### PostCSS plugins +### PostCSS プラグイン -If you would prefer to add additional postprocessing to your PostCSS output you can specify plugins in the plugin options: +PostCSS 出力に追加の後処理を行うプラグインを追加したい場合、プラグインオプションの中で設定可能です: ```javascript:title=gatsby-config.js plugins: [ @@ -59,7 +59,7 @@ plugins: [ ], ``` -Alternatively, you can use `postcss.config.js` to specify your particular PostCSS configuration: +あるいは、`postcss.config.js` で追加したい PostCSS プラグインを設定可能です: ```javascript:title=postcss.config.js const postcssPresetEnv = require(`postcss-preset-env`) @@ -73,6 +73,6 @@ module.exports = () => ({ }) ``` -## Other resources +## その他の資料 - [Introduction to postcss](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)