BootstrapやAMPなどのテンプレートを簡単にカスタマイズできる無料の国産サービス -Framework Template Editor

Bootstrap, Foundation, Materializeなどのフレームワークは手軽に利用できるとは言え、それでも一から始めるのは面倒です。これらのフレームワークを簡単にカスタマイズして利用できる無料の国産サービスを紹介します。

ランディングページやブログをさくっと作りたい、ナビゲーションやカード型コンポーネントを利用したいなど、さまざまなテンプレートやテーマを利用できます。

サイトのキャプチャ

Framework Template Editor

Framework Template Editorの特徴

Framework Template Editorは、BootstrapやFoundationなどの人気が高いフレームワークを初心者でも手軽に使えるよう開発された日本製のオンラインツールです。
ダウンロードやインストールなどの準備は不要、ログインや登録などの面倒なことも一切不要、完全無料ですぐにさまざまなページを作成できます。

サイトのキャプチャ

Framework Template Editorの初期画面

現在利用できるテンプレートは、下記の通り。

  • Bootstrap4のテンプレート
  • Foundationのテンプレート
  • Materializeのテンプレート
  • AMPのテンプレート

元のテンプレートは英語ですが、もちろん日本語のページとして利用できます。

サイトのキャプチャ

Framework Template Editorで利用できるテンプレート

Framework Template Editorの機能

Framework Template Editorには、下記の機能が用意されています。

Framework Template Editorの機能
  1. Code
    エディタのテーマを変更できます。
  2. Template
    さまざまなテンプレートを利用できます。
  3. Image
    ローカルの画像を利用できます。
  4. Responsive
    スマホ・タブレット・デスクトップの表示サイズに対応。
  5. Preview
    編集したコードをすぐにブラウザで表示確認できます。
  6. Download
    編集したデータのファイル一式をダウンロードできます。
  7. Save/Load/Clear
    編集したコードの一時保存、保存したコードを再表示、コードのクリアが可能。

Framework Template Editorの使い方

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

サイトのキャプチャ

Framework Template Editor

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

サイトのキャプチャ

テンプレートの選択

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

サイトのキャプチャ

ランディングページを編集

エディタには、4種類のテーマが用意されています。
GitHubやDreamweaver、ダークもあるので、お好みのテーマをご利用ください。

サイトのキャプチャ

エディターのテーマの選択

プレビューを変更することも可能です。
上部の「Responsive」をクリックします。

サイトのキャプチャ

プレビューの変更

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

サイトのキャプチャ

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

sponsors

top of page

©2018 coliss