HOME > WEB > bootstrap > Bootstrapをカスタマイズして軽量化する方法

Bootstrapをカスタマイズして軽量化する方法

folder_open label_outline
bootstrap

Dreamweaver cc が Bootstrap に対応したことによりCSSフレームワークにBootstrapを導入する方も増えてきたのではないでしょうか。Bootsrapは非常に便利なCSSフレームワークなのですが、ファイルが重いというデメリットがあります。モバイルファーストの観点からもなるべくファイルは軽くするのが鉄則です。また、不要なコードが多いとカスタマイズする際に非常に面倒に感じます。この記事ではbootstrapをカスタマイズし、必要最低限の機能のみを使い、軽量化する方法をご紹介します。

Customize and download

bootstrapオフィシャルサイトの「customize」ページでは、bootstrapの内容の必要なもののみを選択してダウンロードするこができます。

https://getbootstrap.com/docs/3.3/customize/

bootstrap カスタマイズ

 

各項目の解説

Less files

Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the CSS and Components pages in the docs.

意訳:BootstarpのカスタムビルドにコンパイルするLessファイルを選択してください。 どのファイルを使用するのか分からない場合はCSSとコンポーネントのページをご参考下さい。

Common CSS

Print media styles印刷時に適応されるスタイル
Typography<h1 >~<h6 >、<p>、<strong >、<small >のスタイル
Code<code>、<pre>、<var>、<kbd>、<samp>のスタイル
Grid systemグリッドシステムに用いられるスタイル
Tables<table>のスタイル
Forms <form>のスタイル
Buttons <a>、<button>、<input>のスタイル
Responsive utilities ブレークポイント毎の表示/非表示に用いられるスタイル

 

Components

GlyphiconsBootstrapアイコンアイコン
Button groups ボタン グループ ボタン グループ
 Input groups インプット グループ インプット グループ
 Navs ナビゲーション ナビゲーション
 Navbar グローバルナビ グローバルナビ
 Breadcrumbs パンくずリスト パンくずリスト
 Pagination ページネーション ページネーション
 Pager ページャー ページャー
 Labels ラベル ラベル
 Badges バッジ バッジ
 Jumbotron ジャンボトロン ジャンボトロン
Thumbnails サムネイル サムネイル
 Alerts アラート アラート
Progress bars プログレスバー プログレスバー
Media items メディア アイテム メディアアイテム
 List groups リストグループ リストグループ
 Panels パネル パネル
Responsive embed 埋め込みのレスポンシブ化 埋め込みレスポンシブ
 Wells インセットエフェクト Wells
 Close icon クローズアイコン クローズアイコン

 

JavaScript components

Component animations
(for JS)(includes Collapse)
 アニメーションコンポーネント
Dropdownドロップダウン ドロップダウン
Tooltip ツールチップ ツールチップ
Popover ポップオーバーポップオーバー
Modal モーダルウインドウモーダルウインドウ
Carousel カルーセル カルーセル

jQuery plugins

Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the JavaScript page in the docs.

意訳:カスタムJavaScriptファイルに含めるjQueryプラグインを選択してください。 何を選択するかわからない場合はJavaScriptのページをご参考下さい。

Linked to components

Alert dismissalアラートメッセージの制御
Advanced buttonsボタンの制御
Carousel functionalityカルーセルの制御
Dropdownsドロップダウンの制御
Modalsモーダルウインドウの制御
Tooltipsツールチップの制御
Popovers (requires Tooltips)ポップオーバーの制御
Togglable tabsタブの制御

 

Magic

Affix位置固定制御
Collapse トグル動作制御
Scrollspy navスクロール制御
Transitions(required for any kind of animation) アニメーション制御

 

 

カスタマイズ例

今回下記のように設定しました。

主にグリッドシステム、フォーム、ボタン、Bootstrapアイコン、グローバルナビ、埋め込みレスポンシブ化、ドロップダウンのみを残し、他のチェックは外しました。

less

 

 

ダウンロード

ページ最下部の「Compile and Download」をクリックするとカスタマイズされたBootstrapがダウンロードされます。

ダウンロード後のファイルを比較すると大幅に軽減されていることが解ります。

元ファイルカスタマイズ後
bootstrap.min.css119KB62.4KB
bootstrap.min.js36.4KB7.04KB

 

 

まとめ

Bootstrapは非常に有能なCSSフレームワークですが、ファイルが重い、デザインのカスタマイズのし難いといった理由で導入に踏み切れない方もいらっしゃるかと思います。Dreamweaverをお使いでしたらBootstarpのグリッドシステムを活用することによって、レスポンシブサイトの構築が非常に効率的に進めることができます。ぜひBootstrapをカスタマイズ・軽量化してサイト作成にお役立て下さい。