これならかなり簡単！Bootstrap 3, 4 betaに対応、テンプレートをカスタマイズして利用できる -Bootstrap4 Editor
Post on:2017年8月22日
sponsors
2017年8月にBootstrap 4はようやくベータ版がリリースされました。
そんなBootstrap 4に早くも対応した、Bootstrapのさまざまなテンプレートを簡単にカスタマイズして利用できるオンラインサービスを紹介します。
Webサイト、ランディングページ、ブログのテンプレートをはじめ、ナビゲーションやカード型コンポーネントなど、さまざまなテンプレートを利用できます。
日本人クリエイターによる国産のツールで、先日Bootstrap 4 betaにも対応されました。
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」をクリックするとファイル一式をダウンロードできます。
テンプレートのファイル一式をダウンロード
sponsors
