CSSカスタマイズの基本

にメンテナンス済み

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

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

CSS ファイルの追加方法

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

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

PC 用とスマートフォン用でファイルは別々に設定します。複数のファイルを追加した場合は、上から順に読み込まれます。

CSS カスタマイズの基本方針

kintone の画面は HTML 要素にクラス名が付与されていますが、そのクラス名の多くは公式に仕様が公開されていません。そのため、次の方針でカスタマイズすると壊れにくくなります。

  • 画面上の要素は、可能な限り JavaScript API（kintone.app.record.getFieldElement や kintone.app.getFieldElements、getSpaceElement など）で取得する
  • 独自のクラスを JavaScript で付与し、CSS ではそのクラスだけを指定する
  • kintone 内部のクラス名（-gaia や -argoui- を含むもの）を指定する場合は、アップデート後に必ず動作確認する
チェック

kintone の内部 CSS クラス名は公式にサポートされているものではなく、予告なく変更される可能性があります。内部クラス名に依存した CSS は、アップデート後に動作確認を行うことを推奨します。

独自クラスでフィールドのスタイルを変更する

詳細画面や編集画面のフィールド要素は、kintone.app.record.getFieldElement(フィールドコード) で取得できます。ここに独自のクラスを付与し、CSS から参照します。

add-class.js
(() => {
  'use strict';

  kintone.events.on(['app.record.detail.show', 'app.record.edit.show'], (event) => {
    const titleElement = kintone.app.record.getFieldElement('タイトル');
    if (titleElement) titleElement.classList.add('my-title-field');

    // 以降の例で使うクラスも、同じ要領で付与する
    const wideElement = kintone.app.record.getFieldElement('説明');
    if (wideElement) wideElement.classList.add('my-wide-field');

    return event;
  });
})();
field-style.css
/* 「タイトル」フィールドの表示を変更 */
.my-title-field {
  font-weight: bold;
  color: #333;
}
チェック

フィールドの HTML 要素に付く field- や value- から始まるクラス名には、フィールドコードではなくフィールド ID（数値）が使われています。フィールドコードを CSS に直接書いても適用されません。

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

入力欄の幅を変えたい場合も、同様に独自クラスを付与してから CSS で調整します。

field-width.css
/* 独自クラスを付与したフィールドの入力欄を広くする */
.my-wide-field input {
  width: 100%;
  max-width: 600px;
}

/* 複数行テキストの高さを調整 */
.my-wide-field textarea {
  min-height: 200px;
}

なお、フィールドの幅や並び順は、フォームの設計画面でも調整できます。CSS はフォームの設定では実現できない場合に使うのが基本です。

CSS でフィールドを非表示にする

独自クラスを付与すれば、CSS でフィールドを非表示にすることもできます。ただし getFieldElement で取得できるのは値の部分のみで、ラベルは残ります。ラベルも含めて隠す場合は、kintone.app.record.setFieldShown を使うほうが確実です。

hide-field.css
/* JavaScript で classList.add('my-hidden-field') したフィールドの値を非表示にする */
.my-hidden-field {
  display: none;
}
チェック

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

フィールドの表示/非表示
kintone JavaScript カスタマイズで、フィールドの表示・非表示を動的に切り替える方法を解説します。setFieldShown を使った基本的な使い方から、フィールド値に応じた条件分岐、グループフィールドの制御、モバイル対応、

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

フィールドの値に応じてレコード一覧の見た目を変える、いわゆる「条件付き書式」は、JavaScript と CSS の組み合わせで実装します。一覧画面のフィールド要素は kintone.app.getFieldElements(フィールドコード) で取得でき、返される配列の順序はレコードの表示順と一致します。

チェック

getFieldElements で取得できるのは、一覧に表示しているフィールドだけです。対象フィールドが一覧に含まれていない場合は null が返ります。

ステータスに応じて行の背景色を変える

status-row.css
.status-open > td {
  background-color: #fff3f3;
}

.status-progress > td {
  background-color: #fff9e6;
}

.status-done > td {
  background-color: #f0fff0;
}
conditional-format.js
(() => {
  'use strict';

  const STATUS_CLASS = {
    未対応: 'status-open',
    対応中: 'status-progress',
    完了: 'status-done',
  };

  kintone.events.on('app.record.index.show', (event) => {
    const elements = kintone.app.getFieldElements('ステータス');
    if (!elements) return event;

    event.records.forEach((record, index) => {
      const className = STATUS_CLASS[record['ステータス'].value];
      const row = elements[index]?.closest('tr');
      if (className && row) row.classList.add(className);
    });

    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';

  const PRIORITY_CLASS = {
    高: 'priority-high',
    中: 'priority-medium',
    低: 'priority-low',
  };

  kintone.events.on('app.record.index.show', (event) => {
    const elements = kintone.app.getFieldElements('優先度');
    if (!elements) return event;

    event.records.forEach((record, index) => {
      const element = elements[index];
      const priority = record['優先度'].value;
      if (!element || !PRIORITY_CLASS[priority]) return;

      const badge = document.createElement('span');
      badge.className = `priority-badge ${PRIORITY_CLASS[priority]}`;
      badge.textContent = priority;

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

    return event;
  });
})();

便利な CSS テクニック

印刷時のスタイル調整

@media print を使うと、印刷時だけ適用するスタイルを書けます。非表示にしたい要素のクラス名は、ブラウザーの開発者ツールで確認してください。

print-style.css
@media print {
  /* 背景色を印刷対象に含める */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 印刷時に非表示にしたい要素（JavaScript で独自クラスを付与して指定する） */
  .no-print {
    display: none !important;
  }
}
チェック

印刷レイアウトを細かく制御したい場合は、kintone 標準の「印刷」機能やプラグインの利用も検討してください。内部クラス名への依存を最小限にできます。

注意点

CSS の優先度

kintone の標準 CSS を上書きするために !important が必要になる場面もありますが、乱用すると後から調整しにくくなります。独自クラスを使い、セレクタの詳細度（specificity）で優先させ、!important は最小限にとどめましょう。

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

/* ○ 親要素を含めて詳細度を高める */
.my-wide-field .some-element {
  color: red;
  font-size: 14px;
}

動作確認のポイント

  • PC 用とスマートフォン用で CSS ファイルを別々に設定している
  • アプリの更新（運用環境への反映）を忘れていない
  • ブラウザーのキャッシュで古い CSS が表示されていない
  • kintone のアップデート後に、表示崩れが起きていない

まとめ

  • CSS ファイルは JavaScript と同じ画面（「JavaScript / CSS でカスタマイズ」）から追加でき、PC 用とスマートフォン用は別々に設定する
  • kintone の内部クラス名に直接依存せず、JavaScript API で取得した要素に独自クラスを付与して CSS で装飾すると壊れにくい
  • field- や value- のクラス名にはフィールドコードではなくフィールド ID が使われる
  • 条件付き書式は getFieldElements と CSS クラスの付与で実装できる
  • CSS による非表示はセキュリティ対策にならない。アクセス権設定を使う
  • !important は最小限にし、詳細度で優先順位を制御する
#kintone #CSS #JavaScript
前のページ
kintone.events.onで非同期処理(async/await)を使う - kintone
次のページ
kintone JavaScriptカスタマイズのデバッグ方法とよくあるエラーの解決策