Bootstrap3でグリッドのみを使う:CSSを軽量カスタマイズ

Bootstrap3でグリッドのみを使う:CSSを軽量カスタマイズ

CSSフレームワークの「Bootstrap3」。

私もWEB制作に使ってますがとても便利です。
グリッドシステム、各CSSのパーツ、jQueryのパーツ。
便利な機能が山盛りです。

ですが、パーツ関連では滅多にしか使わない物も多いです。

あの便利なグリッドだけを使いたい!
他のパーツは不要。

こういう場合は、カスタマイズされたBootstrapのCSSを使います。

今回はこれのご紹介。

カスタマイズの手順

まず、Bootstrap3のカスタマイズ用ページに行きます。

Customize and download · Bootstrap

このカスタマイズページにて
まずは、Less filesのセクション。
「Toggle all」をクリックして全てのチェックを外した後、「Grid system」のみにチェックを入れます。

次に、jQuery pluginsのセクション。
ここは「Toggle all」をクリックして、全てのチェックを外したままにしておきます。

最後に、Less variablesセクション。
ここは「Reset to defaults」をクリックして、記入欄を全て空欄にします。

ページの一番下まで全て空欄となります。

そしてページ最下部のダウンロードボタンをクリックしてください。

「bootstrap.zip」という圧縮フォルダがダウンロードされます。

これを解凍すると「cssフォルダ」が入ってるので、中の「bootstrap.min.css」を使います。

サイトのheadタグ内で

<link rel="stylesheet" href="css/bootstrap.min.css">

などで読み込んでください。

これで完了。

軽量化成功

カスタマイズ後のCSSファイルはわずか「13KB」です。
フルサイズの場合は「119KB」でした。

これで大幅減量成功ですね。

取りあえず、サクッとグリッドだけ使いたいという人には便利です。

 

ken
そろそろBootstrap4を把握しないといけないなあと思ってます。どうせブログのネタにしますがw

 

関連記事
【超簡単!】Bootstrap4でグリッドのみを使う

WEBサイトをWordPressにて低価格・高品質で作成します

ご希望内容をお伺いした上で、金額・納期をお見積もりいたします。

お見積もり・ご注文はクラウドソーシングの「ランサーズ」にて承っております。
*ランサーズのアカウント(無料登録)が必要となります。

  • 使用するWordPressテーマは、当方にてライセンス権を購入済の「Swell」「Lightning有料版」「Katawara」の3つの中から選択する形となります。
  • お見積もり後、金額・納期が折り合わなければ発注しなくても大丈夫です。