CookBook

IM-BloomMaker レイアウトの作り方(横に並べる編)

投稿日:

この CookBook では横向きのレイアウトの作り方を紹介していきます。
また、レイアウトの作り方(縦に並べる編)もありますので、併せてご確認ください。

はじめに

以前使用されていた HTML 上の要素の分類にブロック要素とインライン要素というものがあります。
横に並べられるエレメントはその中ではインライン要素に相当します。
※ 現在はコンテンツカテゴリという分類でより細分化されています。

インライン要素について
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements

コンテンツカテゴリについて
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories

 

横に並べられるエレメント

主にフォーム部品カテゴリや汎用カテゴリに属するエレメントが横に並べられるエレメントになります 。

例:フォーム部品カテゴリのテキスト入力、汎用カテゴリのラベル

 

横に並べる方法

エレメントをただ横に並べただけでは見栄えの良い画面を作ることはできません。
作成したい画面に応じてレイアウトを考える必要があります。
Bloommaker では横向きのレイアウトを作成する手段として、目的別にエレメントが用意されています。

標準

レイアウト
  • フレックスコンテナ
  • テーブル(レイアウト)
繰り返し
  • インラインフレックス(繰り返し)
  • テーブル(繰り返し)

Bulma

レイアウト(Bulma)
  • カラム
  • 水平コンテナ
  • 中央揃え水平コンテナ
  • テーブルコンテナ
  • タイル
繰り返し(Bulma)
  • カラム(繰り返し)
  • テーブルコンテナ(繰り返し)

 

横並びのレイアウトの使用例

上で挙げたエレメントを使用したレイアウトを紹介します。
標準と Bulma で似た用途のエレメントがありますが、
Bulma のエレメントは画面幅によってレスポンシブにレイアウトを変更できるという特徴があります。

フレックスコンテナ

自由にエレメントの表示位置を変更したい場合。
この CookBook では割愛しますが横だけでなく縦のレイアウトにも対応しています。

アイテムの表示位置を合わせる場合
レイアウトカテゴリからフレックスコンテナを配置します。

 

表示位置を上に揃えるため alignContent を stretch から flex-start に変更しました。
alignContent の値によって下や中央に揃えることもできます。
レイアウトが分かりやすいようにフレックスコンテナには高さを設定し、
フレックスアイテムには緑の背景色を指定して1から順に番号を割り振ったラベルを配置しています。

 

プレビューでの表示。

 

アイテムごとに表示位置を変える場合
alignContent を flex-start から stretch に戻します。

 

フレックスアイテムの alignSelf を1つ目から順に center, flex-start, flex-end と指定します。
この指定でフレックスアイテムの位置をそれぞれ中央、上、下に変更します。

 

プレビューでの表示。

 

テーブル(レイアウト)

表形式でエレメントを配置したい場合 。

レイアウトカテゴリから テーブル(レイアウト)を配置します。

 

showFooter にチェックを入れ、フッタを表示させました。
レイアウトが分かりやすいようにラベルを配置し、縦横の幅を調節しています。

 

プレビューでの表示。

 

インラインフレックス(繰り返し)

配列の値を表示したい場合。

繰り返しカテゴリからインラインフレックス(繰り返し)を配置します。

 

このような配列の変数を作成します。

 

インラインフレックス(繰り返し)の list に作成した変数を指定します。
レイアウトが分かりやすいように緑の背景色を指定したボックスを配置し、その中に配列の値を指定したラベルを配置しています。

 

ラベルの textContent に $variable.list[$index] を指定します。

 

プレビューでの表示。

 

テーブル(繰り返し)

表形式で配列の値を表示したい場合。

繰り返しカテゴリからテーブル(繰り返し)を配置します。

 

このような配列の変数を作成します。

showFooter にチェックを入れ、フッタを表示させました。
list には作成した変数を指定します。
レイアウトが分かりやすいようにラベルを配置し、縦横の幅を調節しています。

 

ラベルの textContent に $variable.cell[$index][$index] を指定します。

 

