ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

Gatsby.js で CSSフレームワーク Bulma を適用しよう

2020年 07月 21日

目次

Gatsby.js で作成したブログサイトに CSS フレームワークである Bulma を適用したいと思います。

Bulma というのは、最新鋭の CSS フレームワークで、JavaScript に依存していないのが特徴です。 Gatsby.js の公式ドキュメントにも紹介されています。

CSS フレームワークとしては、「ぶーとすとらっぷ」とか有名ですが、 僕は、別の機会で Bulma を知っていて、Gatsby.js の公式サイトでも紹介されているので、 選択としては間違ってないです。

準備

準備から適用まで、公式ドキュメントに従えばよいです。

まずは必要なパッケージのインストール。

[~/workspace/crz33-gatsby] $ npm install --save bulma node-sass gatsby-plugin-sass

Gatsby.js のプラグイン設定

次に Bulma の CSS は SASS で生成されるので、gatsby-config.jsにプラグインgatsby-plugin-sassの設定を追加。

plugins: [`gatsby-plugin-sass`],

SASS でビルド時に生成されるので、Bulma が用意している変数を書き換えれます。 次で例が出てきますが、例えば、FullHD のときのコンテナの最大幅を 1024px に変更できたりします。

Bulma CSS を生成する SCSS を作る

src/css/bulma.scssを以下の内容で作ります。

@charset "utf-8";
// If need, change your variables before importing Bulma
// $fullhd: 1024px;
@import "~bulma/bulma.sass";

カスタマイズしなければ、このままコピペです。 コメントで書いてあるのは、将来デザインきれいにするときにカスタマイズしてみたい Bulma の変数。

Bulma CSS を使ってみる

src/pages/index.jsなどの使いたいページコンポーネントで

import "./mystyles.scss";

すればよいです。

基本的には全ページ共通で使うともうので、 gatsby-browser.jsのほうに、 次のように追加しておけばいいです。

import "./src/css/bulma.scss";
import "prismjs/themes/prism.css";

出来栄え

Bulma を適用すると、Bulma が h1 などの、いろんなタグのスタイルがクリアするので、 下記のように強弱のないスタイルになりました。

画面

あとは、Bulma で用意されているコンテナやヘルパーを使って見栄えを良くしていけます。

以上です。

広告