2019-01-19に更新

GatsbyJSでCSS Modulesを使ってみよう

GatsbyJSでCSS Modulesを使ってみよう

Webサイトを作成していくとCSSファイルがどんどん肥大化していきます。
そこで、部品ごとにCSSを分割してあてて管理するやり方がいくつかあります。
+ CSS Modules
+ CSS in JS
といった書き方があります。しかし、JSファイルにCSSに直接書き込むCSS in JSは今回は説明しません。(CSSだけで管理する方が個人的にはやりやすいと今は考えています。)
/components/header/index.jsを改修していきます。

import { Link } from 'gatsby'
import PropTypes from 'prop-types'
import React from 'react'

const Header = ({ siteTitle }) => (
  <div
    style={{
      background: `rebeccapurple`,
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {siteTitle}
        </Link>
      </h1>
    </div>
  </div>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

このCSS全部消します。すると下記のようになります。

import { Link } from 'gatsby'
import PropTypes from 'prop-types'
import React from 'react'

const Header = ({ siteTitle }) => (
  <div>
    <div>
      <h1>
        <Link to="/">
          {siteTitle}
        </Link>
      </h1>
    </div>
  </div>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

これで確認するとこんな感じになると思います。
006.png
Gatsby Default StarterとHi peopleは同じH1タグです。
続いて/components/header/header.module.cssを作成します。

.title {
 font-size: 1rem
}

ファイル名を.module.cssにすることでCSSはそこにだけ効きます。
続いて/components/header/header.jsを以下のように改変します。

import { Link } from 'gatsby'
import PropTypes from 'prop-types'
import React from 'react'
import styles from "./header.module.css"

const Header = ({ siteTitle }) => (
  <div>
    <div>
      <h1 className={styles.title}>
        <Link to="/">
          {siteTitle}
        </Link>
      </h1>
    </div>
  </div>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

import styles from "./header.module.css"でCSSを読み込んでいます。そして、<h1 className={styles.title}>と書いてCSSを当てています。
するとこうなります。
0061.png
Gatsby Default Starterだけが小さくなりましたね。
これだけではCSSのスコープが効いているかわかりません。
そこで/src/pages/index.jsの<h1>Hi people</h1><h1 className="title">Hi people</h1>にして確認してみましょう。
0061.png
全く同じ状況ですね。
つまり、しっかりCSSスコープが効いていることがわかります。
これでposttitleとかcardtitleとか細かい名前ではなくコンポーネントに分けてしまえばtitleだけで開発してくことが可能になりました。

まとめ

サイトは大型化していくに従いCSSをどこに書いたかわからなくなることが多々あります。また、同じ名前を使いまわしてごちゃごちゃになることも多々あります。あらかじめ細かくCSSmoduleで開発することで効率よくデザインを進めていくことが可能になります。

お願い

頑張って勉強しながら書いています。間違いなどがあればご指摘いただけたらうれしいです。

Originally published at www.corylog.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

view_list [連載] ブロガー向けGatsby講座
第4回 GatsbyJSのLayoutを設定しよう
第5回 GatsbyJSのimageを使ってみよう
第6回 GatsbyJSでCSS Modulesを使ってみよう
第7回 GatsbyJSのサイトをデプロイする。GitHub登録まで
第8回 GatsbyJSのサイトをデプロイする。GitHubへリポジトリを反映する

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント