CookBook

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

投稿日:


この CookBook では、コンテンツ種別が Bulma のレイアウトを縦に並べる方法を紹介します。
また、レイアウトを横に並べる編もありますので、併せてご確認ください。
https://dev.intra-mart.jp/cookbook199554/

はじめに

HTML には、ブロックレベル要素とインライン要素があります。
ブロックレベル要素は縦に並べることができて、インライン要素は横に並べることができます。

ブロックレベル要素は主に、<div>、<h1>~<h6>、<li>、<p>、<table>、<ul>などがあります。
詳しくはこちらをご確認ください。
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements

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

標準部品

レイアウト
  • ボックス
  • フレックスコンテナ
  • テーブル(レイアウト)
  • リスト(レイアウト)
  • 連番付きリスト(レイアウト)
  • 見出しレベル1
  • 見出しレベル2
  • 見出しレベル3
  • 見出しレベル4
  • 見出しレベル5
  • 見出しレベル6
  • 段落
  • サイドメニューコンテナ
繰り返し
  • ボックス(繰り返し)
  • テーブル(繰り返し)
  • リスト(繰り返し)
  • 連番付きリスト(繰り返し)
フォーム部品
  • フォーム
  • リッチテーブル
パーツ
  • コンテナページ埋め込み
グラフ
  • 折れ線グラフ
  • 棒グラフ
  • 円グラフ
  • レーダーチャート
  • 散布図

Bulma 部品

レイアウト(Bulma)
  • ボックス
  • カラム
  • コンテナ
  • 水平コンテナ
  • 中央揃え水平コンテナ
  • テーブルコンテナ
  • メディアオブジェクト
  • ヒーロー
  • セクション
  • フッタ
  • タイル
  • コンテンツ
  • 見出しレベル1
  • 見出しレベル2
  • 見出しレベル3
  • 見出しレベル4
  • 見出しレベル5
  • 見出しレベル6
繰り返し(Bulma)
  • カラム(繰り返し)
  • テーブルコンテナ(繰り返し)
  • フィールドエレメント配置アイテム(繰り返し)
フォーム部品(Bulma)
  • フィールド
  • 水平フィールド
パーツ(Bulma)
  • 画像埋め込み
  • 進捗バー
  • 通知ボックス
コンポーネント(Bulma)
  • パンくずリストコンテナ
  • ページネーション
  • ナビゲーションバー
  • メッセージ
  • タブ
  • メニュー

以上が、コンテナページに配置するだけで縦に並ぶエレメントです。

ただ、これらのエレメントは子要素にエレメントを配置して使用するケースが多く、
子要素にエレメントを配置した場合に、子要素が横並びになることもあります。
そこで、IM-BloomMaker では縦向きのレイアウトを作成する手段として、目的別に複数のエレメントが用意されています。

縦向きのレイアウトを作成するエレメント

  • ボックス
  • フレックスコンテナ
  • テーブル(レイアウト)
  • リスト(レイアウト)
  • 連番付きリスト(レイアウト)
  • コンテナ
  • ヒーロ
  • セクション
  • タイル
  • コンテンツ
  • フィールド

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

ボックス

ボックスの中に要素を配置して、並べるだけで縦に並べることができます。
例ではボックスを3つ並べています。

ボックスの中にエレメントを配置してみます。

縦に並びました。

インライン要素を簡単に縦に並べたい場合に使用できます。

フレックスコンテナ

自由にアイテムの表示位置を変更したい場合、フレックスコンテナを使用することで実現できます。
フレックスコンテナの flexDirection プロパティを column にすることでフレックスアイテムを縦に並べることができます。

flexDirection プロパティを column に変更します。

縦に並びました。

テーブル(レイアウト)

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

ヘッダやセルにラベルを配置します。

リスト(レイアウト)

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

ラベルを配置します。

ラベルを One,Two,Three に変更したものをプレビューで表示します。

連番付きリスト(レイアウト)

順序のあるリスト形式でエレメントを配置したい場合

ラベルを配置します。

ラベルを One,Two,Three に変更したものをプレビューで表示します。

ボックス(Bulma)

ボックスの中に要素を配置して、箱のように見せるエレメントです。

白い箱のようにエレメントが表示されます。

フォーム部品を配置してみます。

コンテナ

横幅を指定してエレメントを配置したい場合

gap プロパティで fullhd を指定した場合、フルHDサイズの画面幅まで余白が追加されます。

ヒーロー

全幅のバナーを表示するエレメントです。

分かりやすいように color プロパティを変更して、背景色を付けています。

以下は、head と foot プロパティを有効にして Bulma のエレメントを配置したものです。
head 要素に「パンくずリストコンテナ」エレメント、foot 要素に「タブ」エレメントを配置しています。

「ヒーロー」エレメントの size プロパティを fullheight にしてプレビューで確認すると画面いっぱいに表示されます。

セクション

上下に余白を取り、セクションを表現するエレメントです。

分かりやすくするため「セクション」エレメントに背景色を付けています。
上段はセクションの margin プロパティが normal で、下段は medium です。

タイル

グリッドレイアウトを実現したい場合。
横や縦、自由にレイアウトを作成することができます。
詳細はこちらの CookBook を参照してください。

コンテンツ

配下に配置されたエレメントのテキストサイズを変更できるエレメントです。

size プロパティを large にすると、配下のエレメントのテキストサイズが大きくなります。

フィールド

フォーム部品(Bulma)の入力系エレメントを配置するのに必要なエレメントです。
縦並びや、横並びにできます。
入力系エレメント (Bulma)の部品を配置してみましょう。

「テキスト入力」エレメントなどを配置します。

showLabel プロパティを有効にします。

ラベルを変更します。

ログインフォームができました。

水平フィールド

フォーム部品(Bulma)の入力系エレメントを配置するのに必要なエレメントです。
ラベルと入力要素は横に並びますが、 水平フィールドエレメント自身は縦に並ぶので縦にレイアウトを作成できます。
入力系エレメント (Bulma)の部品を配置してみましょう。

「テキスト入力」エレメントなどを配置します。

ラベルを変更します。

ログインフォームができました。

さいごに

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


-CookBook
-

執筆者:


comment

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

関連記事

no image

IM-Notice Broker の設定方法

この CookBook では、分散環境での IM-Notice (デスクトップ版)の設定方法について紹介しています。 分散環境の構成として、以下のような 2 台構を考えます。 マシン IPアドレス A …

no image

入力画面の後に入力内容の確認画面を設定する方法

このCookbookでは、入力画面からの登録時に入力内容の確認画面を設定する方法を説明します。 この方法は、以下の製品で作成したアプリケーションやフローで利用できます。 IM-FormaDesigne …

no image

IM-BloomMaker Bulma Theme Colored について

この CookBook では intra-mart Accel Platform 2021 Summer から利用可能になった コンテンツ種別「Bulma Theme Colored」について紹介しま …

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

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

no image

ワークスペースとスケジュール機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のスケジュー …