Chapter 06

スタイリング

クラス名によるスタイリング

srcディレクトリ配下にstylesというディレクトリを作成し、style.cssを作成します。

/* src/styles/style.css */
.message {
  color: red;
}

作成したcssをインポートし、適用させます。

// src/pages/index.js
import React from "react"
import "../styles/style.css"

export default function Home() {
  return <div className="message">Hello from Gatsby!</div>
}

localhost:8000にアクセスするとスタイリングが適用されているはずです。

uploadedImage.png

グローバルなスタイリング

さきほどのようにimportをした場合は、トップページ(localhost:8000)にのみスタイリングは適用されます。一方、すべてのページにスタイリングを適用させたい場合は、プロジェクトディレクトリ直下にgatsby-browser.jsというファイルを作成します。そして、そのファイル内にてcssをimportすることでグローバルにスタイリングを適用させることができます。

// gatsby-browser.js
import "./src/styles/style.css"

この事例では独自のスタイルシートを読み込んでいますが、Bootstrapのような外部CSSライブラリを読み込みグローバルに適用したい場合もこちらの手法を用いますのでぜひ覚えておきましょう。

gatsby-browser.jsファイルとは?

このファイルに記述できる内容はスタイリング以外にもあり、**「ブラウザで表示処理が行われる際の処理」**を書くことができます。
その処理内容は、Gatsby Browser APIとして定義されており詳しくは以下のページにまとまっています。

https://www.gatsbyjs.org/docs/browser-apis/

簡単な一例としては、下記のコードでブラウザの処理が始まるときの処理を定義できます。

// gatsby-browser.js
exports.onClientEntry = () => {
  console.log("We've started!")
}