Gatsby：CSS書き方とファイル分割の仕様

自分で作成したCSSの作り方は以下の通り。React特有の書き方…。

// index.js
import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

import { Container, Row, Col, Badge, Accordion, Card, Button } from 'react-bootstrap'

const h1Size = {　　　　　// 自分でつけた任意の名前
  fontSize: '1.25rem',   // font-sizeとするところfontSizeとする。React特有の書き方
  lineHeight: 1.75   // line-heightとするところlineHeight
}
const h2Size = {
  marginTop: '1.25rem',
  fontSize: '1.1rem',
  color: '#999999',
  lineHeight: 1.75
}
const fontSmallCrimson = {
  color: 'crimson',
  fontSize: 'small'
}
const fontSmall = {
  fontSize: 'small',
}
const fontCrimson = {
  color: 'crimson',
}
const fontGray = {
  color: '#777777',
}
const lineSpace = {
  marginTop: 20,
}
const IndexPage = () => (
    <h1 style={h1Size}>ギャツビー</h1>
・・・以下略・・・

ファイル分割したい

JSファイルがどんどん長くなるのでファイル分割したい。

global.css

プロジェクト全体にあてるCSSは以下のやり方で（bootstrapを使用している場合はいらない作業かも）

まずsrc/stylesフォルダを作成。
stylesフォルダの下にglobal.cssを作成。
global.cssにCSSを記述

styles/global.css↓

h1 {
  color: FireBrick;
}

gatsby-browser.jsに以下のように記述

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

この例では全ページのH1見出しをFireBrick色にしてる。
index.jsなどの表示コンポーネントにimport文はいらない。

コンポーネントごとのCSS

index.jsだったらindex.module.cssという名前のファイルを作成する。こうやってファイル名を同じにするだけで、いわゆるAngularにおけるコンポーネント4セット(html, css, ts, spec.ts)のうちのcssファイルだと認識される。

そこに例えば以下のようにマイCSSを記述。

/*index.module.css*/
　.h1Size  {
    font-size : 1.25rem;
    line-height : 1.75;
  }
   .h2Size   {
    margin-top : 1.25rem;
    font-size  : 1.1rem;
    color: #999999;
    line-height: 1.75;
  }
   .fontSmallCrimson  {
    color: crimson;
    font-size : small;
  }
   .fontSmall   {
    font-size:  small;
  }
   .fontCrimson   {
    color: crimson;
  }
   .fontGray   {
    color: #777777 ;
  }
  .fontRed  {
    color: red
  }
  .fontBule {
     color: steelblue;
  }
   .divLineSpace   {
    margin-top:  20;
  }

でJS内のHTMLは以下のように。

//index.js
import Styles from './index.module.css'
・・・略・・
<h1 className={Styles.h1Size}>ギャツビー</h1>
<span className={Styles.fontSmall}>Gatsby</span>
・・・略・・

import Styles～文の挿入も必要なくしてくれると嬉しい。

以上。

本の宣伝

Gatsbyバージョン５>>>>改訂２版

前編の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と後編の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ https://yah-space.work

静的サイトジェネレーターGatsby最新バージョン５の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《Slicy API》《Script API》《Head API》を紹介、実装方法も。《Gatsby Functions》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！

最新Gatsby５とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《サイト内検索機能》をGatsbyバージョン４からの新機能《Gatsby Functions》と《microCMSのqパラメータ》で実装。また、SEOコンポーネントをカスタマイズしてmicroCMS APIをツイッターカードに表示させるOGPタグ実装方法も解説。