更新日: 2024 / 08 / 16

[HTML] Bootstrap5のCSS変数でスタイルをカスタマイズする方法

カテゴリー: UIKITの使い方

LP-UIKITのコンポーネントやテンプレートはBootstrap5に対応したHTMLでコーディングされています。

このページではCSS変数をカスタマイズして新しいテーマを作る方法を紹介します。

  1. CSS変数って何？

    1. Bootstrap5のCSS変数はどこにある？
    2. CSS変数のカスタマイズ方法
    3. Bootstrap5のCSSファイルの変数の値を直接変更
    4. CSS変数を別のファイルで上書き
    5. CSS変数をCSSセレクタ単位で上書き

  2. まとめ

CSS変数って何？

CSS変数はCSSカスタムプロパティとも呼ばれるもので、SASS(SCSS)の変数のような使い方ができます。

色やフォントのスタイルをセレクタごとに個別に作成していると、スタイルの変更があった場合に修正するのがかなり大変です。

h1 {
  color: #333;
  font-size: 24px;
}
p {
  font-size: 16px;
}

例えば上記のようなコードが数千行あって大見出し(h1とか.titleとか)のフォントサイズを全て変更する場合、全部確認する必要があります。

CSS変数を使うことで以下のように変数としてスタイルを定義しておけるので修正箇所が少なくて済みます。

:root {
  --main-color: #f06292; 
  --font-size-title: 24px;
  --font-size-text: 16px;
}
h1 {
  color: var(--main-color);
  font-size: var(--font-size-large);
}
p {
  font-size: var(--font-size-text);
}

Bootstrap5のCSS変数はどこにある？

Bootstrap5もCSS変数を使ってフォントサイズやカラーパレットが作られているので、変更したい場合は:root{}の中身を書き換えればOKです。

Bootstrap5のCSS変数はBootstrap5でダウンロードしたCSSファイルの上部にあり、ライトモードとダークモード用の変数が定義されています。

:root,
[data-bs-theme="light"] {
  /* ライトモードのCSS変数 */
}

[data-bs-theme="dark"] {
  /* ダークモードのCSS変数 */
}

CSS変数のカスタマイズ方法

CSS変数のカスタマイズ方法は以下の3つのパターンがあります。

  • Bootstrap5のCSSファイルの変数の値を直接変更
  • CSS変数を別のファイルで上書き
  • CSS変数をCSSセレクタ単位で上書き

以下で詳しく解説します。

Bootstrap5のCSSファイルの変数の値を直接変更

まず1つ目はBootstrap5のファイルを開いて直接値を変更する方法。

CSSファイルを開くと以下のような変数が見つかるので値を直接書き換えます。

:root,
[data-bs-theme="light"] {
  /* 省略 */
  --bs-body-line-height: 1.5;
  --bs-body-color: #111;
  /* 省略 */
}

/* 変更後 */
:root,
[data-bs-theme="light"] {
  /* 省略 */
  --bs-body-line-height: 1.8;
  --bs-body-color: #000;
  /* 省略 */
}

この方法は一番簡単でわかりやすいですが、Bootstrap5をアップデートした場合に設定が上書きされるので注意が必要です。

CSS変数を別のファイルで上書き

2つ目の方法はCSS変数だけを抜き出して別のCSSファイルで上書きする方法。

1つ目の方法ではBootstrap5のファイルを直接書き換えましたが、こちらは別ファイルに変更したCSS変数を書いて上書きします。

例えばcustom.cssのようなファイル名で変数の値を変えたコードを用意し、Bootstrap5のCSSの後に読み込ませることで変数を上書きすることができます。

/* custom.css */
:root,
[data-bs-theme="light"] {
  /* 省略 */
  --bs-body-line-height: 1.8;
  --bs-body-color: #000;
  /* 省略 */
}

あとはHTMLでCSSを読み込めば上書きされた値で表示されます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- 変数の上書き -->
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

こちらのメリットはBootstrap5のオリジナルコードを書き換えることなくスタイルを変更できるので安全に上書きできます。

CSS変数をCSSセレクタ単位で上書き

3つ目はあまり使用することはありませんが、セレクタ単位で直接書き換える方法です。

例えば特定のコンポーネントにテーマを追加してテキストカラーを薄くしたいような場合に使用できます。

.card.card--blog {
  --bs-body-line-height: 1.8;
  --bs-body-color: #555;
}

CSSコードを直接書いて新しいコンポーネントを作成するのではなく、コンポーネントのテーマを追加するだけなら変数のみ指定することもできます。

コンポーネントのテーマをカスタマイズしたいけど、BootstrapのClassはそのまま使いたいといった場合に有効です。

まとめ

Webサイト全体のテーマを変更するにはCSS変数のカスタマイズが有効です。CSS変数だけを抜き出したCSSファイルを作っておくことで、複数のサイトでテーマを使い回すといったことも可能です。