更新日: 2023 / 12 / 21

JekyllでBootstrap5を使う方法

カテゴリー: コーディング

Bootstrap5はCSSフレームワークで簡単にレスポンシブなWebサイトを作成できるフレームワークです。

通常はBootstrap5のCSSやJSファイルを読み込むだけですが、SCSSを使うことでテーマやClassの拡張ができるようになります。

この記事では静的サイトジェネレータのJekyllにBootstrap5を入れてテーマをカスタマイズする方法を紹介します。

  1. Bootstrap5の変数カスタマイズやClass拡張のメリット

  2. JekyllにBootstrap5をインストールする方法

  3. JekyllでBootstrap5のテーマをカスタマイズする方法

    1. Jekyllのフォルダ構成について
    2. JekyllでBootstrap5のSCSSファイルを読み込む
    3. JekyllでBootstrap5のテーマ変数を書き換える
    4. JekyllでBootstrap5のClassを拡張する

  4. JekyllでCSSファイルを読み込む

  5. まとめ

Bootstrap5の変数カスタマイズやClass拡張のメリット

Bootstrap5はデフォルトのClassを使うだけでもある程度UIデザインができるようになっていますが、そのままだとどうしてもデザインがカッコ悪くなります。

そんな時はテーマを変えることでBootstrap5の便利な機能も使いつつ、オシャレなデザインを実装することもできます。

「LP-UIKIT」でもBootstrap5のテーマやClassを拡張してほぼBootstrap5だけでLPのスタイルを行っています。

JekyllにBootstrap5をインストールする方法

JekyllはRobyで作られたツールですが、nodeを使うことでBootstrap5をインストールすることができます。

インストール方法はBootstrap5の公式ドキュメントにもあるようにnpmパッケージを使います。

まずはJekyllのプロジェクトに移動します。ここではmysiteという名前のフォルダと仮定します。

cd mysite

次にnpmでBootstrap5をインストールします。

npm install bootstrap@5.3.2

するとnode_modulesというフォルダが自動的に作成され、その中にBootstrapのフォルダも作成されます。

├── node_modules
│   └── bootstrap
│    └── dist/
│    └── js/
│    └── scss/
│    └── package.json
│    └── LICENSE
│    └── README.md

これでJekyllにBootstrap5をインストールできました。

あとはJekyllのプロジェクトからbootstrap内のSCSSファイルをインポートしてテーマやClassの拡張ができます。

JekyllでBootstrap5のテーマをカスタマイズする方法

Bootstprap5をインストールできたのであとは必要なファイルをインポートしていけばすぐに使えるようになります。

Jekyllのフォルダ構成について

JekyllではSCSSファイルを_sassというフォルダに入れることになっています。

構成としては次のような感じになります。

  • _includes: テンプレートで読み込むHTMLファイル
  • _layouts: ベースレイアウトのHTMLファイル
  • _sass: SCSSファイル
  • _site: 生成されたHTMLファイル
  • node_modules: Bootstrap5などのnpmパッケージ

ここでは以下のように下層ページを格納するpagesフォルダとサイトで使用するCSSファイルを入れておくassetsフォルダも追加しています。

  • pages: 下層ページのHTMLファイル
  • assets: CSSやJSファイル
  • index.html: トップページのHTMLファイル
├── mysite
│   └── _includes
│   └── _layouts
│   └── _sass
│   └── _site
│   └── node_modules
│   └── pages
│   └── assets
│   └── index.html

JekyllでBootstrap5のSCSSファイルを読み込む

Bootstrap5をインストールするとnode_modulesのフォルダに入ります。

WebサイトのスタイルでSCSSを書くのは、assetsフォルダでも可能ですが、Jekyllのルールに従って_sassで管理します。

_sassフォルダで作成したSCSSファイルをassetsフォルダのstyle.scssから読み込む形になります。

├── mysite
│   └── _sass
│    └── main.scss
│   └── assets
│    └── style.scss
│   └── index.html

style.scssでは直接CSSコードを書かず、SCSSファイルをインポートするだけにしておきます。

