Bulma チートシート [CSSフレームワーク ブルマ]
CSSフレームワークのBulmaとは Bulmaは、オープンソースで開発されている無料のCSSフレームワークです。 レスポン...
「Bulma」一覧
Bulma 入門 Tips 使い方 日本語 ドキュメント [CSSフレームワーク]
当ブログでは、CSSフレームワークの「Bulma」の使い方を日本語ドキュメントとしてまとめています。 Bulmaの学習、クラスのリ...
Bulmaのクラス（部品）を組み合わせてWebページを作成する
今回は、Bulmaが提供してくれている様々なクラスを使用して一般的なWebページを作成したいと思います。 ここでは、以下のペー...
Bulma viewportの幅に応じた表示と非表示 Responsive helpers [CSSフレームワーク]
Bulmaには、viewport（ビューポート）の幅に応じてコンテンツを表示するか、非表示にするかを切り替えるクラスが用意されていま...
Bulmaのタイポグラフィヘルパー Typography helpers [CSSフレームワーク]
Webページでは、ケースに合わせて様々なスタイルのフォントを使用します。 Bulmaには、テキストのフォントサイズや太さをはじ...
Bulmaのスペーシングヘルパー Spacing helpers [CSSフレームワーク]
Bulmaでは、すべての方向にマージンとパディングのヘルパークラスが提供されています。 今回は、スペースを簡単に設定できるBu...
Bulmaのタイル Tiles [CSSフレームワーク]
Windowsのスタートメニューをクリックすると表示されるタイルは、Windowsを使っているユーザーの方であれば、一度は目にしたこ...
Bulmaのコンテナ Container [CSSフレームワーク]
Webページでは、水平方向に左寄せではなく、中央に要素（ブロック）を配置したい場合があります。 Bulmaには、水平方向の中央...
Bulmaのフッター Footer [CSSフレームワーク]
Webページでは、ヘッダーと共にフッターを設けるのが一般的です。 Bulmaにはフッターを配置するためのクラスが用意されていま...
Bulmaのセクション Section [CSSフレームワーク]
Webページでは、ページ内の一定の範囲を見出し（h1～h6）ごとや、何らかの区切り、かたまりなどで分けます。 これをセクションと言...
Bulmaのヒーローバナー Hero Banner（Header） [CSSフレームワーク]
Webページをデザインしていると、横幅いっぱいに広がったバナーを配置したい時があります。 Bulmaには、このようなバナーを配...
料理のレシピサイトで使えそうなスタイル [CSSフレームワーク Bulma]
CSSフレームワークに用意されている様々なクラスを組み合わせることで、Webサイトやブログに印象的なデザインの要素を配置することがで...
住所情報を入力するコントロールボックス [CSSフレームワーク Bulma]
CSSフレームワークのBulmaには、入力フォームのスタイルを設定するための様々なクラスが用意されています。 今回は、Bulm...
ログイン情報（ユーザーID、パスワード）を入力するコントロール [CSSフレームワーク Bulma]
CSSフレームワークのBulmaを利用することで、WebページのUIを簡単に実装することができます。 今回は、Bulmaを使っ...
Bulma テキストと背景の色を指定するカラーヘルパー一覧 Color helpers [CSSフレームワーク]
Bulmaには、テキストの前景色（fore color）や背景色（back ground color）を指定するためのクラスが用意さ...