Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
cssフレームワークのBulmaを使ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

cssフレームワークのBulmaを使ってみる

作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

スポンサーリンク

概要

雷の距離を音速を用いて簡易的に測定するアプリです。cssフレームワークのBulamaを使う練習の為に作成しました。アイコンフォントはFontAwesomeを使用しています。

Bulmaを導入する

Bulmaを利用するにはnpmコマンドでインストールするかダウンロードして使うかCDNを直接読み込むなどの方法があります。今回は手軽に利用できるCDNをブラウザで直接読み込む方法にしました。

Bulmaを使用する

BulmaはHTML要素にクラス名を割り当てるとスタイルが適用されます。下のボタンは使用例です。一番左のボタンがクラスをなにも割り当てていない状態、真ん中のボタンはボタンクラスを割り当てた状態、一番右のボタンはボタンクラス、色、ローディングの三つを割り当てたボタンです。

See the Pen button by bubudoufu (@bubudoufu) on CodePen.

ローディングするボタンもボタンクラスとローディングクラスを割り当てるだけで出来てしまうのでとても便利だなと思いました。

最後までお読みいただきありがとうございました。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

モバイルバージョンを終了