さて、前回は「CSSモジュールを使うのね」と言うところで力尽きてしまった訳ですが、気を取り直して再チャレンジ。と言っても、そもそも今迄 CSSモジュールを使わないで書いているので、今一度見てみましょう。CSSモジュールのリポジトリREADME.md を見てみます。
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
https://github.com/css-modules/css-modules
…なになに「CSSモジュールは、すべてのクラス名とアニメーション名がデフォルトでローカルにスコープされているCSSファイルです。」うーん。何やら分かったようなわからないような…。
「すべてのURL（url（…））と@importsはモジュールリクエスト形式です（./xxxと../xxxは相対を意味し、xxxとxxx / yyyはモジュールフォルダー内、つまりnode_modules内を意味します）」ふんふん。それで？
「CSSモジュールは、ICSSまたは相互運用可能なCSSと呼ばれる低レベルの交換形式にコンパイルされますが、通常のCSSファイルのように記述されます」うーむ。成る程わからん。
こう言う時は実装例を見ないとピンと来ないので、探してみます。
Gatsby の公式サイトに載っていたコードをじーっと見てみます。
import React from "react"
import containerStyles from "./container.module.css"
export default function Container({ children }) {
return <div className={containerStyles.container}>{children}</div>
}うーん。元々 CSS ってグローバルスコープだけど、それをローカルスコープが使える様になると。まあ確かに上でそう書いてるものね。でも実際はどうなってんの？と思ったのだけど、取り敢えず手を動かさないと、全く理解出来ないタイプなので、以前に作った index.js と second.js で実験してみることにする。
import React from "react"
import styles from "../styles/index.module.css"
import "typeface-fira-sans-extra-condensed"
export default function Home() {
return (
<div className={styles.mainconteiner}>
<h1 className={styles.maintitle}>Hello world! </h1>
<h3 className={styles.nexttitle}>I am inohide.</h3>
</div>
)
}サンプルコードを真似て修正したのが上のモノ。ついでに CSS も一緒に修正。
mainconteiner {
width: 100%;
height: 100vh;
background-color: teal;
padding: 30px;
font-weight: 600;
text-align: left;
}
.maintitle {
font-size: 3rem;
color: #fff;
}
.nexttitle {
font-size: 1.6rem;
color: #fff;
}で、出来たのがこちら。
まぁ、前と一緒だよね。ほんじゃ次。
import React from "react"
import styles from "../styles/second.module.css"
import "typeface-fira-sans-extra-condensed"
export default function Second() {
return (
<div className={styles.mainconteiner}>
<h1 className={styles.maintitle}>This page is second page</h1>
<h3 className={styles.nexttitle}>Well, how about?.</h3>
</div>
)
}今回は実験なので、クラス名も一緒にしてみた（ローカルスコープなら、問題ないはずだよね？）
CSS はバックグラウンドカラーと文字色を変更。
.mainconteiner {
width: 100%;
height: 100vh;
background-color: lightslategray;
padding: 30px;
font-weight: 600;
text-align: left;
color: #fffacd;
}
.maintitle {
font-family: 'Fira Sans Extra Condensed';
font-size: 3rem;
}
.nexttitle {
font-family: 'Fira Sans Extra Condensed';
padding-top: 20px;
font-size: 1.6rem;
} では、結果は？
おぉー良いねー。でももうちょっと見てみよう。Chromeの開発者ツールで見てみます。
second-module--mainconteiner--1BvYmああ成程、import したモジュール名がクラスの最初に着くんだね。xxx.module.css の様にしてインポートするのはこの為の様です。 あれっ？クラス名の後ろにも何か追加されてる？ 「–1BvYm」とは一体？ ここでもう一度、公式ページを見てみましょう。
これらは、CSSモジュールが生成するクラス名です。それらはあなたのサイト全体でユニークであることが保証されています。
自動で付けられていて、この仕組みがローカルスコープを可能にしていると言うことなのですね。どれ違うページの同じクラス名はどうなっているかな？
index-module--maintitle--3alxrうんうん。ようやっと納得しました。これでやっと Gatsby で何か作れるかな？ でも折角なのでもう少し調べてみることにします。私は Vue.js のシングルファイルコンポーネント がいたく気に入っているのですが、Gatsby にも同様のものがあるのでしょうか？ 次回はもう少し Gatsby のスタイリングについて見てみることにしましょう。
コメント