調査・研究レポートReport

Bootstrap4を利用するときにブレイクポイントを変更したいなぁとか、12分割よりももっと細かくカラムを分けることができればと考えたことはないでしょうか？メモ書き程度にどの変数を書き換えればOKかということについて書いてみたいと思います。

用意されている変数

実はBootstrap4はSASSに完全対応していて、SASSのソースコードをダウンロードもできるため、SASSのソースコードからコンパイルする際に特定の変数を書き換えてあげれば簡単に自分好みに変更することができます。例えば、ウェブサイト制作案件によっては、デザインの最大コンテンツ幅がデフォルトの1170pxよりも大きい場合もあるかもしれません。そんな時には、以下の変数を書き換えてコンパイルしなおせばOKです。

上記の設定によって、グリッドのカラム数を通常の12から120まで増やすことができます。これによって、12分割に収まらないデザインをBootstrapの枠にはめてコーディングすることが可能となり、工数削減に大きな効果があると個人的には考えています。

ブレイクポイントとコンテナ幅は別の変数で管理されているため、どちらの変数も設定を変えてあげる必要があります。これによって最近の大画面化に伴ってデザインデータの横幅も大きくなる一方なので、例えば1500pxでデザインされたデザインをBootstrap4の枠にはめてコーディングすることなどが可能となります。

参考URL

Bootstrap4移行ガイド

https://cccabinet.jpn.org/bootstrap4/layout/grid#variables

上記のページ内に変更すべき変数が乗っていますのでよければご参照下さい。その他にも余白を定義している変数などたくさんありますので、Bootstrap4を使いこなすためには本当のところデザイナーがbootstrap4について理解している必要があるというところが本当のところです。一定のルールに従ってデザインされている秩序立ったページを制作していく上では非常に便利なCSSフレームワークなので有効活用できればコーディングの工数を一気に減らせる可能性を秘めています。

まとめ

上記参考にあげさせていただいたサイトに一通り目を通すと何ができるかがわかるのですが、コーダーさんよりもどちらかといえばデザイナーさんに目を通していただきたいです。Bootstrapにどんな機能があるのかを知ることによって、どの値をどう設定変更して組んでほしいかを明確に指示が出せる程度まで理解されているデザイナーさんとの仕事は非常に話が早いです。現実として、そこまでコーディングのことがわかるデザイナーさんは非常に貴重ではありますが、私の希望としてはそこまで理解されているとコーダー・マークアップエンジニアの仕事が楽になるという感覚は非常に大きいですね。

指示の出し方としても、ここは何ピクセルとかではなく、スペーサー変数から算出される各ブレイクポイント毎の１～５の余白という考え方で指示が出せるようになれば、横幅が決まっているDTPとは違ったウェブならではの世界というものがより明確に見えてくるのではないかと考えております。

コーディングを担当するコーダーの手元にデザインが届く前段階でコーディングの工数の大部分は決まってしまっているという認識をデザイナーが持つことによって、これまでとは少し違ったデザインの考え方に到達できる可能性も否定できませんね。もちろん、ルールの無い自由なデザインというのも一つの方向性としてありますのですべてがBootstrapに従うべきという考え方はもちろん間違っています。

ただ、一般的に秩序立っているデザイン感を持つウェブサイトを制作していく上では工数削減において大きく効果を発揮することができるので、学びを深めていくことができればデザイナーもマークアップを担当するエンジニアも幸せかと思います。

コーダー・マークアップエンジニアだけではなく、デザイナー職の方にも是非理解を深めて頂くことでウェブ制作全体の工数はさらに削減することが可能ですし、品質担保も容易になります。ぜひトライしていただければと思います。