Translate docs/recipes/styling-css

[tars0x9752]

概要

docs/recipes/styling-css の翻訳です。
レビューお願いいたします 🙇

チェックリスト

• 翻訳スタイルガイド に目を通しました。
• Translation Guide に目を通しました。
• textlint を使って校正を行いました（推奨）
• Allow edits from maintainers にチェックを入れました。

しばらく待ってもレビューが終わらなかったり、必要なレビュー数が足りない状態が続いた場合は、こちらからメンテナーを探して、@を付けてメンションを飛ばしてください。

[uetchy]

Styled Componentsは製品名なので訳さなくて大丈夫です。

[tars0x9752]

該当箇所を修正しました🙇

[uetchy]

💪

[Naturalclar]

他のドキュメントとの文言の統一のため、「ヒント」でお願いします。

Suggested change

	> **補足:** `gatsby-config.js` の中で `require('./src/styles/global.css')` を使ってグローバル CSS ファイルをインポートすることもできます。
	> **ヒント:** `gatsby-config.js` の中で `require('./src/styles/global.css')` を使ってグローバル CSS ファイルをインポートすることもできます。

[Naturalclar]

文言の統一のため、ヒントでお願いします。

Suggested change

	_メモ: .css のかわりに拡張子を .scss または .sass にしなければならないという違いがありますが、前の CSS モジュールのレシピで言及したように Sass/SCSS ファイルをモジュールとして使うこともできます。_
	_ヒント: .css のかわりに拡張子を .scss または .sass にしなければならないという違いがありますが、前の CSS モジュールのレシピで言及したように Sass/SCSS ファイルをモジュールとして使うこともできます。_

[Naturalclar]

[imo] 「向上」だとマイナスであることが伝わりづらいと感じました。「遅延」のほうが伝わりやすいかも。

Suggested change

	独自の [Google Fonts](https://fonts.google.com/) をプロジェクト内でローカルにホスティングするということは、サイトのロード時にネットワークを越えてフォントを取得してくる必要がないということを意味し、あなたのサイトの Speed Index をデスクトップで ~300 ミリ秒まで、3G で 1+ 秒ほど向上させます。また、パフォーマンスのためにカスタムフォントの使用を本当に必要なものだけに絞ることが推奨されます。
	独自の [Google Fonts](https://fonts.google.com/) をプロジェクト内でローカルにホスティングするということは、サイトのロード時にネットワークを越えてフォントを取得してくる必要がないということを意味し、あなたのサイトの Speed Index をデスクトップで ~300 ミリ秒まで、3G で 1+ 秒ほどの遅延が発生します。また、パフォーマンスのためにカスタムフォントの使用を本当に必要なものだけに絞ることが推奨されます。

[tars0x9752]

@Naturalclar
レビューありがとうございます！
ここの翻訳は結構迷いまして、追加のリソースにあるKyle Mathews' blog による実例を参照したのですが、そちらを読むと Google Fonts を普通に読み込むよりも faster なのかなと思ったのと、かつ原文で increasing にあたりそうなところが improve と書いてあったので向上としたのですが、これって遅くなるんですかね？

Self-hosting is significantly faster. Loading a typeface from Google Fonts or other hosted font service adds an extra (blocking) network request. In my testing, I’ve found replacing Google Fonts with a self-hosted font can improve a site’s speedindex by ~300 miliseconds on desktop and 1+ seconds on 3g. This is a big deal. YMMV on exact numbers but directionally, self-hosting is faster and importantly opens the door for further optimizations.

[Naturalclar]

自分が完全に読み違えてました、すみません！ここは向上で正しいですね:bow:

[Naturalclar]

Suggested change

	_メモ: 上記の例の場合、ふさわしい CSS の宣言は `font-family: 'Source Sans Pro';` のようになります。_
	_ヒント: 上記の例の場合、ふさわしい CSS の宣言は `font-family: 'Source Sans Pro';` のようになります。_

[Naturalclar]

PR ありがとうございます！いくつか Suggest したので確認お願いします。

[tars0x9752]

@Naturalclar
レビューありがとうございます！
Note はすべて「ヒント」で統一したほうがよいでしょうか？
（Suggest いただいてない箇所で3箇所ほど、「注意」と訳しているところがあるのですがその場合はそちらも修正します🙇）

[Naturalclar]

LGTM! ありがとうございます！ ヒントと注意に関しては、コンテキストによるかなと考えています。
基本的には「注意」は言葉が強いので重要なとき以外は避けたいです。
このページで言えば、斜体_で書かれてるところは_ヒント、強調されているところは文章の内容てきに注意で良いと思いました。

[gatsbot]

Holy buckets, @huffhuffman — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!