SHINYA TECH

公務員(行政職)から34歳でエンジニア転職した人

#21 Sassを用いてBootstrapをカスタマイズ ~ Bootstrapのくさみを下ごしらえする ~

f:id:kshinya-tech:20220304022040p:plain

Bootstrapをデフォルト設定のまま使用すると、いかにも"Bootstrapを使って作成した"感が出てしまうので、今回はBootstrapをカスタマイズする方法を学びました。

gyazo.com

カスタマイズの流れ

  1. Sassのコンパイラをインストールする
  2. BootstrapをSassでカスタマイズする
  3. カスタマイズしたSassをCSSにコンパイルする
  4. コンパイルしたCSSをHTMLで読み込む

1. Sassのコンパイラをインストールする

Sassの公式サイトではComposerを用いたインストール方法が用意されていないので、GitHubでライブラリを検索する。

gyazo.com

ライブラリを選ぶポイント

  1. スター数が多いか(ユーザーが多いか)
  2. 直近で更新されているか(メンテナンスされているか)

今回は上記の条件を満たしているscssphp/scssphpをインストールする。

github.com

Composerを用いてコンパイラをインストール

sk@MacBook-Air part2 % docker-compose exec app composer require scssphp/scssphp

src/vendor ディレクトリ内にscssphp/scssphpが作成される。

gyazo.com

srcディレクトリ直下に以下のディレクトリ及びファイルを作成する。(ディレクトリ名及びファイル名は任意)

gyazo.com

app.scssファイルをいじってカスタマイズしていく

まずは、Bootstrapのscssファイルを読み込む。

src/stylesheets/scss/app.scss

// 今回は絶対パスで指定している。相対パスでもOK
@import '/var/www/html/vendor/twbs/bootstrap/scss/bootstrap';

この段階でCSSにコンパイルできるか動作確認。

sk@MacBook-Air part2 % docker-compose exec app /bin/bash
root@e59265f2a27b:/var/www/html# vendor/scssphp/scssphp/bin/pscss < stylesheets/scss/app.scss > stylesheets/css/app.css

app.cssが作成されることを確認。

gyazo.com

2. BootstrapをSassでカスタマイズする

  • 今回は以下のサイトを参考にしました。

うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。 | by Takamasa Matsumoto | Medium


* フォントについてはこちらを参考にしました。

Bootstrap4用 游ゴシックfont-family - Qiita


scssファイルにカスタマイズする内容を記述する。

src/stylesheets/scss/app.scss

// @importの前にデフォルト値を上書きする内容を記述する
// Line-height
$headings-line-height: 1.5;
$line-height-base: 1.65;

// Colors
$gray-dark: #546E7A;

// Font-family
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

// IE hack
@media all and (-ms-high-contrast: none) {
  body,
  tooltip,
  popover {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

// bootstrapのscssファイルを読み込む。
//(今回は絶対パスで指定している。相対パスでもOK)
@import '/var/www/html/vendor/twbs/bootstrap/scss/bootstrap';

// 変数で定義されていないものは後ろに記述する(CSSの適用の優先順位の関係上)
body {
  letter-spacing: 0.1em;
  text-align: justify;
}

3. カスタマイズしたSassをCSSにコンパイルする

root@e59265f2a27b:/var/www/html# vendor/scssphp/scssphp/bin/pscss < stylesheets/scss/app.scss > stylesheets/css/app.css

4. コンパイルしたCSSをHTMLで読み込む

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 実際に表示しているsrc/new.phpへのパスを指定 -->
    <link rel="stylesheet" href="stylesheets/css/app.css">

    <title>読書ログの登録</title>
</head>

最後に

「Bootstrap かっこよく」などで検索すると、カスタマイズ例がたくさん出てくるので、あとは先人のカスタマイズを参考にすればOK。