これなら簡単！Bootstrap 4.0のデザインがカスタマイズできる商用でも無料のオンラインツール -Bootstrap Magic

Bootstrap 4.0のテンプレートやコンポーネントのデザインを確認しながら、定義されている変数を簡単にカスタマイズできるオンラインツールを紹介します。

BootstrapでWebサイトやブログを作成する時に、BootstrapのUIコンポーネントを利用する時に、Bootstrapのテーマを作成する時に、便利なオープンソースの無料ツールです。

Bootstrap Magic
Bootstrap Magic -GitHub

• Bootstrap Magicの特徴
• Bootstrap Magicの使い方

Bootstrap Magicの特徴

• Bootstrap 4.0対応

  最新のBootstrap 4.0のすべてのテンプレート・コンポーネントに対応しています。

• Sass対応

  BootstrapはSassにも対応しているので、Bootstrap　Magicでも同様にSassの変数が利用できます。

• デザインのカスタマイズ

  オンラインツールではBootstrapで定義されている変数を確認しながらカスタマイズできます。

• 色の変更

  カラーピッカーが利用できるので、簡単にカラーを変更できます。

• HTML Editor

  HTML Editorも利用できるので、コードベースで変更も可能です。

• CSSとSCSSのダウンロード

  作成したデザインは、CSSとSCSSファイルでダウンロードできます。

• オープンソース

  Bootstrap MagicはMITライセンスで、無料で利用できます。必要に応じて再利用もできます。

Bootstrap Magicの使い方

Bootstrap Magicの使い方は簡単です。
登録などの面倒なことも一切不要です。

まずは、下記ページにアクセス。

Bootstrap Magic

「Create Your Theme」をクリックします。

最初に表示されるのは、変数エディターです。
ここではBootstrap 4.0で定義されている変数を確認しながら、カスタマイズできます。

Bootstrap Magic Theme Editor: 変数エディター

左パネルから変数を選択、もしくは右パネルでコンポーネントを表示すると、その変数が表示されるので、自由に変更できます。

Bootstrap Magic Theme Editor: 変数エディター

変数はカラーをはじめ、フォント、グリッド、スペース、ナビゲーション、カードなど、さまざまな要素・コンポーネントが揃っています。

Bootstrap Magic Theme Editor: 変数エディター

上部の「HTML Editor」をクリックすると、ページのデザインにどのように反映されたか確認できます。

Bootstrap Magic Theme Editor: HTMLエディター

さまざまなテンプレートやコンポーネントが用意されており、コードベースでカスタマイズもできます。

Bootstrap Magic Theme Editor: HTMLエディター

例えば、カルーセルのコンポーネントを選択してみます。
上部の「Editor」でHTMLとCSSのコードを変更でき、「Preview」で表示を確認できます。

Bootstrap Magic Theme Editor: カルーセル

変数で背景を変更してみました。

Bootstrap Magic Theme Editor: 変数の変更

さきほどのカルーセルを表示すると、変更した背景が適用されています。

Bootstrap Magic Theme Editor: カルーセル

デザインが完成したら、上部の「Save」をクリックすると、CSSとSCSSファイルがダウンロードできます。

Bootstrap Magic Theme Editor: ファイルのダウンロード