Bootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料ツール -Bootstrap Editor

Bootstrapはページ作成に役立つ機能がたくさん用意されており便利ですが、ファイルをダウンロードしたり、テンプレートを用意したりなど、始めるまでに少し手間がかかってしまいます。

そんな手間をすべて解消し、初心者の人でもプロの人でもすぐにBootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料オンラインツールを紹介します。

サイトのキャプチャ

Bootstrap Editor

Bootstrap Editorの特徴

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

作者様が実際に、Bootstrapの講習する中で「こういうツールが無いと初心者には難しい」と痛感し、作成にいたったそうです。

サイトのキャプチャ

Bootstrapのテンプレート10種類

Bootstrap Editorの機能

  1. Code
    エディタのテーマを変更できます。
  2. Template
    Bootstrapのテンプレートを選択できます。
  3. Nomal
    Bootstrapのテンプレートのテーマを変更できます。
  4. Live View
    編集したコードをすぐにブラウザで表示確認できます。
    スマホ・タブレット・デスクトップの表示サイズに対応。
  5. Save/Open
    Saveは編集したコードの一時保存、Openは保存したコードを再表示します。
  6. Download
    編集したデータのHTML一式をダウンロードできます。

Bootstrap Editorの使い方

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

サイトのキャプチャ

Bootstrap Editor

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

サイトのキャプチャ

Bootstrap Editorの基本画面

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

サイトのキャプチャ

エディタのテーマ

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

サイトのキャプチャ

Bootstrapのテンプレート

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

サイトのキャプチャ

Bootstrapのテンプレートのテーマ

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

サイトのキャプチャ

編集したデータのHTML一式をダウンロード

Bootstrap Editorの作者様は、書籍も出版されています。

本のキャプチャ

レスポンシブWebデザイン 「超」実践デザイン集中講義
[Amazonでみる]
[楽天でみる]

著:
山崎 大助
出版社:
SBクリエイティブ
発売日:
2013/3/28

sponsors

top of page

©2024 coliss