More than 3 years have passed since last update.

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

Last updated at 2020-09-07Posted at 2020-09-04

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も適用できるとなるほどね。
たぶん繰り返し処理とデータを作って使いまわすのね。
今後出てくるかしら？

今回は以上。

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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