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