GatsbyJS スタイリング入門 チュートリアル part.2

ギャツビーのチュートリアルのパート2へようこそ!

このチュートリアルの内容

このパートでは、Gatsby ウェブサイトのスタイリングのオプションを探り、サイト構築のために React コンポーネントを使用することについて深く掘り下げていきます。

グローバルスタイルを使う

すべてのサイトには、ある種のグローバルなスタイルがあります。これには、サイトのタイポグラフィや背景色などが含まれます。壁の色や質感が部屋の全体的な雰囲気を決めるのと同じように、これらのスタイルはサイトの全体的な雰囲気を設定します。

標準CSSファイルでグローバルスタイルを作成する

サイトにグローバルスタイルを追加する最も簡単な方法の1つは、グローバル.cssスタイルシートを使用することです。

✋ 新しいギャツビーサイトを作成する

新しいGatsbyサイトを作成することから始めましょう。(特にコマンドラインに慣れていない場合は)パート1で使ったターミナルウィンドウを閉じて、パート2のために新しいターミナルセッションを開始するのがベストかもしれません。 新しいターミナルウィンドウを開き、tutorial-part-twoというディレクトリに新しい "hello world" Gatsbyサイトを作成し、この新しいディレクトリに移動します。
gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-two
これで、次のような構造の新しいギャツビーサイト(ギャツビーの「HELLO WORLD」スターターをベースにしたもの)ができました。
├── package.json
├── src
│   └── pages
│       └── index.js

CSSに新しいスタイルを追加する

  1. 新しいプロジェクトにCSSファイルを追加する
cd src
mkdir styles
cd styles
touch global.css
Note:

ご希望であれば、コードエディタを使ってこれらのディレクトリやファイルを自由に作成してください。

これで、このような構造になっているはずです。
├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css
  1. global.cssファイルでいくつかのスタイルを定義します。
src/styles/global.css

html {
  background-color: lavenderblush;
}
Note:

サンプルCSSファイルの/src/styles/フォルダへの配置は任意です。

✋ スタイルシートを読み込みます。gatsby-browser.js

  1. gatsby-browser.jsを作ります。
cd ../..
touch gatsby-browser.js
プロジェクトのファイル構造は以下のようになっているはずです。

├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css
├── gatsby-browser.js
💡 gatsby-browser.jsとは?これについてはあまり気にせず、とりあえず、gatsby-browser.jsは、Gatsbyが探して使用する(存在する場合)一握りの特別なファイルの一つであることを知っておいてください。ここでは、ファイルの名前が重要です。もっと詳しく知りたい方は、ドキュメントをチェックしてみてください。
  1. gatsby-browser.jsファイルに最近作成したスタイルシートをインポートします。
gatsby-browser.js

import "./src/styles/global.css"

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

CommonJS (require) と ES モジュール (import) の両方の構文がここで動作します。どちらを選べばよいかわからない場合は、通常は import が良いデフォルトとなります。しかし、Node.js環境でのみ実行されるファイルを扱う場合(gatsby-node.jsのような)、requireを使用する必要があります。

  1. 開発モード起動
gatsby develop
ブラウザでプロジェクトを見ると、"hello world "のスターターにラベンダー色の背景が適用されているのがわかるはずです。
Note:

このチュートリアルでは、gatsby-browser.jsを使用して標準のCSSファイルを直接インポートして、Gatsbyサイトのスタイリングを始めるための最も簡単で迅速な方法に焦点を当ててきました。ほとんどの場合、グローバルスタイルを追加する最良の方法は共有レイアウトコンポーネントを使用することです。この方法の詳細についてはドキュメントをチェックしてください。

スコープされたCSSを利用する

これまでは、標準的な CSS スタイルシートを使用するという、より伝統的なアプローチについて話してきました。 これからは、CSS をモジュール化してコンポーネント指向でスタイリングに取り組むための様々な方法についてお話していきます。

CSSモジュール

CSSモジュールについて調べてみましょう。CSSモジュールのホームページから引用します。
CSSモジュールとは、デフォルトですべてのクラス名とアニメーション名がローカルにスコープされているCSSファイルのことです。
CSSモジュールは、普通にCSSを書くことができますが、より安全にCSSを書くことができるので、とても人気があります。このツールはユニークなクラス名やアニメーション名を自動的に生成してくれるので、セレクタ名の衝突を心配する必要がありません。

