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


gatsbyの作業履歴

gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする
gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る(1)
gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る(2)
今回:gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要
gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成
gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ
gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング
gatsby入門 チュートリアルをこなす 6. 変圧器プラグイン※Transformer pluginsのgoogle翻訳
gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する
gatsby入門 チュートリアルをこなす 8. 公開するサイトの準備
gatsby入門 ブログ作ってサーバーにアップしてみる

チュートリアル

今回実施する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を作成し、以下を記載

src/styles/global.css
html {
  background-color: lavenderblush;
}

Include the stylesheet in gatsby-browser.js

tutorial-part-twoディレクトリ直下にgatsby-browser.jsを作成し、以下を記載

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

// or:
// require('./src/styles/global.css')

以下コマンドでサイト起動
gatsby develop
※tutorial-part-twoディレクトリで実行

ラベンダー色確認
これはディレクトリgatsby-browser.js

Using component-scoped CSS

コンポーネント用のCSSモジュールを作成する。

Build a new page using CSS Modules

src配下にcomponentsディレクトリを作成
src/components/container.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を作成し、以下を記述

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を作成し、以下を記述。

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/を起動

おお、すげぇ!container.jsで書いたdivはいかにabout.jsの内容が記載されている。

Style a component using CSS Modules

コンポーネントのスタイルを作成
src/pages/about-css-modules.module.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に以下を記述。

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に追記

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>
  )
}


お、チュートリアル通り♪
Userを定義しておくと繰り返し使用できてmodule.cssも適用できるとなるほどね。
たぶん繰り返し処理とデータを作って使いまわすのね。
今後出てくるかしら?

今回は以上。

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