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

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

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

```jsx
// 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>
・・・以下略・・・
```
<br>

### ファイル分割したい

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

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

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


`styles/global.css`↓

```css
h1 {
  color: FireBrick;
}
```

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

```jsx
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を記述。

```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は以下のように。

```jsx
//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**
<hr />


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


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

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

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />