カスタマイズ

kintone関連レコードのヘッダーを列ごとに色分けして区別する方法

「ユーザーから関連レコードが見づらいと言われたけど、何か良い方法はないだろうか」
「JavaScriptの知識がないから、自分でカスタマイズするのは難しそう・・・」

関連レコードのヘッダーは、CSSやJavaScriptを使えば列ごとに色付けできます。kintoneの標準機能では実現できませんが、カスタマイズを行えば、似たような項目が並ぶ関連レコードでも重要な列を目立たせたり、入力列と確認列を色分けして区別したりすることが可能です。

ただし、注意点があります。この方法はDOM操作という推奨されていない手法を使うため、kintoneのバージョンアップ時に色が元に戻る可能性があります。しかし、複数の案件で実装した経験から言えば、そのリスクを理解した上で採用すれば、社内ユーザーの満足度を大きく向上させることができます。

この記事では、具体的な実装手順とリスクを踏まえた判断基準を解説します。記事を読み終える頃には、自分のアプリで実際に色付けを設定し、社内ユーザーから「使いやすくなった」と感謝される状態になっているはずです。

関連レコードのヘッダーは列ごとに色付けできる

kintoneの標準機能やJavaScript APIでは、関連レコードのヘッダーを列ごとに色付けする手段は提供されていません（2025年12月時点）。しかし、CSSやJavaScriptを使ったカスタマイズを行えば、列ごとに異なる色を設定することが可能です。

関連レコードのヘッダーを列ごとに色付けする方法について、それぞれの方法を詳しく解説していきます。

  • CSSを使う方法：実装が簡単だが、列の順序が変わると設定も変更が必要
  • JavaScriptを使う方法：実装はやや複雑だが、列名で判定するため列の順序が変わっても対応不要

【補足】この記事は「関連レコード」のヘッダー色付けについて解説

テーブル（サブテーブル）のヘッダー色付けについては、以前の記事で解説していますので、そちらをご参照ください。
→ kintone のテーブルが見づらい？ヘッダー色付けで入力ミスを防ぐ JS 設定手順

【CSS】列の位置（番号）を指定して色付けする方法

CSSを使えば、比較的簡単に関連レコードのヘッダーを列ごとに色付けできます。

この方法は「左から何番目の列」という指定で色を付けるため、列の順序を変更した場合はCSSも併せて修正する必要があります。

手順1：CSSファイルを作成する

テキストエディタ（メモ帳など）を開き、以下のコードをコピー＆ペーストします。ファイル名を related-record-header.css のように付けて保存します。

/* 関連レコードの1列目のヘッダーを青色に */
.subtable-header-gaia th:nth-child(1) {
  background-color: #034d40;
}

/* 関連レコードの3列目のヘッダーを赤色に */
.subtable-header-gaia th:nth-child(3) {
  background-color: #b1031d;
}

/* 関連レコードの5列目のヘッダーを緑色に */
.subtable-header-gaia th:nth-child(5) {
  background-color: #1804cc;
}

コードの解説：

  • nth-child(1)：左から1番目の列を指定（関連レコードの場合、左から1番目は詳細画面へのリンクが表示される列）
  • nth-child(3)：左から3番目の列を指定
  • background-color：背景色を指定（お好みの色に変更可能）

補足

このサンプルコードは、アプリ内に関連レコードが1つのみ存在するケースを想定したものです。複数ある場合は全ての関連レコードに色付けが適用されます。

手順2：kintoneにアップロードする

kintoneのアプリ設定画面を開き、「設定」タブ → 「JavaScript / CSS でカスタマイズ」から、作成したCSSファイルをアップロードして保存します。

アプリを更新すれば設定完了です。レコード追加・編集・詳細画面を開いて、関連レコードのヘッダーに色が付いていることを確認してください。

【JavaScript】ヘッダーの文字を判定して色付けする方法

JavaScriptを使えば、ヘッダーのテキスト（列名）を判定して色を付けることができます。

この方法なら、列の順序を変更してもコードを修正する必要がありません。列名さえ変わらなければ、自動で正しい列に色が付きます。

手順1：JavaScriptファイルを作成する

テキストエディタ（メモ帳など）を開き、以下のコードをコピー＆ペーストします。ファイル名を related-record-header.js のように付けて保存します。

