CookBook

IM-BloomMaker セルが結合されたテーブルの作成方法

投稿日:

このCookBookでは、セルが結合されたテーブルのような見た目を作成する方法をご紹介いたします。
今回は簡単にセルの結合を実現するため、テーブル系のエレメントの代わりにコンテンツ種別「Bulma」の「カラム」を使用して作成していきます。

完成イメージ

レスポンシブなテーブルにすることもできます。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

このサンプルは、2020 Summer 版以降でインポートできます。

IM-BloomMaker のインポート画面からインポートしてください。

レシピ

  1. カラムの設定をする
  2. 見た目を作成する
  3. CSSの設定をする
  4. モバイルサイズの設定をする

1. カラムの設定をする

「レイアウト(Bulma)」カテゴリの「セクション」を配置し、その中に「レイアウト(Bulma)」カテゴリの「カラム」を配置してください。

「カラム」の「elementCount」を8にし、「multiLine」のチェックをつけます。

テーブルセルのサイズを決めていきます。

「カラムアイテム」の「size for desktop」プロパティを左から順番に「2 / 12」、「10 / 12」、「2 / 12」、「10 / 12」、「2 / 12」、「4 / 12」、「2 / 12」、「4 / 12」にします。

サイズはプルダウンにあるものから選択し、それ以外の任意の値を指定することはできない点にご注意ください。

2. 見た目を作成する

「汎用」カテゴリの「ラベル」を4つ配置してください。

「ラベル」の「textContent」プロパティをそれぞれ「Name」、「Email」、「Password」、「Confirm Password」にします。

「フォーム部品(Bulma)」カテゴリの「フィールド」を4つ配置してください。

「フィールド」の中にそれぞれ「フォーム部品(Bulma)」カテゴリの「テキスト入力」、「メールアドレス入力」、「パスワード入力」、「パスワード入力」を配置してください。

3. CSSの設定をする

次にCSSでテーブルセルに枠線や色をつけていきます。

「カラム」を選択し「CSSクラス」を「business-form」にします。

左上の「カラムアイテム」を選択し「CSSクラス」を「header-background-color border-top」にします。

右上の「カラムアイテム」を選択し「CSSクラス」を「border-top」にします。

「Email」のラベルを中に配置した「カラムアイテム」の「CSSクラス」を「header-background-color」にします。

同様に「Password」、「Confirm Password」のラベルを中に配置した「カラムアイテム」も「CSSクラス」を「header-background-color」にしてください。

CSSエディタを開き、以下を入力します。

4. モバイルサイズの設定をする

「カラム」を選択し、「responsive」プロパティを「mobile」にします。

「カラムアイテム」の「size for mobile」プロパティを左から順番に「1 / 3」、「2 / 3」、「1 / 3」、「2 / 3」、「1 / 3」、「2 / 3」、「1 / 3」、「2 / 3」にします。

プレビューで確認します。

セルが結合されたテーブルのような見た目が表示されます。

モバイルサイズにすると、見た目が変わりました。

最後に

今回はセルが結合されたテーブルを「カラム」を使用して作成する方法をご紹介いたしました。

「カラムアイテム」のサイズを変更して、様々なサイズのセルのテーブルを作成してみてください。

-CookBook
-

執筆者:


comment

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

関連記事

no image

ViewCreatorでカレントの組織コードや会社コードを取得する動的パラメータの作り方

このCookBookでは、カレントの組織コードや会社コードを取得するViewCreatorの動的パラメータの作成方法についてご紹介します。 動的パラメータについての詳細は下記のドキュメントを参照してく …

no image

画面にインジケータ(ロード中のアイコン)を表示する

任意の処理を行った際にインジケータを表示する方法をご紹介します。 インジケータは、アイコンを用いて任意の処理中であること(ロード中であること)を画面に表示します。 インジケータを利用することで、任意の …

IM-BloomMaker アイコンのハイパーリンクを作成する方法

このCookBookでは、アイコンのハイパーリンクを作成する方法を紹介します。 完成イメージ 「ハイパーリンク」エレメントを使用して、文字だけではなくアイコンを組み込んだリンクを作成することができます …

スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法

このCookBookでは、スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法について紹介しています。 Formaの入力チェックプログラムでは以下の2つのチェッ …

no image

ワークスペースとファイルライブラリ機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のファイルラ …