導入方法ヘッダーのパーツとメインタイトルヘッダー部分タイトルとフロー部分タブメニューチャット式のUL入力項目が増えていくUIマークアップjsモーダルマークアップjsまとめ導入方法まずはnpm経由でBulmaをインストール。bulma-start使いたい部分をimportします。"../../node_modules/bulma/sass/layout/_all.sass";基本的には公式サイトのドキュメントから参照すればよいと思いますが、探しづらい場合にはこちらの「Bulmaswatch」というサイトもおすすめ。全体のパーツが確認できるので便利です。Bulmaswatchヘッダーのパーツとメインタイトルサイトのロゴ、ユーザーのサムネイルと名前が入ったヘッダーです。タイトルとページのフローが入ったものをつくってみました。is-white">完了</span></div></div></div></section>タブメニュータブメニューもカレント用のclassも用意されています。Bulma自体にjsはないので、自分で実装する必要があります。data-tab="css"><a><span>CSS</span></a></li></ul></div></div>チャット式のULチャット形式のUIも、mediaモジュールを使用して簡単に組むことができます。class="content"><p><strong>ゴウさん</strong><br>チャットのコメントが入ります、チャットのコメントが入ります、チャットのコメントが入ります、チャットのコメントが入ります、チャットのコメントが入ります、チャットのコメントが入ります、チャットのコメントが入ります、チャットのコメントが入ります。class="content"><p><strong>ゴウさん</strong><br>コメント毎に返信ができるような形式になります。コメントの返信に対しての返信した場合は入れ子にならず積み上がっていきます。Enterで送信</label></div></div></nav></div></article></div>入力項目が増えていくUIボタンに、要素を消したり、追加するスクリプトを実装しました。※アナリティクスなど"></textarea></div>');});$jsAddTextarea.on('click','.js-remove-textareea',(e)=>{$(e.currentTarget).parent().remove();});モーダルBulmaを使用して一番感動したのが、モーダルの表示領域を縮めたときのスクロール操作。UIが素晴らしいです。<p>ディスプリクションの内容が入ります、ディスプリクションの内容が入ります、ディスプリクションの内容が入ります。Bulmaのレイアウトは基本的にflexで実装されているので、レスポンシブに非常に適しています。ヘッダーやナビゲーションもコピペで完結。モーダルに関してはさきほどご紹介したように、jsが入る前の段階でもすばらしいUIになっています。参考にしてみてくださいね。幅変更でスタイル消失!?「メディアクエリ設定」の落とし穴JavaScriptのArrayを知る。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。