はじめに

こんにちは。開発部のK.Tです。

IM-BloomMakerでリッチテーブルや繰り返しテーブルを使った一覧画面を作っていると、

・行ごとに背景色を変えたい

・同じCSSを複数のエレメントで使い回したい

といった 見た目の微調整をしたくなる場面が多いと思います。

本記事では、IM-BloomMakerでテーブルの見た目を調整する際に押さえておきたい

CSSエディタでテーブルのCSSを変える方法
CSSクラスをグルーピングして複数指定する方法

についてまとめておきます。

環境構築

前提・環境

・開発ツール：IM-BloomMaker

・コンテンツ種別：imui / Bulma どちらでも可(例では Bulma 寄り)

・テーブル：

 ・フォーム部品の「リッチテーブル」

1. テーブルのCSSを変える方法

以下の手順でテーブルの見た目を変えることができます。

CSSエディタで全体のスタイルを定義する
エレメントにCSSクラスを付けて、クラス単位でスタイルを当てる

1-1. CSSエディタでテーブル用スタイルを定義する

BloomMakerには画面単位のCSSを記述できる「CSSエディタ」があり、ここで書いたスタイルをコンテナ内にだけ適用することができます。

テーブル用のスタイル例はこんな感じです。

/* テーブル全体のベーススタイル */
.demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* ヘッダ */
.demo-table thead th {
  background-color: #f5f5f5;
  border-bottom: 2px solid #ccc;
}

/* ボーダーと余白 */
.demo-table th,
.demo-table td {
  border-bottom: 1px solid #e0e0e0;
  padding: 0.4rem 0.6rem;
}

/* 偶数行を縞々に */
.demo-table tr:nth-child(even) {
  background-color: #fafafa;
}

CSSエディタにこのCSSを書いておくと、クラス demo-table を持つ table要素に対して一括でスタイルが適用されます。

ただし、そのままタグ名(例：table { ... })で指定すると、コンテナ外のテーブルにも効いてしまうので、コンテナのクラスをセレクタに含める書き方にしておくと安心です。

/* コンテナ内のテーブルだけに適用する例 */
.im-hichee-container .demo-table {
  /* ここにスタイルを書く */
}

1-2. リッチテーブルにCSSクラスを割り当てる

CSSを書いただけではBloomMaker側のテーブルにクラスが付いていないので、デザイナでリッチテーブルにクラス名を設定します。

リッチテーブルエレメントをクリック
右ペインで「プロパティ」タブを開く
「CSSクラス」カテゴリの「クラス名」を demo-table に設定

これで、リッチテーブルのHTMLに class="demo-table" が付き、先ほどCSSエディタに書いたスタイルが効くようになります。

同じ手順で、縦方向テーブル(繰り返し)や、テーブルを囲うボックスなどにもクラスを割り当てれば、一覧全体の見た目を統一できます。

2. CSSクラスをグルーピングして複数指定する方法

次に、CSSクラスを「部品化」して複数組み合わせる話です。

2-1. 1つのエレメントに複数クラスを付ける

BloomMakerの「CSSクラス > クラス名」プロパティは、 スペース区切りで複数のクラス名を指定可能です。

例： demo-table is-striped

これにより、

・demo-table：テーブル全体の基本スタイル

・is-striped：行を縞々にするCSS

というように、役割ごとにクラスを分けておいて、必要なものを組み合わせる運用ができます。

Bulmaベースのエレメントで利用されるアイコン用プロパティ iconClass なども、複数クラスをスペース区切り、または文字列配列で指定できる仕様になっています。

この考え方をそのままテーブルにも流用すると、CSS設計がきれいになります。

2-2. 「見た目の部品」としてクラスを分割する

例えば通常版とコンパクト版(table-compact)の2つのテーブルがある想定で、テーブル用のクラスを次のように分割しておきます。

/* ベースのテーブル */
.table-base {
  width: 100%;
  border-collapse: collapse;
}

/* 縞々 */
.table-striped tr:nth-child(even) {
  background-color: #fafafa;
}

/* コンパクト表示 */
.table-compact th,
.table-compact td {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

BloomMaker側では、用途に応じて次のようにクラス名を組み合わせて指定します。

・通常の一覧： table-base table-striped

・コンパクト版一覧： table-base table-striped table-compact

こうしておくと、2つのテーブル両方で、「縞々を取り除きたい」「縞々に色を付けたい」などの場合も .table-striped だけをCSSから調整するだけで済み、クラス設計の見通しが良くなります。

3. テーブルのCSSとクラスグルーピングの実装例

ここまでの内容を組み合わせて、「コメント一覧テーブル」の見た目を整えるときの例を簡単にまとめます。

3-1. CSSエディタに記述するスタイル

/* ベース */
.table-base {
  width: 100%;
  border-collapse: collapse;
}

/* ヘッダ */
.table-header-basic thead th {
  background-color: #d555f5;
  border-bottom: 2px solid #d555f5;
}

/* ボーダー */
.table-border-basic th,
.table-border-basic td {
  border-bottom: 2px solid #049e1b;
  padding: 0.4rem 0.6rem;
}

/* 縞々 */
.table-striped tr:nth-child(even) {
  background-color: #faf0f9;
}

3-2. リッチテーブル側の設定

・対象：コメント一覧リッチテーブル

・プロパティ → CSSクラス → クラス名

table-base table-header-basic table-border-basic table-striped

縦方向テーブル側も同じようにクラスを分けておけば、「一覧部分の見た目だけ抜き差しする」といったこともやりやすくなります。

4. まとめ

・BloomMakerでは、CSSエディタとCSSクラスプロパティを組み合わせることで、リッチテーブルや繰り返しテーブルの見た目を柔軟にコントロールできる

・「CSSクラス > クラス名」プロパティには 複数クラスを指定可能 で、Bulmaベースのアイコンなどでも同じ考え方が使われている

一覧画面の実装と並行して、CSSクラスを「部品」として設計しておくと、後からの調整がかなりラクになるので、早めにルールを決めておくのがおすすめです。

gsol-dev's blog

BloomMaker開発-テーブルのCSS変更方法