(function () {
  "use strict";

  // 色付け設定（ヘッダーテキストと色の対応）
  const COLOR_SETTINGS = [
    { keyword: "日付", color: "#e3f2fd" }, // 青色
    { keyword: "金額", color: "#fff9c4" }, // 黄色
    { keyword: "納期", color: "#ffebee" }, // 赤色
  ];

  // ヘッダーに色を付ける関数
  function applyHeaderColors() {
    // 関連レコードのヘッダーセルをすべて取得
    const headers = document.querySelectorAll(".reference-subtable-gaia th");

    headers.forEach(function (header) {
      const headerText = header.textContent.trim();

      // 各設定に基づいて色を適用
      COLOR_SETTINGS.forEach(function (setting) {
        if (headerText.includes(setting.keyword)) {
          header.style.backgroundColor = setting.color;
        }
      });
    });
  }

  // レコード追加・編集・詳細画面表示時に実行
  kintone.events.on(
    [
      "app.record.detail.show",
      "app.record.create.show",
      "app.record.edit.show",
    ],
    function (event) {
      // 関連レコードの要素が表示されるまで少し待つ
      setTimeout(function () {
        applyHeaderColors();
      }, 500);

      return event;
    }
  );
})();

コードの解説：

  • COLOR_SETTINGS：色付け設定を定義した配列。キーワードと色の対応を管理
  • applyHeaderColors：ヘッダーに色を付ける処理を行う関数
  • app.record.detail.show、app.record.create.show、app.record.edit.show：レコード詳細・追加・編集画面表示時に実行されるイベント
  • setTimeout：関連レコードの要素が表示されるまで少し待つ（このサンプルでは500ミリ秒として定義）
  • querySelectorAll：関連レコードのすべてのヘッダーセルを取得
  • includes(setting.keyword)：ヘッダーのテキストに設定したキーワードが含まれていれば色を付ける

カスタマイズ方法：

自分のアプリに合わせて、COLOR_SETTINGS の内容を変更してください。

const COLOR_SETTINGS = [
  { keyword: "日付", color: "#e3f2fd" },
  { keyword: "金額", color: "#fff9c4" },
  { keyword: "納期", color: "#ffebee" },
  // 追加したい場合は、ここに行を追加
];

手順2：kintoneにアップロードする

kintoneのアプリ設定画面を開き、「設定」タブ → 「JavaScript / CSS でカスタマイズ」から、作成したJavaScriptファイルをアップロードして保存します。

アプリを更新すれば設定完了です。レコード追加・編集・詳細画面を開いて、関連レコードのヘッダーに色が付いていることを確認してください。

どちらの方法を選ぶべきか

CSSとjavaScript、どちらを選ぶべきかの判断基準を示します。

CSSを選ぶべきケース

  • 列の順序が今後も変わらない場合
  • JavaScriptの知識がまったくなく、シンプルに実装したい場合
  • とりあえず試してみたい場合

JavaScriptを選ぶべきケース

  • 列の順序が今後変わる可能性がある場合
  • 列名で判定したい場合
  • 複数のアプリで同じような設定をしたい場合

【推奨】

迷ったら、まずCSSで試してみることをおすすめします。動作を確認してから、必要に応じてJavaScriptに切り替えることも可能です。

なお、テーブル（サブテーブル）のヘッダー色付けについても同様の考え方が適用できます。詳しくは以前の記事をご参照ください。
→kintoneのテーブルが見づらい？ヘッダー色付けで入力ミスを防ぐJS設定手順

設定前に知っておくべきリスクと判断基準

ここまで、関連レコードのヘッダーを列ごとに色付けする方法を解説してきました。しかし、実装する前に必ず理解しておくべき重要なリスクがあります。

kintoneのバージョンアップで設定した色が表示されなくなる可能性

今回紹介したCSSやJavaScriptによる色付けは、DOM操作という手法を使っています。DOM操作とは、kintoneの画面を構成するHTML要素（タグやクラス名）に直接アクセスして、見た目や動作を変更する方法です。

今回のコードで指定している「.reference-subtable-gaia」といったクラス名は、kintone公式が提供しているJavaScript APIではなく、画面のHTML構造を直接参照しています。

そのため、kintoneのバージョンアップでこれらのクラス名や構造が変更された場合、色付けが突然表示されなくなる可能性があります。ただし、設定した色がkintone標準の色に戻るだけで、アプリの動作自体に影響はありません。設定した色が表示されなくなった場合は、その時点でコードを修正するか、色付けを諦めるかを判断すれば良いだけです。

リスクを理解した上で採用するかを判断する

DOM操作のリスクを踏まえて、関連レコードのヘッダー色付けを採用するかどうかを判断しましょう。

採用を検討すべきケース

以下のような場合は、リスクを理解した上で採用する価値があります。

1. 現場のユーザーから「見づらい」という具体的な声がある

似た項目が並んでいて、実際に入力ミスや確認漏れが発生している場合、色付けによって使いやすさが大きく向上します。

