Bulma-quick-guide

ブルマ-はじめに

ブルマとは？

Bulmaは、https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox [flexbox]モジュールに依存するオープンソースのシンプルでモダンなCSSフレームワークです（レスポンシブレイアウトの開発に使用されます）構造）。

歴史

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

Bulmaを使用する理由

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

特徴

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

利点

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

デメリット

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

ブルマ-概要

説明

Bulmaは、軽量で最新のCSSフレームワークであり、https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox [flexbox]モジュールに依存します（レスポンシブレイアウト構造の開発と派手なデザイン）。

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

次の表は、Bulma CSSを利用するために使用できるユーティリティの種類を示しています-

S.No.	Utility & Description
1	Getting started with Bulma 1つのcssファイルを使用して、Bulmaで開始できます。
2	Responsiveness and Colors これは、モバイル向けの開発であり、大規模、小規模、および中規模のデバイスと組み合わせることができます。
3	Functions and Mixins Bulmaは、いくつかの関数とミックスインを使用して、それぞれ値と要素を定義します。

Bulma-修飾子

説明

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

次の表は、Bulma CSSを利用するために使用できるさまざまなタイプの修飾子を示しています-

S.No.	Modifiers & Description
1	Modifiers syntax and Responsive Helpers 修飾子クラスを使用して、要素の代替スタイルを作成できます。
2	Color and Typography Helpers カラーヘルパーを使用して、テキストまたは背景の色を変更できます。

ブルマ-列

説明

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

次の表は、Bulma CSSを利用するために使用できる列のバリエーションを示しています-

S.No.	Column Types & Description
1	Column layout and Sizes Bulmaでは、_columns_クラスをコンテナに追加することにより、列レイアウトを非常に簡単に構築できます。
2	Columns Responsiveness and Nesting Bulmaは、モバイルデバイス、タブレット、デスクトップなどのさまざまな種類の画面にレスポンシブ列を提供します。
3	Columns Gap and Options 列は、列の内容間に等しいギャップを作成します。

ブルマ-レイアウト

説明

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

次の表は、Bulma CSSを利用するために使用できるレイアウトのバリエーションを示しています-

S.No.	Layout Types & Description
1	Container and Levels Bulmaは、コンテナを使用して基本レイアウトを表し、サイトのコンテンツをラップします。
2	Media Object メディアオブジェクトは、さまざまなタイプのコンポーネントを構築するための抽象オブジェクトスタイルを指定するために使用されます。
3	Hero banner Bulmaはヒーローバナーを提供して、ウェブページに全幅のバナーを指定します。
4	Tiles Bulmaは、単一の要素クラスを使用して2次元レイアウトを作成します。

ブルマ-フォーム

説明

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

次の表は、Bulma CSSを利用するために使用できるフォームのバリエーションを示しています-

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

ブルマ-要素

説明

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

次の表は、Bulma CSSを利用するために使用できる要素のバリエーションを示しています-

S.No.	Form Types & Description
1	Button ボタン要素は、カスタムボタンスタイルとのユーザーインタラクションを提供します。
2	Content Bulmaは、HTMLタグを直接使用する_content_クラスを提供します。
3	Box and Icon _.box_クラスは、ボーダー、半径、パディングを含むコンテナを定義します。
4	Image Bulmaは_.image_クラスを使用してページに画像を表示します。
5	Notification and Progress bars Bulmaは、事前定義されたアラートメッセージを指定して通知を表示します。
6	Table Bulmaは、データを表形式で表示するための要素をラップします。
7	Tag and Title Bulmaは、追加情報を表示するためのタグと呼ばれる小さなラベルを提供します。

ブルマ-コンポーネント

説明

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

次の表は、Bulma CSSを利用するために使用できるコンポーネントのバリエーションを示しています-

S.No.	Component & Description
1	Breadcrumb Bulmaは、ナビゲーションメソッドとしてブレッドクラムコンポーネントを使用して、アプリケーション内のユーザーに現在のページの場所を示します。
2	Card カードコンポーネントは、外観を改善するためにコンテンツをボックスに表示します。
3	Dropdown Bulmaは、関連するリンクをリスト形式で表示するための切り替え可能なドロップダウンメニューを提供します。
4	Message Bulmaは、ページの外観を向上させるメッセージブロックを提供します。
5	Modal モーダルは、親ウィンドウの上に階層化された子ウィンドウです。
6	Navbar Navbarは、サイトのナビゲーションヘッダーとして機能します。
7	Pagination ページネーションコンポーネントは、複数のページにわたって一連の関連リンクを提供します。
8	Tabs Bulmaは、コンテンツを表示するためのさまざまなスタイルのタブ付きナビゲーションメニューを提供します。