HTML
CSS
JavaScript
bootstrap
Web

「Framework Template Editor」だと1秒でbootstrapやFoundationを使ったページが作れる話

More than 1 year has passed since last update.

Framework Template Editor.png

URL:http://www.venezia-works.com/bst/


対象者

WEBページ作成初心者の方

ページ作成に工数をできるだけ削減したい方

bootstrap、AMP、Foundation、Materializeを試したい方


この記事を読んでできること

オンライン上でbootstrapやAMP、Foundation、Materializeを試すことができます。

コードをそのまま流用して素早く開発することができます。


Framework Template Editorとは

URL:http://www.venezia-works.com/bst/

オンライン上で作業することができるエディタです。

ユーザー登録不要であり、ローカルにインストールすることなく手軽にコードを試すことができます。

緑色の「テンプレートを編集」の

ボタンを押すとすぐに始めれます。


テンプレート機能が充実!

ブログ、ランディングページなど豊富なテンプレートがすでに用意されています。

最初から作るよりもテンプレートを使用することですぐに作成することができます。

bootstrapのテンプレート

【ブログテンプレート】

6.PNG

【ランディングページテンプレート】

5.PNG

【ポートフォリオテンプレート】

Framework Template Editor2.png

AMPのテンプレート

【AMPレシピブログテンプレート】

bootstrapeditor_amp2.PNG

【AMP The Scenic テンプレート】

bootstrapeditor_amp3.PNG

Foundationのテンプレート

【エージェンシーテンプレート】

Framework Template Editor3.png

【プロダクトページテンプレート】

Framework Template Editor4.png

Materializeのテンプレート

Framework Template Editor5.png

JavaScriptのテンプレート

【GoogleMAPテンプレート】

11.png

こちらは、「GoogleMap(住所検索)」を選び、Previewをクリックすると表示されます。

入力フォームつきで、「東京都」などと入力するとすぐにマップに表示してくれます。

GoogleMAPを使用したアプリをつくりたいけどページの作り方がわからないという方に

ぜひ使ってほしいテンプレートです。

【メモ帳アプリのテンプレート】

Framework Template Editor6.png


他にも便利な機能

1.CODE

エディターのカラー選択(Emmet)

2.Template

Bootstrapのテンプレート選択

3. Image

画像選択から追加可能

4. Nomal

Bootstrapテンプレート色を選択

5.Live View

編集中のCODEをプレビュー(PC,Tablet,Phone,CodeOnry)

6.エラー表示

JavaScriptエラーを表示

7.Save/Open/Clear

「Save」は編集中のデータを一時保存します。「Open」は保存データを再表示します。「Clear」は保存データを削除します。

8.Download

編集中データをファイルダウンロード


さいごに

bootstrap、AMP、Foundation、Materializeをオンラインで試したり、

手軽にさくさくとページを作成する時に、Framework Template Editorをぜひ活用してみてください!