CSSカスタマイズの基本

にメンテナンス済み

kintone では JavaScript ファイルだけでなく、CSS ファイルもアプリにアップロードして画面の見た目をカスタマイズできます。標準のデザインでは対応しきれないレイアウト変更や配色の調整、条件に応じた視覚的な強調表示など、CSS カスタマイズを使うことで業務に合わせた画面デザインを実現できます。

この記事では、kintone の CSS カスタマイズの基本的な方法から実践的なテクニックまで解説します。

CSS ファイルの追加方法

CSS ファイルの追加は、JavaScript ファイルと同じ画面から行えます。

  1. アプリの設定画面を開く
  2. 「JavaScript / CSS でカスタマイズ」を開く
  3. 「CSS ファイル」の欄でファイルをアップロード、または URL を指定する
  4. 設定を保存し、アプリの設定を運用環境に反映する
チェック

CSS ファイルは JavaScript ファイルの後に読み込まれます。また、複数の CSS ファイルを追加した場合は、上から順に読み込まれます。

基本的な CSS カスタマイズ

フィールドラベルのスタイル変更

label-style.css
/* フィールドラベルの文字色とサイズを変更 */
.control-label-field-gaia {
  color: #333;
  font-weight: bold;
  font-size: 14px;
}

ヘッダー部分のカスタマイズ

header-style.css
/* レコード一覧のヘッダー背景色を変更 */
.gaia-argoui-app-index-pager {
  background-color: #f0f7ff;
}

レコード一覧のテーブルヘッダー

table-header.css
/* 一覧のテーブルヘッダーの背景色 */
.recordlist-header-cell-gaia {
  background-color: #4a90d9 !important;
  color: #fff !important;
}
チェック

kintone の内部 CSS クラス名は公式にサポートされているものではありません。kintone のアップデートにより、クラス名が変更される可能性があります。CSS カスタマイズを行う際は、アップデート後に動作確認することを推奨します。

フィールドの幅やレイアウトの調整

フィールドの幅を変更する

特定のフィールドの幅を変更するには、フィールドコードに基づくセレクタを使用します。

field-width.css
/* 「タイトル」フィールドの入力欄を広くする */
.value-タイトル input {
  width: 100% !important;
  max-width: 600px;
}

/* 複数行テキストの高さを調整 */
.value-説明 textarea {
  min-height: 200px !important;
}
チェック

フィールドのCSSクラス名はフォームのフィールド要素を開発者ツールで確認して特定できます。フィールドコードを含むクラス名が付与されています。

フィールドを横並びに配置する（詳細/編集画面）

kintone の標準レイアウトでは各フィールドが縦に並びますが、CSS で横並びにすることも可能です。

horizontal-layout.css
/* グループ内のフィールドを横並びにする */
.field-姓,
.field-名 {
  display: inline-block !important;
  width: 48% !important;
  vertical-align: top;
}

CSS だけで実現するフィールドの非表示

JavaScript なしで、CSS だけでフィールドを非表示にすることもできます。

hide-field.css
/* 「管理メモ」フィールドを非表示にする */
.field-管理メモ {
  display: none !important;
}
チェック

CSS による非表示はあくまで見た目上の操作で、HTML ソースにはフィールドが存在しています。開発者ツールで簡単に値を確認できるため、機密情報のアクセス制御にはフィールドのアクセス権設定を使用してください。

フィールドの表示/非表示
kintone JavaScript カスタマイズで、フィールドの表示・非表示を動的に切り替える方法を解説します。setFieldShown を使った基本的な使い方から、条件に応じた制御、グループフィールドやテーブルとの組み合わせまで紹介し

条件付き書式（JavaScript + CSS の組み合わせ）

フィールドの値に応じてレコード一覧の行の背景色を変更する、いわゆる「条件付き書式」は、JavaScript と CSS の組み合わせで実装します。

レコード一覧の行に背景色を付ける

conditional-format.js
(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    const records = event.records;

    // 一覧画面のテーブル行を取得
    const rows = document.querySelectorAll('.recordlist-row-gaia');

    records.forEach((record, index) => {
      if (!rows[index]) return;

      const status = record['ステータス'].value;
      const row = rows[index];

      switch (status) {
        case '未対応':
          row.style.backgroundColor = '#fff3f3';
          break;
        case '対応中':
          row.style.backgroundColor = '#fff9e6';
          break;
        case '完了':
          row.style.backgroundColor = '#f0fff0';
          break;
        case '保留':
          row.style.backgroundColor = '#f5f5f5';
          break;
      }
    });

    return event;
  });
})();

