BlockStrap Editor Mac版
ドラッグ&ドロップでBootstrapサイトを瞬時に構築
コードを書かない。クラス名も覚えない。それでも、プロ品質のレスポンシブページが完成する。
Mac専用 ノーコードBootstrapエディタ
ノーコード対応 Bootstrap 5対応 軽量・高速
BlockStrap Editor とは
BlockStrap Editorは、Bootstrap 5に特化したノーコード/ローコードのブロックエディタです。
「Bootstrapを使いたいけど、クラス名が多すぎて覚えられない…」「プロトタイプを素早く作りたいのに、コーディングに時間がかかりすぎる…」
そんな悩みを解決します。サイドバーから豊富なコンポーネントをドラッグ&ドロップするだけで、レスポンシブなWebページが直感的に完成。リアルタイムで生成されるHTMLコードは、そのままプロジェクトにエクスポートできます。
Vanilla JavaScript製だから、軽量かつ高速に動作します。
こんな方におすすめ
Bootstrapを学習中の方
クラス名を覚えるのが面倒…視覚的に理解しながら学びたい方に最適です。
デザイナー・ディレクター
エンジニアとの連携で、プロトタイプを素早く作成したい方におすすめ。
LP量産が必要なマーケター
ランディングページを短時間で量産したい方の強い味方です。
プログラミング講師・学生
HTMLの学習教材として、コードと結果を同時に確認できます。
主な機能
0150種類以上のプリセットコンポーネント
ボタン、カード、ナビゲーション、フォームなど、Webサイト構築に必要なコンポーネントを網羅。
ドラッグ&ドロップで即配置
ダブルクリックで素早く追加
Row、Card、Section内に自由にネスト可能
02150種類以上のBootstrap Icons内蔵
必要なアイコンを検索して、ワンクリックで配置。細かいカスタマイズも自由自在です。
検索機能 - 必要なアイコンを瞬時に発見
サイズ調整 - 5段階から選択(Small〜XX-Large)
カラー変更 - 8色のテーマカラーをワンクリック適用
テキスト付加 - アイコンとテキストの組み合わせも簡単
03リアルタイムプロパティ編集
初心者から上級者まで満足できる、柔軟な編集機能を搭載しています。
Quick Styles - マージン・パディング・背景色をワンクリック追加
クラス直接編集 - 上級者も満足のカスタマイズ性
HTML編集モード - 細部まで完全にコントロール
04即座にコード出力
編集内容がリアルタイムでHTMLに変換。すぐに実プロジェクトで使えます。
リアルタイムプレビュー - 編集内容が即座にHTMLコードに反映
ワンクリックコピー - 生成コードをそのままプロジェクトへ
完全HTMLエクスポート - Bootstrap CDN付きの本番対応ファイル
HTMLインポート - 既存ページの編集・再利用も可能
技術仕様
開発言語
Vanilla JavaScript(フレームワーク不使用で軽量)
Bootstrapバージョン
Bootstrap 5.3.2(CDN経由で最新版を使用)
アイコン
Bootstrap Icons 1.11.1(CDN経由)
対応ブラウザ
モダンブラウザ対応Chrome, Firefox, Edge, Safari
動作環境
必要な動作環境
Macパソコン
Apple Silicon搭載Mac(2020年以降のモデル)
動作確認済み環境
確認済みデバイス
Apple Silicon搭載Mac(2020年以降のモデル)
M1、M2、M3、M4、M5チップ搭載のMacBook Air、MacBook Pro、Mac mini、iMac、Mac Studio、Mac Proで動作確認済みです。
今すぐBootstrapサイト構築を始めよう
BlockStrap Editorで、コーディング時間を大幅に短縮。
Mac App Storeで公開中