BootstrapやAMPなどのテンプレートを簡単にカスタマイズできる無料の国産サービス -Framework Template Editor
Post on:2018年1月15日
sponsors
Bootstrap, Foundation, Materializeなどのフレームワークは手軽に利用できるとは言え、それでも一から始めるのは面倒です。これらのフレームワークを簡単にカスタマイズして利用できる無料の国産サービスを紹介します。
ランディングページやブログをさくっと作りたい、ナビゲーションやカード型コンポーネントを利用したいなど、さまざまなテンプレートやテーマを利用できます。
Framework Template Editorの特徴
Framework Template Editorは、BootstrapやFoundationなどの人気が高いフレームワークを初心者でも手軽に使えるよう開発された日本製のオンラインツールです。
ダウンロードやインストールなどの準備は不要、ログインや登録などの面倒なことも一切不要、完全無料ですぐにさまざまなページを作成できます。
Framework Template Editorの初期画面
現在利用できるテンプレートは、下記の通り。
- Bootstrap4のテンプレート
- Foundationのテンプレート
- Materializeのテンプレート
- AMPのテンプレート
元のテンプレートは英語ですが、もちろん日本語のページとして利用できます。
Framework Template Editorで利用できるテンプレート
Framework Template Editorの機能
Framework Template Editorには、下記の機能が用意されています。
-
- Code
- エディタのテーマを変更できます。
-
- Template
- さまざまなテンプレートを利用できます。
-
- Image
- ローカルの画像を利用できます。
-
- Responsive
- スマホ・タブレット・デスクトップの表示サイズに対応。
-
- Preview
- 編集したコードをすぐにブラウザで表示確認できます。
-
- Download
- 編集したデータのファイル一式をダウンロードできます。
-
- Save/Load/Clear
- 編集したコードの一時保存、保存したコードを再表示、コードのクリアが可能。
Framework Template Editorの使い方
使い方は簡単で、登録など面倒なことは不要です。
まずは、下記ページにアクセスします。
上部の「Template」から、さまざまなテンプレートを選択できます。
テンプレートの選択
「Bootstrap Landing Page 1」を選択してみました。
左パネルはコードで、HTML, CSS, JavaScriptが編集でき、右パネルはリアルタイムに結果が表示されます。
ランディングページを編集
エディタには、4種類のテーマが用意されています。
GitHubやDreamweaver、ダークもあるので、お好みのテーマをご利用ください。
エディターのテーマの選択
プレビューを変更することも可能です。
上部の「Responsive」をクリックします。
プレビューの変更
編集したコードは、セーブ・ロード・クリアが可能で、「Download」をクリックするとファイル一式をダウンロードできます。
テンプレートのファイル一式をダウンロード
sponsors
