なんだかんだで便利なフレームワークである「Bootstrap4」。好き嫌いは分かれそうですが、個人的にはよく使ってます。
Bootstrap4が使いにくい！という理由の一つに「デザイン面での微調整ができない」というものがあります。例えば「行間が狭い！」とか「もっとここはスペース空けたい！」といった匙加減の問題ですね。
これを調整するためにわざわざ上書き用のCSSを別途準備するのが面倒という話なわけですが、実のところBootstrap4ではそのあたりの微調整を変更する機能が予め準備されています。
今回はその方法をご紹介します。
「variables.scss」を利用した設定変更
Bootstrap4のソースファイル内にある「_variables.scss」にはBootstrap4をビルドする際に変更できる「変数」とその初期値が羅列されている。
基本この「_variables.scss」に書かれている変数は好きな値に変更可能。しかもその変更方法も併記されている。（まあ、英語ですけどね^^）
例えば、よく使う「Spacing(スペーシング)」ユーティリティである「.m-1」とか「.pb-3」といったmargin（マージン）、padding（パッディング）を直接指定できるクラスですが、これ初期設定では幅の設定が微妙すぎて非常に使いにくい。
そこでこの際「.*-1＝1rem」と設定値を変更してやると途端にわかりやすく使いやすくなる。
やり方は意外に簡単で「_variables.scss」内に記述された変数「$spacer」「$spacers」をお好みで変更してやればよい。
具体的には「_bootstrap-customize.scss」のようなファイルを用意して
_bootstrap-customize.scss
// スペーサークラスの再設定と拡張
$spacer: 1rem;
$spacers: ();
$spacers: map-merge(
(
0: 0,
1: $spacer,
2: ($spacer * 2),
3: ($spacer * 3),
4: ($spacer * 4),
5: ($spacer * 5),
6: ($spacer * 6),
7: ($spacer * 7),
8: ($spacer * 8),
9: ($spacer * 9),
10: ($spacer * 10),
25: ($spacer * 0.25),
50: ($spacer * 0.5),
),
$spacers
);
// bootstrapの本体ソースをインポート
@import "bootstrap.scss";と記述し、「_variables.scss」内の変数を指定する形でビルドしてあげればよい。
結局なにをしているかというと、「.*-1」を基準値「1rem」とし、.*-2がその2倍＝2rem、.*-3が3倍＝3rem・・・となるように変更している。これで幅の広さが感覚的にぐっとわかりやすくなる、はず。
ちなみに「$spacers」には整数しか指定できないので、今回の例では、.*-25を0.25倍＝0.25remとし、.*-50を0.5倍＝0.5remとして利用している。
これによって本来、*-0～*-5までの6段階しかなかったスペース幅も、*-0～*-10の11段階に0.25と0.5を加えた13段階での指定が可能となる。しかもこの設定は「.ｍ-*」「.ｐ-*」のいずれにも共通で反映し、当然「.mb-1」「.px-md-5」といった方向やレスポンシブ指定でも問題なく利用できる。
これだけ柔軟かつシンプルな指定ができるなら、スペースの微調整はもうHTML側の記述だけでも十分可能となる。
「あー、ここの幅をもうあと1rem広くしたいのに～！」というときに、わざわざcssファイル側をいじらなくても済むようになるので意外に便利だったりします。