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

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

関連記事

IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法

このCookBookでは、IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法を紹介しています。 単票および表形式の帳票出力を行います。 完成イメージ …

no image

IM-FormaDesignerで複数のセレクトボックスを連動させて利用する方法

このCookbookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-FormaDesignerのみ導入環境での方法です。 IM-B …

no image

IM-BloomMaker ページのトップに戻るボタンの作り方

このCookBookでは、IM-BloomMaker でページのトップに戻るボタンの作り方について紹介しています。 今回紹介する方法は、intra-mart Accel Platform 2022 S …

no image

IM-LogicDesigner マッピング機能におけるデータ型変換について

IM-LogicDesigner ではマッピング設定で、型が異なる項目をマッピングすると暗黙的な型変換が行われます。 マッピング設定についての詳細は IM-LogicDesigner チュートリアルガ …

「イベント」ボタン・「一覧へ戻る」ボタンを使用し任意の遷移先を設定する

このCookBookでは、IM-FormaDesignerの画面アイテム・ボタンを使用し、任意の画面に遷移する方法について紹介しています。 設定方法は下記の2パターンです。 「イベント」ボタンを使用す …