2. 設定した色が標準に戻っても業務に支障がない

色付けはあくまで「使いやすさの向上」であり、設定した色が標準に戻っても業務自体は継続できます。この点を理解していれば、安心して採用できます。

3. 必要に応じてメンテナンスできる体制がある

バージョンアップで個別に指定した色が表示されなくなった場合、コードを修正するか、諦めるかを判断できる管理者がいれば問題ありません。

筆者の見解

複数の顧客企業で関連レコードのヘッダー色付けを実装してきた経験から言えば、リスクを正しく理解した上で採用すれば、ユーザーの満足度を大きく向上させられます。設定した色が標準に戻るリスクよりも、日々の業務で「見やすくなった」「迷わなくなった」というメリットの方が大きいケースは多いです。

まずはテスト環境や影響の少ないアプリで試してみて、効果を実感してから本番環境に適用することをおすすめします。

よくある質問（Q&A）

関連レコードのヘッダー色付けについて、よくある質問をまとめました。

Q1. 一覧画面でも色付けは反映される？

A. いいえ、反映されません。今回紹介した方法は、レコード追加・編集・詳細画面の関連レコードのヘッダーを色付けするものです。一覧画面では関連レコードのヘッダーは表示されないため、色付けの対象になりません。

Q2. スマートフォン（モバイル）でも色付けは反映される？

A. いいえ、反映されません。今回紹介したコードはPC用のカスタマイズです。スマートフォンでも色付けを反映させたい場合は、モバイル用のCSSやJavaScriptを別途作成する必要があります。ただし、スマートフォンの画面では関連レコードの表示領域が狭く、列数も制限されるため、色付けの効果はPCほど高くありません。

Q3.CSSとJavaScriptを両方設定したらどうなる？

A.両方のスタイルが適用されます。CSSとjavaScriptの両方で同じ列に色を指定した場合、JavaScriptの設定が優先される可能性があります（後から実行されるため）。基本的には、どちらか一方の方法だけを使うことをおすすめします。

Q4. 複数の関連レコードがある場合、特定の関連レコードだけに色を付けらる？

A.JavaScriptを使えば可能です。CSSだけでは難しいですが、JavaScriptでフィールド名を判定しているため、テーブル内の列だけに色を付けることができます。

Q5. 設定したのに色が変わらない。どうすればいい？

A. 以下の点を確認してください。

  1. ファイルが正しくアップロードされているか
    アプリ設定画面の「JavaScript / CSS でカスタマイズ」で、ファイルが表示されているか確認してください。
  2. アプリを更新したか
    設定を保存した後、必ず「アプリを更新」をクリックしてください。
  3. ブラウザのキャッシュをクリアする
    古い表示がキャッシュされている可能性があります。ブラウザを再読み込み（Ctrl + F5）してみてください。
  4. 列番号やクラス名が正しいか
    CSSの場合、列番号が正しいか確認してください。JavaScriptの場合、列名（ヘッダーテキスト）が正しいか確認してください。

まとめ

この記事では、関連レコードのヘッダーを列ごとに色付けする方法を解説しました。最後にポイントをまとめます。

  • kintone標準機能では関連レコードのヘッダーを列ごとに色付けできないが、CSSやJavaScriptを使えば実現可能
  • CSSは実装が簡単だが列の順序を変更すると設定も変更が必要。JavaScriptは列名で判定するため列の順序が変わっても対応不要
  • DOM操作という推奨されていない手法を使うため、kintoneのバージョンアップで設定した色が標準に戻る可能性がある
  • ただし、アプリの動作自体には影響がなく、データが消えることもない
  • リスクを理解した上で採用すれば、ユーザーの満足度を大きく向上させられる

関連レコードのヘッダー色付けは、わずかな手間で現場の使いやすさを改善できる実用的なカスタマイズです。まずはテスト環境で試してみて、効果を実感してください。

また、テーブル（サブテーブル）のヘッダー色付けについても同様の方法が使えます。こちらも併せて活用することで、kintoneアプリ全体の見やすさを向上させることができます。
→ kintoneのテーブルが見づらい？ヘッダー色付けで入力ミスを防ぐJS設定手順

関連記事
カスタマイズ

APIトークンで解決！kintoneレコード登録時に作成者を任意設定する実装手法
カスタマイズ

kintoneポータル用PDFプレビューJSの開発裏話
カスタマイズ

kintoneのテーブルが見づらい？ヘッダー色付けで入力ミスを防ぐJS設定手順
カスタマイズ

kintoneのテーブルを縞々表示にして「ちょっと見づらい」を解決しよう