Bootstrapをカスタマイズして軽量化する方法
Dreamweaver cc が Bootstrap に対応したことによりCSSフレームワークにBootstrapを導入する方も増えてきたのではないでしょうか。Bootsrapは非常に便利なCSSフレームワークなのですが、ファイルが重いというデメリットがあります。モバイルファーストの観点からもなるべくファイルは軽くするのが鉄則です。また、不要なコードが多いとカスタマイズする際に非常に面倒に感じます。この記事ではbootstrapをカスタマイズし、必要最低限の機能のみを使い、軽量化する方法をご紹介します。
Contents
Customize and download
bootstrapオフィシャルサイトの「customize」ページでは、bootstrapの内容の必要なもののみを選択してダウンロードするこができます。
https://getbootstrap.com/docs/3.3/customize/
各項目の解説
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
| Glyphicons | Bootstrapアイコン |  |
| Button groups | ボタン グループ |  |
| Input groups | インプット グループ |  |
| Navs | ナビゲーション |  |
| Navbar | グローバルナビ |  |
| Breadcrumbs | パンくずリスト |  |
| Pagination | ページネーション |  |
| Pager | ページャー |  |
| Labels | ラベル |  |
| Badges | バッジ |  |
| Jumbotron | ジャンボトロン |  |
| Thumbnails | サムネイル |  |
| Alerts | アラート |  |
| Progress bars | プログレスバー |  |
| Media items | メディア アイテム |  |
| List groups | リストグループ |  |
| Panels | パネル |  |
| Responsive embed | 埋め込みのレスポンシブ化 |  |
| Wells | インセットエフェクト |  |
| Close icon | クローズアイコン |  |
JavaScript components
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アイコン、グローバルナビ、埋め込みレスポンシブ化、ドロップダウンのみを残し、他のチェックは外しました。
ダウンロード
ページ最下部の「Compile and Download」をクリックするとカスタマイズされたBootstrapがダウンロードされます。
ダウンロード後のファイルを比較すると大幅に軽減されていることが解ります。
| 元ファイル | カスタマイズ後 | |
| bootstrap.min.css | 119KB | 62.4KB |
| bootstrap.min.js | 36.4KB | 7.04KB |
まとめ
Bootstrapは非常に有能なCSSフレームワークですが、ファイルが重い、デザインのカスタマイズのし難いといった理由で導入に踏み切れない方もいらっしゃるかと思います。Dreamweaverをお使いでしたらBootstarpのグリッドシステムを活用することによって、レスポンシブサイトの構築が非常に効率的に進めることができます。ぜひBootstrapをカスタマイズ・軽量化してサイト作成にお役立て下さい。
