これならかなり簡単!Bootstrap 3, 4 betaに対応、テンプレートをカスタマイズして利用できる -Bootstrap4 Editor

2017年8月にBootstrap 4はようやくベータ版がリリースされました。
そんなBootstrap 4に早くも対応した、Bootstrapのさまざまなテンプレートを簡単にカスタマイズして利用できるオンラインサービスを紹介します。

Webサイト、ランディングページ、ブログのテンプレートをはじめ、ナビゲーションやカード型コンポーネントなど、さまざまなテンプレートを利用できます。

日本人クリエイターによる国産のツールで、先日Bootstrap 4 betaにも対応されました。

サイトのキャプチャ

Bootstrap4 Editor

Bootstrap4 Editorの特徴

Bootstrapを初心者でも手軽に使えるよう開発された日本製のオンラインツールで、ダウンロードやインストールなどの準備は不要、すぐにBootstrapでさまざまなページを作成できます。

作者様が実際に、Bootstrapの講習する中で「こういうツールが無いと初心者には難しい」と痛感し、作成にいたったそうです。ブラウザでアクセスすれば、同じ画面を操作し、学ぶことが可能なので、セミナーや勉強会にも便利です。

サイトのキャプチャ

Bootstrap4 Editorの初期画面

先日リリースされたBootstrap 4 betaにも対応しており、Bootstarp 3のテンプレートやGoogleマップにも対応しています。

サイトのキャプチャ

Bootstrapのテンプレート

Bootstrap4 Editorの機能

Bootstrap4 Editorの上部メニューから操作ができます。

  • Code
    エディタのテーマを変更できます。
  • Template
    Bootstrapのさまざまなテンプレートを利用できます。
  • Image
    ローカルの画像を利用できます。
  • Color
    Bootstrapのテンプレートのテーマを変更できます。
  • Live View
    編集したコードをすぐにブラウザで表示確認できます。
    スマホ・タブレット・デスクトップの表示サイズに対応
  • エラー表示
    JavaScriptのエラーをconsole.logと同様に表示します。
  • Save/Open/Clear
    編集したコードの一時保存、保存したコードを再表示、コードのクリアが可能です。
  • Download
    編集したデータのHTML一式をダウンロードできます。

Bootstrap4 Editorの使い方

使い方は簡単で、登録など面倒なことは不要です。
まずは、下記ページにアクセスします。

サイトのキャプチャ

Bootstrap4 Editor
Bootstrap 3は、Bootstrap Editorから。Googleマップはどちらでも利用できます。

上部の「Template」から、Bootstrapのさまざまなテンプレートを選択できます。

サイトのキャプチャ

テンプレートの一覧

「Landing Page」を選択してみました。
左パネルはコードで、HTML, CSS, JavaScriptが編集できます。右パネルはリアルタイムに結果が表示されます。

サイトのキャプチャ

ランディングページの作成

エディタには、4種類のテーマが用意されています。
使い慣れたテーマが利用できるのは、嬉しいポイントですね。

サイトのキャプチャ

Tommorow Nightを選択

テンプレートをカスタマイズするには、もちろんコードを変更することも可能ですが、テーマカラーを変更することも可能です。

サイトのキャプチャ

テーマカラーを変更

編集したコードは、セーブ・ロード・クリアが可能で、「Download」をクリックするとファイル一式をダウンロードできます。

サイトのキャプチャ

テンプレートのファイル一式をダウンロード

top of page

©2017 coliss