Bootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料ツール -Bootstrap Editor
Post on:2016年3月28日
Bootstrapはページ作成に役立つ機能がたくさん用意されており便利ですが、ファイルをダウンロードしたり、テンプレートを用意したりなど、始めるまでに少し手間がかかってしまいます。
そんな手間をすべて解消し、初心者の人でもプロの人でもすぐにBootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料オンラインツールを紹介します。

Bootstrap Editorの特徴
Bootstrapを初心者でも手軽に使えるよう開発された日本製のオンラインツールで、ダウンロードやインストールなどの準備は不要、すぐにBootstrapでさまざまなページを作成できます。
Emmetなどにも対応しているので、使い慣れた人にも便利です。
作者様が実際に、Bootstrapの講習する中で「こういうツールが無いと初心者には難しい」と痛感し、作成にいたったそうです。

Bootstrapのテンプレート10種類
Bootstrap Editorの機能
-
- Code
- エディタのテーマを変更できます。
-
- Template
- Bootstrapのテンプレートを選択できます。
-
- Nomal
- Bootstrapのテンプレートのテーマを変更できます。
-
- Live View
- 編集したコードをすぐにブラウザで表示確認できます。
- スマホ・タブレット・デスクトップの表示サイズに対応。
-
- Save/Open
- Saveは編集したコードの一時保存、Openは保存したコードを再表示します。
-
- Download
- 編集したデータのHTML一式をダウンロードできます。
Bootstrap Editorの使い方
使い方は簡単、登録など面倒なことは不要です。
ブラウザで、下記ページにアクセスします。

「Let's Start」をクリックすると、すぐにBootstarp Editorに移動します。

Bootstrap Editorの基本画面
編集ウインドウには、4種類のテーマが用意されています。
自分がコードを見やすいものに変更しましょう。

エディタのテーマ
テンプレートは全部で、10種類。
練習用をはじめ、スターター用・グリッド用など、さまざまなテンプレートが用意されています。

Bootstrapのテンプレート
デザインをカスタマイズしたい時は、まずはテーマをいろいろ変更してみるとよいでしょう。簡単にカラーが変更できます。

Bootstrapのテンプレートのテーマ
作成したテンプレートは一時保存したり、ダウンロードすることができます。
※一時保存したファイルを利用することも可能です。

編集したデータのHTML一式をダウンロード
Bootstrap Editorの作者様は、書籍も出版されています。
sponsors