ブルマ-クイックガイド

ブルマとは何ですか？

Bulmaはオープンソースのシンプルで最新のCSSフレームワークであり、flexboxモジュールに依存しています（レスポンシブレイアウト構造の開発に使用されます）。

歴史

ブルマは2016年に発行され、MITライセンスの下で配布されました。ブルマの現在のバージョンは0.7.1で、2018年4月18日にリリースされました。

なぜBulmaを使うのですか？

Bulmaは習得とセットアップが非常に簡単です。SASSで構築され、39個の.sassファイルで分割されています。コードは個別のファイルに分割することで簡単にカスタマイズでき、アプリケーションの一部をカスタマイズして期待される結果を得ることができます。

特徴

これは、Flexboxを使用する軽量で最新のCSSフレームワークです。
個別のファイルではなく、単一のファイルにモバイルファーストスタイルが含まれています。
それはカスタマイズ可能でモジュール化可能です。

利点

デスクトップ、タブレット、モバイル向けのレスポンシブデザインを提供します。
これは純粋なCSSフレームワークであるため、AngularJS、ReactJSなどのJavaScriptフレームワークと組み合わせることができます。
最小限のHTMLコードを使用しているため、コードの読み取りと書き込みが簡単です。

短所

これは新しいフレームワークであり、コミュニティほど大きくはありません。
ドキュメントが少なく、若干の改善が必要です。
このフレームワークはまだ開発段階にあります。

説明

Bulmaは軽量で最新のCSSフレームワークであり、flexboxモジュールに依存しています（レスポンシブレイアウト構造と派手なデザインの開発に使用されます）。

Bulmaの概要には、Bulmaの使用開始、応答性（デスクトップ、タブレット、電話などのさまざまなデバイスでWebページを表示できます）、色、色と値を定義する機能、およびミックスイン（CSSプロパティのグループ）が含まれます。ブルマで1つのクラスのプロパティを別のクラスに使用する）。

次の表に、BulmaCSSを利用するために使用できるさまざまなタイプのユーティリティを示します。

S.No.	ユーティリティと説明
1	ブルマ入門 1つのcssファイルを使用してBulmaから始めることができます。
2	応答性と色これはモバイルフレンドリーな開発であり、大、小、中のデバイスと組み合わせることができます。
3	関数とミックスイン Bulmaは、いくつかの関数とミックスインを使用して、それぞれ値と要素を定義します。

説明

Bulmaの修飾子には、クラスを使用した要素の代替スタイル、スタイルを変更するレスポンシブクラス、要素の色を変更するためのカラーヘルパー、テキストのサイズと色を変更するためのタイポグラフィヘルパーが含まれます。

次の表に、BulmaCSSを利用するために使用できるさまざまな種類の修飾子を示します。

S.No.	修飾子と説明
1	修飾子の構文とレスポンシブヘルパーモディファイアクラスを使用して、要素の代替スタイルを作成できます。
2	カラーとタイポグラフィのヘルパーカラーヘルパーを使用して、テキストまたは背景の色を変更できます。

説明

Bulmaは、コンテナ内で最大12列までスケールアップするレスポンシブグリッドシステム（一連の行と列を介してページレイアウトを作成する）を提供します。デバイスまたはビューポートのサイズが大きくなると、列が再配置されます。

次の表に、BulmaCSSを利用するために使用できる列のバリエーションを示します。

S.No.	列の種類と説明
1	列のレイアウトとサイズ Bulmaを使用すると、コンテナに列クラスを追加することで、列レイアウトを非常に簡単に構築できます。
2	カラムの応答性とネスト Bulmaは、モバイルデバイス、タブレット、デスクトップなどのさまざまなタイプの画面にレスポンシブ列を提供します。
3	列のギャップとオプション列は、列の内容の間に等しいギャップを作成します。

説明

Bulmaレイアウトは、CSSクラスを使用して設計されたWebページの構造を記述します。

