びっくりするほど簡単!HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
Post on:2018年4月20日
さくっと短時間で、慣れれば1分! デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。
HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041701.png)
Froala Design Blocks
Froala Design Blocks -GitHub
Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。
作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。
短時間で、Bootstrap 4ベースのページを作成してみる
という訳で、作成してみました。
組み合わせに悩まなければ、1分でページを作成できます。
まずは、下記ページにアクセス!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041702-01.png)
右パネルにはヘッダ・フッタ・コンテンツ・フォームなどのコンポーネントがあり、左パネルにドラッグ&ドロップして、ページを組み立てます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041702-02.png)
好きなコンポーネントを組み合わせて、ページを作成
コンポーネントはすべてレスポンシブ対応で、左パネルの下部から各デバイスでの表示を確認できます。
組み合わせが終わったら、右下の「Download」をクリック!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041702-04.png)
終わったら、ダウンロード
ファイルをダウンロードするには、メールアドレスが必要です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041702-05.png)
ダウンロードページ
ダウンロードしたファイルをブラウザで表示してみました。
組み合わせた通りのデザインです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041702-06.png)
ダウンロードしたHTMLファイルを表示
テキストや画像などはダミーなので、自分で使用するテキストや画像に変更して、ご利用ください。
対応ブラウザは、下記の通り。
- IE 10+
- Edge 14+
- Chrome
- Firefox
- Opera
- Safari 6+
- Safari iOS 7.0+
- Android 6.0+
用意されているコンポーネント
Froala Design Blocksでは、170種類以上のレスポンシブ対応のコンポーネントが用意されています。
これらを自由に組み合わせて、利用できます。
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-06.png)
コンポーネント一覧: Header
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-05.png)
コンポーネント一覧: Footer
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-01.png)
コンポーネント一覧: Call to Action
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-02.png)
コンポーネント一覧: Contacts
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-03.png)
コンポーネント一覧: Contents
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-04.png)
コンポーネント一覧: Features
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-07.png)
コンポーネント一覧: Forms
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-08.png)
コンポーネント一覧: Pricings
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-09.png)
コンポーネント一覧: Teams
![用意されているコンポーネント](http://coliss.com/wp-content/uploads-201802/2018041703-10.png)
コンポーネント一覧: Testimonials
sponsors