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

bubudoufu

3年前

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

概要
Bulmaを導入する
Bulmaを使用する

概要

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

Bulmaを導入する

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

<!DOCTYPE html>
<html lang="ja">

<head>

　　//headタグ内に他のスタイルシートへのリンクよりも先に入れる
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

</head>

<body>
   
</body>

</html>

<!DOCTYPE html>

<head>

　　//headタグ内に他のスタイルシートへのリンクよりも先に入れる

</head>

<body>

</body>

</html>

Bulmaを使用する

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

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

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

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