優先度に応じたバッジ表示

priority-badge.css
/* 優先度のセルに色付きバッジを表示するための基本スタイル */
.priority-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.priority-high {
  background-color: #e74c3c;
}

.priority-medium {
  background-color: #f39c12;
}

.priority-low {
  background-color: #27ae60;
}
priority-badge.js
(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    const records = event.records;
    const rows = document.querySelectorAll('.recordlist-row-gaia');

    records.forEach((record, index) => {
      if (!rows[index]) return;

      const priority = record['優先度'].value;
      const cells = rows[index].querySelectorAll('.recordlist-cell-gaia');

      // 優先度フィールドのセルを見つけて、バッジスタイルを適用
      cells.forEach((cell) => {
        const innerCell = cell.querySelector('.recordlist-cellvalue-gaia');
        if (innerCell && innerCell.textContent.trim() === priority) {
          const badge = document.createElement('span');
          badge.className = `priority-badge priority-${priority === '高' ? 'high' : priority === '中' ? 'medium' : 'low'}`;
          badge.textContent = priority;

          innerCell.textContent = '';
          innerCell.append(badge);
        }
      });
    });

    return event;
  });
})();

便利な CSS テクニック

印刷時のスタイル調整

kintone のレコードを印刷する際に、不要な要素を非表示にしたり、レイアウトを調整したりできます。

print-style.css
@media print {
  /* ヘッダーとサイドバーを非表示 */
  .gaia-argoui-app-toolbar,
  .ocean-portal-header {
    display: none !important;
  }

  /* コンテンツ部分を全幅に */
  .gaia-argoui-app-show-detail {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 背景色を印刷可能に */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

ダークモード風のカスタマイズ

dark-theme.css
/* ダークモード風のテーマ（レコード詳細画面） */
.gaia-argoui-app-show-detail {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

.gaia-argoui-app-show-detail .control-label-field-gaia {
  color: #a0c4ff !important;
}

.gaia-argoui-app-show-detail .control-value-field-gaia {
  color: #e0e0e0 !important;
}

.gaia-argoui-app-show-detail input,
.gaia-argoui-app-show-detail textarea {
  background-color: #16213e !important;
  color: #e0e0e0 !important;
  border-color: #0f3460 !important;
}
チェック

ダークモードなどの大規模なテーマ変更は、kintone のアップデートでクラス名が変更された場合の影響が大きくなります。メンテナンスコストを考慮した上で導入を検討してください。

注意点

内部クラス名の変更リスク

kintone の CSS クラス名（-gaia や -argoui- を含むもの）は、kintone の内部実装に依存しています。kintone のフロントエンド刷新に伴い、これらのクラス名は変更される可能性があります。

チェック

kintone は現在フロントエンドの刷新を進めており、既存の CSS クラス名が変更される可能性があります。CSS カスタマイズに依存する実装は、アップデート情報を常に確認し、影響を受けた場合に迅速に対応できるようにしておくことが重要です。

CSS の優先度

kintone の標準 CSS を上書きするために !important を使用する場面が多くなりますが、乱用すると後から調整しにくくなります。できるだけ詳細度（specificity）の高いセレクタを使い、!important は最小限にとどめましょう。

specificity-example.css
/* ✕ !important の乱用 */
.some-element {
  color: red !important;
  font-size: 14px !important;
}

/* ○ 詳細度の高いセレクタを利用 */
.gaia-argoui-app .control-value-field-gaia .some-element {
  color: red;
  font-size: 14px;
}

まとめ

  • CSS ファイルは JavaScript と同じ画面からアプリに追加できる
  • フィールドの幅調整、レイアウト変更、配色変更など多彩なカスタマイズが可能
  • 条件付き書式は JavaScript と CSS を組み合わせて実装する
  • kintone の内部 CSS クラス名はアップデートで変更される可能性があるため、メンテナンスコストを考慮する
  • CSS による非表示はセキュリティ対策にならない点に注意
  • !important の使用は最小限にし、詳細度の高いセレクタを活用する
#kintone #CSS #JavaScript
前のページ
kintone.events.onで非同期処理(async/await)を使う - kintone
次のページ
kintone JavaScriptカスタマイズのデバッグ方法とよくあるエラーの解決策