1行目の2行目の---はJekyllにSCSSファイルを認識させるために必要なものです。

// assets/style.scss
---
---

@import "./main.scss";

次にBootstrap5のファイルをインポートします。インポートする必要があるファイルについてはこちらのBootstrap5の公式ドキュメントにあるものをそのまま使用します。

main.scssをインポートした行の上にコピペするとこちらのようになります。

// assets/style.scss
---
---

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here
@import "./main.scss";

JekyllでBootstrap5のテーマ変数を書き換える

インポートができましたが、このままだとBootstrap5のデフォルトスタイルが入ってしまいます。

テーマ変数を書き換えるには先ほどコピペしたコードの// 2. Include any default variable ...と下で変数と上書きする値を入れればOKです。

// assets/style.scss
// 省略

// 2. Include any default variable overrides here
$body-bg: #000;
$body-color: #111;

// 省略

Bootstrap5で使われている変数一覧は以下の場所にまとめられています。

node_modules/bootstrap/scss/_variables-dark.scss
node_modules/bootstrap/scss/_variables.scss

ここにあるものをコピペしてstyle.scssに書いたり、このファイル自体をコピーして_sassフォルダに入れてその中で変数を書き換えたものをstyle.scssにインポートしてもOKです。

// assets/style.scss
// 省略

// 2. Include any default variable overrides here
@import "./variables.scss";
@import "./variables-dark.scss";

// 省略

JekyllでBootstrap5のClassを拡張する

Bootstrap5では変数の他にもフォントサイズやマージンなどの余白といった便利なClassが用意されています。

これらのClassを使うことでHTMLファイル上でレイアウトを作ることができます。例えば次のようなものです。

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

mb-3はmargin-bottom、p-2はpaddingで、数字はサイズの大きさを指しています。

すごく便利なのですが、デフォルトだとサイズが1〜5までしかなくもう少し細かく設定できるとCSSを使わずにClassだけでレイアウトを作れるようになります。

SCSSを使うことでサイズの値を変えたり、サイズの種類を増やしたりできます。

コードを書く場所は先ほどのstyle.scssの// 4. Include any default map ...の下のところです。

例えばマージンやパディングで使われるスペースのサイズを増やしてみます。

// assets/style.scss
// 省略

// 4. Include any default map overrides here
$custom-spacers: (
  100: 100px,
  80: 80px,
  60: 60px,
  50: 50px,
  40: 40px,
  30: 30px,
  25: 25px,
  24: 24px,
  20: 20px,
  15: 15px,
  10: 10px,
) !default;
// scss-docs-end spacer-variables-maps
$spacers: map-merge($spacers, $custom-spacers);

// 省略

このようにすると先ほどのClassでmb-30とかp-100のように指定することができます。

<div class="d-flex mb-30">
  <div class="p-100">Flex item</div>
  <div class="p-20">Flex item</div>
  <div class="p-50">Flex item</div>
</div>

デフォルトのmb-3などは上書きしない限りそのまま使用できます。

マージンやパディング以外にもブレークポイントや配色の名前、.containerのサイズ、フォントサイズなどの値を変更したり拡張できます。

JekyllでCSSファイルを読み込む

Bootstrap5のテーマをカスタマイズできたらHTMLテンプレートからCSSを読み込みます。

assetsフォルダに入っているのはSCSSファイルですが、生成する際に自動的に同じ名前のCSSファイルに置き換わるので、HTMLファイルから読み込む際は通常通り、CSSとして読み込みます。

<!-- index.htmlから読み込む場合 -->
<link rel="stylesheet" href="./assets/style.css">

CSSファイルを読み込む際は通常のHTMLと同じようにパスに注意してください。

Jekyllでページを作成する方法や、Jekyllでの基本的なSCSSの使い方については以下の記事をご覧ください。

まとめ

この記事ではJekyllにBootstrap5を入れて、テーマ変数のカスタマイズやClassの拡張方法を解説しました。

テーマをカスタマイズできるようになればBootstrapで作ったとは思えないようなオシャレなWebデザインを実装することも可能です。