gatsby 公式チュートリアルメモ part2

14755 ワード
gatsby gatsby テキストリンク

公式チュートリアルリンク

https://www.gatsbyjs.com/tutorial/part-two/
パート2の内容のメモ

siteの作成

コマンドを叩いて，part2用のサイトを作成
shell:shell
gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-two

cssファイル作成

globalのcssファイルはこんな感じで追加する

shell
cd src
mkdir styles
cd styles
touch global.css
global.css
html {
  background-color: lavenderblush;
}

jsに外部cssを追加してみる

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

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

あとは以下のようにビルドしてlocalhostで表示してみる
globalのCSSが読み込まれ，背景がラベンダー色になっていれば成功
shell:shell
gatsby develop

component-scope CSSを使ってみる

新しいコンポーネントとそれに紐づくcssを作る

src/comopents/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/compoents/container.module.css
.container {
  margin: 3rem auto;
  max-width: 600px;
}

hoge.module.cssという名前にするのがポイントらしい

次にページを作る

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のCSSが適用されているのがわかる

CSS Modulesを使ったcomonentの装飾

人物リストを想定した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
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>
  )
}

自作CSSクラスが適用されているのが確認できた．

CSS-in-JS

CSS-in-JS を gatsbyで使っていく上でおすすめのミニチュートリアルリンクを教えてくれた．

CSS-in-JSをもっと詳しく知りたい人が読むべき記事はここらしい

他にgatsbyがサポートしているCSSオプションは以下もあるとのこと

  • Typography.js
  • Sass
  • JSS
  • Stylus
  • PostCSS
PHPの配列
PHP+MYSQL【注入ホール】攻防テスト