Bootstrapをデフォルト設定のまま使用すると、いかにも"Bootstrapを使って作成した"感が出てしまうので、今回はBootstrapをカスタマイズする方法を学びました。
- カスタマイズの流れ
- 1. Sassのコンパイラをインストールする
- 2. BootstrapをSassでカスタマイズする
- 3. カスタマイズしたSassをCSSにコンパイルする
- 4. コンパイルしたCSSをHTMLで読み込む
- 最後に
カスタマイズの流れ
- Sassのコンパイラをインストールする
- BootstrapをSassでカスタマイズする
- カスタマイズしたSassをCSSにコンパイルする
- コンパイルしたCSSをHTMLで読み込む
1. Sassのコンパイラをインストールする
Sassの公式サイトではComposerを用いたインストール方法が用意されていないので、GitHubでライブラリを検索する。
ライブラリを選ぶポイント
- スター数が多いか（ユーザーが多いか）
- 直近で更新されているか（メンテナンスされているか）
今回は上記の条件を満たしているscssphp/scssphpをインストールする。
Composerを用いてコンパイラをインストール
sk@MacBook-Air part2 % docker-compose exec app composer require scssphp/scssphp
src/vendor ディレクトリ内にscssphp/scssphpが作成される。
srcディレクトリ直下に以下のディレクトリ及びファイルを作成する。（ディレクトリ名及びファイル名は任意）
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が作成されることを確認。
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。
