Gatsbyブログでデザインを変更する（CSS適用方法） - エンジニアを目指す日常ブログ

はじめに

前回はGatsbyブログをスターターキットを作成して、公開した。

自分のブログに変更していくために、今回はCSSの適用方法を理解する。ほぼReactで勉強したことと同じだが、Gatsby特有／gatsby-starter-blogスターターキット特有部分もある。

この記事のゴール

以下の仕組みを理解する。
- サイトデザインのCSS追加方法
AboutページのCSSをいじってみる。
ブログ全体のCSSをいじってみる。

前回の記事

tomiko0404.hatenablog.com

前提

gatsby-starter-blogスターターキットを利用したgatsbyブログを立ち上げ済
Vagrantを開発環境として利用
Gatsby Cloudで公開済（今回は利用しないので、なくても可）

はじめに
CSSの追加
参考：CSSでの変数利用
- 変数の定義
- 変数の利用
おわりに
関連記事
- つづき

CSSの追加

一部のページにスタイル適用したい場合
- CSS Module等を利用する
全体にスタイルを適用したい場合
- layout.cssを利用する
- gatsby-browser.jsを利用する ※gatsby-starter-blogスターターキットで利用されている方法

一部のページへのスタイル適用：CSS Moduleの利用

公式チュートリアルではCSS Moduleを利用してCSS適用しているので、AboutページにCSS適用してみる。

インストール

パッケージのインストールなどは不要。

CSSファイル作成

.module.cssを拡張子とするファイルを作成する。

src/components/my-layout.module.css

.my-container {
    margin: auto;
    max-width: 500px;
    font-family: sans-serif;
    background-color: khaki;
}

CSSは一般的にクラス名をケバブケースで記載する（my-container）。一方でReactでは、クラス名をキャメルケースで記載する（myContainer）。

Gatsbyでは、.module.cssファイルでケバブケース、インポートした.jsファイルではキャメルケースで記載しておくと自動で読み替えて同じものとして扱ってくれる。

Aboutページへの適用

Aboutページに適用する。 <MyLayout>コンポーネントでレイアウトを外だししているので、<MyLayout>コンポーネントにCSSを適用する。今回は<main>タグにクラスを適用する。

src/components/myLayout/myLayout.js

import * as React from 'react'
import { Link } from 'gatsby'
import {myContainer} from "../components/my-layout.module.css"

const MyLayout = (props) => {
    const {pageTitle, children} = props;

    return(
        <div>
            <title>{pageTitle}</title>
            <nav>
                <ul>
                    <li><Link exact to="/">Home</Link></li>
                    <li><Link to = "/about">About</Link></li>
                </ul>
            </nav>
            <main className={myContainer}>
                <h1>{pageTitle}</h1>
                {children}
            </main>
        </div>
    )

}

export default MyLayout;

結果、CSSが適用された。

全体へのCSS適用①：`layout.css`の利用

公式チュートリアルの以下ページを参考に実施する。

参考： Standard Styling with Global CSS Files | Gatsby

components/layout.jsとcomponents/layout.cssを作成する必要があるが、スターターキットで既にlayout.jsは作成されているので、layout.cssを作成する。

CSSファイルの作成

src/copmonents/layout.css

h1 {
    background-color: skyblue;
}

layout.jsへのインポート

layout.jsにインポート文を追加する。

src/components/layout.js

import "./layout.css"

`Layout`コンポーネントの適用

index.jsの応答値を全体的に、layout.jsで作成したコンポーネント<Layout>で囲む必要がある。スターターキットにより既に実現されているので省略する。

結果、すべてのページの<h1>タグにCSSが適用された。

全体へのCSS適用②：gatsby-browser.jsを利用する

全体にCSSを適用したい場合はgatsby-browser.jsの中でstyle.cssをインポートし、style.cssの中に適用させたいCSSを記述する。

以下のチュートリアルにあるとおり、CSS-in-JSではないことに注意する。公式では全体に適用させるこの方法はあまりおすすめしていないようだ。layout.cssかglobal-styles.jsの利用が最善だ、と述べている。

参考： Standard Styling with Global CSS Files | Gatsby

CSSファイルのインポート

gatsby-starter-blogではstyle.cssが存在しており、以下ファイルでインポートされている。

gatsby-browser.js

// normalize CSS across browsers
import "./src/normalize.css"
// custom CSS styles
import "./src/style.css"

CSS変更

style.cssを変更してみる。

h2,h3,h4,h5,h6 {
  font-weight: var(--fontWeight-bold);
  /* color: var(--color-heading); */
  color: blue;
}

見出しだけ青字に変更された。

`gatsby-browser.js`とは

Gatsbyのルートフォルダに置く特別なファイルで、この中でexportすることでグローバルAPIを作成することができる。

The file gatsby-browser.js lets you respond to Gatsby-specific events within the browser, and wrap your page components in additional global components. The Gatsby Browser API gives you many options for interacting with the client-side of Gatsby. To use Browser APIs, create a file in the root of your site at gatsby-browser.js. Export each API you want to use from this file.

参考：Gatsby Browser APIsについて
Gatsby Browser APIs | Gatsby

その他、Reactのデザイン変更方法メモ

過去にReactのデザイン変更方法をメモしていた。 tomiko0404.hatenablog.com

この中でもchakra-uiは使いたいので、後日gatsbyへの導入方法を調べる予定。

参考：CSSでの変数利用

gatsby-starter-blogスターターキットのstyle.cssでは、CSSの値を直接設定するのではなく、CSSファイルの冒頭で変数化して利用していた。こうすることで、ここでは18px、こっちでは19pxということが起きず、統一性が保てるメリットがあると思われる。

変数の定義

変数名は--で開始する。

:root {
  --main-bg-color: brown;
}

:rootは、HTML全体の意味。

変数の利用

var(変数名)で利用する。

body {
  background-color: var(--main-bg-color);
}

おわりに

スタイルを変更するための基礎を理解した。