次の表に、BulmaCSSを利用するために使用できるレイアウトのバリエーションを示します。

S.No.	レイアウトの種類と説明
1	コンテナとレベル Bulmaはコンテナを使用して基本的なレイアウトを表し、サイトのコンテンツをラップします。
2	メディアオブジェクトメディアオブジェクトは、さまざまなタイプのコンポーネントを構築するための抽象オブジェクトスタイルを指定するために使用されます。
3	ヒーローバナーブルマは、ウェブページに全幅のバナーを指定するためのヒーローバナーを提供しています。
4	タイル Bulmaは、単一の要素クラスを使用して2次元レイアウトを作成します。

説明

Bulmaフォーム要素は、入力要素（テキストフィールド、チェックボックス、ラジオボタンなど）を使用してユーザー入力データを指定し、データを処理するためにサーバーに送信します。

次の表に、BulmaCSSを利用するために使用できるフォームのバリエーションを示します。

S.No.	フォームの種類と説明
1	フォームコントロール Bulmaには、さまざまなフォームを作成するためのさまざまなタイプのフォーム制御クラスが含まれています。
2	入力 Bulmaは、さまざまなタイプのバリエーションとともにユーザーデータを入力するための入力フィールドを提供します。
3	Textarea Bulma textareaは、複数行の入力が必要な場合に使用されます。
4	選択する Bulma selectは、ユーザーが複数のオプションから選択できるようにする場合に使用されます。
5	チェックボックスとラジオチェックボックスとラジオボタンは、ユーザーがプリセットオプションのリストから選択できるようにする場合に使用できます。
6	ファイルユーザーデータからファイルをアップロードするために使用されます。

説明

Bulmaは、コンテナとして使用できるボックス要素、ボタン要素、画像を指定するための画像コンテナ、テーブル要素など、さまざまなタイプの要素を提供します。

次の表に、BulmaCSSを利用するために使用できる要素のバリエーションを示します。

S.No.	フォームの種類と説明
1	ボタンボタン要素は、カスタムボタンスタイルとのユーザーインタラクションを提供します。
2	コンテンツ Bulmaは、HTMLタグを直接使用するためのコンテンツクラスを提供します。
3	ボックスとアイコン ■はのクラスは、境界半径およびパディングを含む容器を画定します。
4	画像 Bulmaは、.imageクラスを使用してページに画像を表示します。
5	通知バーとプログレスバー Bulmaは、通知を表示するための事前定義されたアラートメッセージを指定します。
6	テーブル Bulmaは、データを表形式で表示するための要素をラップします。
7	タグとタイトル Bulmaは、追加情報を表示するためにタグと呼ばれる小さなラベルを提供します。

説明

Bulmaには、ドロップダウン、モーダル、ページ付け、ナビゲーションバー、タブなどを提供する事前にスタイル設定されたコンポーネントが付属しており、ページでのユーザーエクスペリエンスを簡単にします。

次の表に、BulmaCSSを利用するために使用できるコンポーネントのバリエーションを示します。

S.No.	コンポーネントと説明
1	パンくず Bulmaは、ナビゲーションメソッドとしてbreadcrumbコンポーネントを使用して、アプリケーション内のユーザーに現在のページの場所を示します。
2	カードカードコンポーネントは、見栄えを良くするためにコンテンツをボックスに表示します。
3	落ちる Bulmaは、関連するリンクをリスト形式で表示するための切り替え可能なドロップダウンメニューを提供します。
4	メッセージ Bulmaは、ページの見栄えを良くするためのメッセージブロックを提供します。
5	モーダルモーダルは、親ウィンドウの上に階層化された子ウィンドウです。
6	ナビゲーションバー Navbarは、サイトのナビゲーションヘッダーとして機能します。
7	ページネーションページネーションコンポーネントは、複数のページにまたがる一連の関連リンクを提供します。
8	タブ Bulmaは、コンテンツを表示するためのさまざまなスタイルのタブ付きナビゲーションメニューを提供します。