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

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

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

サイトのキャプチャ

Bootstrap Magic
Bootstrap Magic -GitHub

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: ファイルのダウンロード

top of page

©2017 coliss