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で検索にヒットした件数を取得する関数の作り方についてご紹介します。 ユーザ定義関数についての詳細は下記のドキュメントを参照してください。 ViewCre …

no image

IM-BloomMaker スプレッドシート 特定のセルを編集できないようにするには?

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になった「スプレッドシート」エレメントで、特定のセルを編集できないようにする方法を …

no image

ViewCreatorとIM-FormaDesignerを利用して、既存テーブルのデータを表示する。

このCookBookでは、ViewCreatorとForma画面を利用して、既存テーブルのデータを表示する方法を説明します。 ViewCreatorでテーブルデータの一覧を表示し、IM-FormaDe …

FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法

このCookBookでは、FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法をご紹介します。 サンプルでは、スプレッドシート・グリッドテーブル・明細テーブルを使用し …

スケジュールにログインしている本人しか表示されない場合の対応方法

このCookBookでは「intra-mart Accel Collaboration」スケジュール機能を利用する前の注意点について紹介しています。 お客様で「intra-mart Accel Col …