開発

bootstrapのブレークポイントを削減する方法

作成日： 2018年12月21日

📝 はじめに本記事はBootstrapのCSS容量削減についての一考です。

bootstrapのグリッドは

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

のようにブレークポイントが設定されています。

しかし、これも画面いっぱいに表示する管理画面のダッシュボードやWebアプリで無ければここまで細かく設定する必要も無いと思います。

Bootstrapで作成された管理画面事例

そこで、これもbootstrapの_variables.scssの配列を調整して数を減らすことで、全体の容量を削減することが出来ます。

今回はxlを削除して、mdとlgに幅を持たせています。

SASS _variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 992px,
  lg: 1300px,
) !default;

$container-max-widths: (
  sm: 540px,
  md: 960px,
  lg: 1280px,
) !default;

これで新たに 10kb程度 削減出来ました。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

2,376 円～ 2023年6月9日 6:54 AM時点のAmazon.co.jp 価格 -詳細はこちら-価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点でAmazon.co.jpに表示されている価格および発送可能時期の情報が適用されます。

CSSをより便利に、効率的に書ける「Sass（サス）」の解説書を、最新のコーディング環境にあわせて大幅刷新！Sassは導入が面倒そう。はじめたいけどあと一歩が踏み出せない。CSSを今よりも効率的に書きたい。こうした方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。CSSをHTMLの構造に合わせて入れ子で書いていく「ネスト」や、便利な「変数」や「演算」などのSassの基本機能はもちろん、筆者が実際に仕事の現場で使っている実践的なテクニックまで、この一冊で網羅しています。

amazonでチェック

本サイト上で表示されるコンテンツの一部は、アマゾンジャパン合同会社またはその関連会社により提供されたものです。これらのコンテンツは「現状有姿」で提供されており、随時変更または削除される場合があります。