gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要

# gatsbyの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[今回：gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc24aae21b22b936488d)
[gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)
[gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング](https://qiita.com/3S_Laboo/items/c9a9a9c3c1e4d0851e6b)
[gatsby入門 チュートリアルをこなす 6.  変圧器プラグイン※Transformer pluginsのgoogle翻訳](https://qiita.com/3S_Laboo/items/226653c9f91cb3a217c7)
[gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する](https://qiita.com/3S_Laboo/items/f80d2c5a36207af71a01)
[gatsby入門 チュートリアルをこなす 8.  公開するサイトの準備](https://qiita.com/3S_Laboo/items/1f50c15a5eddbde6ad18)
[gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)
# チュートリアル
今回実施するgatsbyのチュートリアルはこちら
https://www.gatsbyjs.com/tutorial/part-two/
ギャツビーのスタイリングの概要を知ることができるようです。
## Creating global styles with standard CSS files
### Create a new Gatsby site
新しいgatsbyサイトを作ります。
以下を実行
```gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world```
```cd tutorial-part-two```
### Add styles to a CSS file
src配下にstylesディレクトリ作成
styles配下にglobal.cssを作成し、以下を記載

```css:src/styles/global.css
html {
  background-color: lavenderblush;
}
```
### Include the stylesheet in gatsby-browser.js
tutorial-part-twoディレクトリ直下にgatsby-browser.jsを作成し、以下を記載

```js:gatsby-browser.js
import "./src/styles/global.css"

// or:
// require('./src/styles/global.css')
```
以下コマンドでサイト起動
```gatsby develop```
※tutorial-part-twoディレクトリで実行
![2020-09-04_18h48_21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/4a2a603f-3f5e-c218-3f3a-befa37c6008a.jpeg)
ラベンダー色確認
これはディレクトリgatsby-browser.js
### Using component-scoped CSS
コンポーネント用のCSSモジュールを作成する。
### Build a new page using CSS Modules
src配下にcomponentsディレクトリを作成
src/components/container.jsを作成し、以下を記述

```js:src/components/container.js
import React from "react"
import containerStyles from "./container.module.css"

export default function Container({ children }) {
  return <div className={containerStyles.container}>{children}</div>
}
```
src/components/container.module.cssを作成し、以下を記述

```css:src/components/container.module.css
.container {
  margin: 3rem auto;
  max-width: 600px;
}
```
チュートリアルでは以下と記載されているので超大事と思います。
『ファイル名が通常の.cssではなく.module.cssで終わっていることがわかります。これは、このCSSファイルをプレーンなCSSではなくCSSモジュールとして処理するようにGatsbyに指示する方法です。』
※google翻訳です。
src/pages/about-css-modules.jsを作成し、以下を記述。

```js:src/pages/about-css-modules.js
import React from "react"

import Container from "../components/container"

export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
    </Container>
  )
}
```
http://localhost:8000/about-css-modules/を起動
![2020-09-04_19h07_04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/4f320ad1-694d-8514-433c-c2efe5464d54.jpeg)
おお、すげぇ！container.jsで書いたdivはいかにabout.jsの内容が記載されている。
### Style a component using CSS Modules
コンポーネントのスタイルを作成
src/pages/about-css-modules.module.cssを作成し、以下を記述。

```css:src/pages/about-css-modules.module.css
.user {
  display: flex;
  align-items: center;
  margin: 0 auto 12px auto;
}

.user:last-child {
  margin-bottom: 0;
}

.avatar {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  margin: 0;
}

.description {
  flex: 1;
  margin-left: 18px;
  padding: 12px;
}

.username {
  margin: 0 0 12px 0;
  padding: 0;
}

.excerpt {
  margin: 0;
}
```
src/pages/about-css-modules.jsに以下を記述。

```js:about-css-modules.js
import React from "react"
import styles from "./about-css-modules.module.css"←これ追記
import Container from "../components/container"

console.log(styles)←これ追記
```
なんやらコンソールにチュートリアルと似たようなログが出ているのでOKだろう。

更にsrc/pages/about-css-modules.jsに追記

```js:src/pages/about-css-modules.js
import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"

console.log(styles)

↓ここから
const User = props => (
  <div className={styles.user}>
    <img src={props.avatar} className={styles.avatar} alt="" />
    <div className={styles.description}>
      <h2 className={styles.username}>{props.username}</h2>
      <p className={styles.excerpt}>{props.excerpt}</p>
    </div>
  </div>
)
↑ここまで追記

export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
      ↓ここから
      <User
        username="Jane Doe"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
        excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
      <User
        username="Bob Smith"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
        excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
      ↑ここまで追記
    </Container>
  )
}
```
![2020-09-04_19h31_41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/1adc1fc4-2ff9-15a6-d0fd-f9f266b21e24.jpeg)
お、チュートリアル通り♪
Userを定義しておくと繰り返し使用できてmodule.cssも適用できるとなるほどね。
たぶん繰り返し処理とデータを作って使いまわすのね。
今後出てくるかしら？

今回は以上。

ありがとうございました。