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

2020年09月04日

JavaScript JSX React gatsby

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

html {
  background-color: lavenderblush;
}

Include the stylesheet in gatsby-browser.js

tutorial-part-twoディレクトリ直下に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 ラベンダー色確認 これはディレクトリgatsby-browser.js

Using component-scoped CSS

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

Build a new page using CSS Modules

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

.container {
  margin: 3rem auto;
  max-width: 600px;
}

チュートリアルでは以下と記載されているので超大事と思います。 『ファイル名が通常の.cssではなく.module.cssで終わっていることがわかります。これは、このCSSファイルをプレーンなCSSではなくCSSモジュールとして処理するようにGatsbyに指示する方法です。』 ※google翻訳です。 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 おお、すげぇ!container.jsで書いたdivはいかにabout.jsの内容が記載されている。

Style a component using CSS Modules

コンポーネントのスタイルを作成 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に以下を記述。

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

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

今回は以上。

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


SaitoSystemService

埼玉在住のフリーランスSEです。 技術ブログや作品をここで紹介していきます。 よろしくお願いします。

Written by 齋藤 渓
埼玉在住のフリーランスSEです。技術ブログや作品をここで紹介していきます。よろしくお願いします。
Contact:
© 2020, 齋藤システムサービス by Gatsby