GatsbyはCSSモジュールを使ってすぐに動作します。このアプローチは、Gatsby (とReact全般) を使ってビルドするのが初めての方に強くお勧めします。

CSSモジュールを使って新しいページを作ろう

このセクションでは、新しいページ コンポーネントを作成し、CSS モジュールを使用してそのページ コンポーネントのスタイルを設定します。

まず、新しい Container コンポーネントを作成します。
  1. 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>
}
container.module.cssという名前のCSSモジュールファイルがインポートされていることに気づくでしょう。では、そのファイルを作成してみましょう。
  1. 同じディレクトリ(src/components)にcontainer.module.cssファイルを作成し、以下をコピー&ペーストします。
src/components/container.module.css

.container {
  margin: 3rem auto;
  max-width: 600px;
}
ファイル名の末尾が通常の.cssではなく.module.cssで終わっていることに気づくでしょう。このようにして、このCSSファイルはプレーンなCSSではなく、CSSモジュールとして処理されるべきであることをGatsbyに伝えています。
  1. 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/ にアクセスすると、あなたのページは以下のようになるはずです。

CSS モジュールを使用したコンポーネントのスタイル設定

このセクションでは、名前、アバター、短いラテン語の経歴を持つ人々のリストを作成します。<User /> コンポーネントを作成し、CSS モジュールを使用してそのコンポーネントのスタイルを設定します。
  1. src/pages/about-css-modules.module.cssにCSS用のファイルを作成します。
  2. 作成したファイルに以下を貼り付けます。
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;
}
  1. 新しい src/pages/about-css-modules.module.css ファイルを、先ほど作成した 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)
console.log(styles) コードはインポートの結果を記録するので、処理された ./about-css-modules.module.css ファイルの結果を見ることができます。ブラウザで開発者コンソールを開くと(FirefoxやChromeの開発者ツールなどを使って、多くの場合はF12キーを押して)、以下のように表示されます。 これを CSS ファイルと比較すると、インポートされたオブジェクトの各クラスが長い文字列を指すキーになっていることがわかるでしょう。これらは CSS モジュールが生成するクラス名です。これらのクラス名はあなたのサイト全体で一意であることが保証されています。また、クラスを使用するにはこれらのクラスをインポートしなければならないので、どこでいくつかの CSS が使用されているのか疑問に思うことはありません。
  1. about-css-modules.jsページコンポーネントのインラインに新しい<User />コンポーネントを作成します。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>
  )
}
TIP:

一般的に、サイト内の複数の場所でcomponentsを使用する場合は、コンポーネントディレクトリ内のモジュールファイルに作成します。しかし、1つのファイルでしか使用しない場合は、インラインで作成してください。

これで完成したページは以下のようになるはずです。

CSS-in-JS

CSS-in-JSとは、コンポーネント指向のスタイリング手法です。一般的には、JavaScriptを使ってCSSをインラインで構成するパターンがほとんどです。

GatsbyでのCSS-in-JSの使い方

多くの異なる CSS-in-JS ライブラリがあり、その多くはすでに Gatsby プラグインを持っています。この最初のチュートリアルではCSS-in-JSの例は取り上げませんが、エコシステムが提供するものを探求することをお勧めします。2つのライブラリ、特にEmotionとStyled Componentsのミニチュートリアルがあります。

CSS-in-JSに関する読み物

さらに興味のある方は、このムーブメントの火付け役となったChristopher "vjeux" Chedeauの2014年のプレゼンテーションや、Mark Dalgleishの最近の投稿「A Unified Styling Language」をチェックしてみてください。
その他のCSSオプション
Gatsbyはほぼすべての可能なスタイリングオプションをサポートしています(もしまだお気に入りのCSSオプションのプラグインがない場合は、ぜひ貢献してください!)。 と他にも!

次回のチュートリアル3は?

チュートリアルのパート3では、Gatsbyプラグインとレイアウトコンポーネントについて学びます。

チュートリアルを進める >>