プレビューでの表示。

 

カラム

シンプルに横並びのレイアウトを実現したい場合。

レイアウト(Bulma)カテゴリからカラムを配置します。

 

レイアウトが分かりやすいように緑の背景色を指定したボックスを配置し、その中に1から順に番号を割り振ったラベルを配置しています。

 

 

プレビューでの表示。

 

水平コンテナ

エレメントを左右に均等に配置したい場合 。

レイアウト(Bulma)カテゴリから水平コンテナを配置します。

 

レイアウトが分かりやすいように緑の背景色を指定したボックスを配置し、その中に1から順に番号を割り振ったラベルを配置しています。

 

プレビューでの表示。

 

中央揃え水平コンテナ

エレメントを全体的に均等に配置したい場合 。

レイアウト(Bulma)カテゴリから中央揃え水平コンテナを配置します。

 

レイアウトが分かりやすいように緑の背景色を指定したボックスを配置し、その中に1から順に番号を割り振ったラベルを配置しています。

 

プレビューでの表示。

 

テーブルコンテナ

表形式でエレメントを配置したい場合 。

レイアウト(Bulma)カテゴリからテーブルコンテナを配置します。

 

showFooter にチェックを入れ、フッタを表示させました。
showBorder にチェックを入れ、枠線を表示させました。
レイアウトが分かりやすいようにラベルを配置しています。

 

プレビューでの表示。

 

タイル

グリッドレイアウトを実現したい場合。
横や縦、自由にレイアウトを作成することができます。

詳細はこちらの CookBook を参照してください。

 

カラム(繰り返し)

配列の値を表示したい場合。

繰り返し(Bulma)カテゴリからカラム(繰り返し)を配置します。

 

このような配列の変数を作成します。

 

カラム(繰り返し)の list に作成した変数を指定します。
レイアウトが分かりやすいように緑の背景色を指定したボックスを配置し、その中に配列の値を指定したラベルを配置しています。

 

ラベルの textContent に $variable.list[$index] を指定します。

 

プレビューでの表示。

 

テーブルコンテナ(繰り返し)

表形式で配列の値を表示したい場合。

 

このような配列の変数を作成します。

 

showFooter にチェックを入れ、フッタを表示させました。
showBorder にチェックを入れ、枠線を表示させました。
list には作成した変数を指定します。
レイアウトが分かりやすいようにラベルを配置しています。

 

ラベルの textContent に $variable.cell[$index][$index] を指定します。

 

プレビューでの表示。

 

さいごに

以上が横並びのレイアウトです。
Bulma の公式ドキュメントにも参考になるレイアウトがありますのでご確認頂ければと思います。
https://bulma.io/documentation/

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

availability_check を利用した死活監視方法のご紹介

この CookBook では、availability_check を利用した死活監視方法について紹介しています。 availability_check を利用するには「Resinデータソース設定」モ …

no image

共通マスタのアカウント更新を契機に、IMBoxグループに参加させる方法(IM-LogicDesigner トリガ定義)

このCookBookでは、共通マスタのアカウント更新を契機に、IMBoxのGroupBoxに参加させる方法を紹介します。 IM-LogicDesignerのトリガ定義を利用することで、ノンプログラミン …

IM-BloomMaker グラフエレメントの使い方(円グラフ編)

この CookBook では、intra-mart Accel Platform 2019 Winter から利用可能になった IM-BloomMaker の円グラフの活用方法について紹介しています。 …

no image

IM-BloomMaker Bulma で IM-Knowledge のコンテンツ一覧画面を作ってみよう

2020 Summer から IM-BloomMaker に新しくコンテンツ種別 Bulma が追加されました。 この CookBook では Bulma のエレメントを用いて、IM-Knowledg …

IM-BloomMaker カスタムスクリプトの使い方と$variableからの取得・代入の方法

このCookBookでは、IM-BloomMakerのアクションの一つであるカスタムスクリプトの使い方と$variable(変数)からの取得および代入の方法について紹介しています。 実際にサンプル画面 …