kintoneカスタマイズでよくあるCSSの書き方サンプル

固定リンクがコピーされました

更新日：2026年07月29日

）

はじめに

固定リンクがコピーされました

CSS（Cascading Style Sheets）とは、HTML要素のスタイルを定義するための言語です。
kintoneでCSSカスタマイズをすると、ボタンやテキストボックスなどのデザインを自由にカスタマイズできます。
また、カスタマイズビューで作成した一覧画面にデザインを当てたり、ポータルやスペースのデザインを変更したりできます。

kintoneにCSSを適用するには、次の2つの方法があります。

本記事では、CSSの基本的な書き方と、CSSでアプリをカスタマイズする方法を紹介します。

CSSの基本的な書き方

固定リンクがコピーされました

CSSを構成する部分は、大きく分けて「セレクタ」「プロパティ」「値」です。
次のようなフォーマットにしたがって、セレクタ、プロパティ、値を記述します。

1
2
3


セレクタ {
  プロパティ: 値;
}

セレクタはスタイルを適用する範囲のことで、HTMLの要素名や属性を指定します。
また、適用するスタイルをプロパティと値のセットで記述します。

たとえば、pタグのテキストの色を赤にして、背景色を黄色にする場合は、次のように記述します。

1
2
3
4


p {
  color: red;
  background-color: yellow;
}

ただし、セレクタにpタグのようなよく使われるHTMLの要素名を指定すると、意図しない箇所にも適用される可能性があります。
そのため、実際に利用する場合はCSSが適用される範囲を制御するため、セレクタにはidやクラス属性を利用することが多いです。
id属性の場合は#id名、クラス属性の場合は.クラス名のように記載します。

その他にも、文字サイズやマージンなど、さまざまなHTML要素のデザインを変更できます。
詳細は CSS: カスケーディングスタイルシート | MDN を確認してください。

kintoneでCSSを使うときの注意点

固定リンクがコピーされました

kintoneのクラス名は変更される可能性があります。
そのため、たとえばrecordlist-header-cell-gaiaのようなkintoneが付与したクラス名を、CSSセレクタに指定することは推奨されていません。
詳細は kintoneで使われているidやclass属性を確認してください。

kintoneでは、カスタマイズビューやJavaScriptを使ってHTMLを作成できます。
また、作成したHTML要素には、JavaScriptでidやクラス属性を付与できます。
これらのidやクラス属性を利用すると、kintoneのクラス名が変更されても影響を受けにくくなります。

ボタンをCSSでカスタマイズしてみよう

固定リンクがコピーされました

ここでは、kintoneが付与したクラス属性を使わず、カスタマイズで作成した要素にid属性を付与し、そのid属性を指定したCSSセレクタを使う方法を紹介します。
レコード一覧画面にボタンを配置してみようで紹介したボタンを、CSSでカスタマイズしてみましょう。

ボタンを作成する

固定リンクがコピーされました

ボタンを作成する方法は、レコード一覧画面にボタンを配置してみようのサンプルコードを確認してください。

CSSでカスタマイズする

固定リンクがコピーされました

ボタン作成時に付与したmenu_buttonのid属性を使い、作成したボタンに対してCSSを適用します。
次のCSSを「sample.css」へ記述し、kintoneに適用します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


#menu_button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#menu_button:hover {
  background-color: darkblue;
}

プロパティと値の設定内容は、ぜひ調べてみてください。
次のように、ボタンのデザインが適用されます。

kintoneのデザインに合わせてみよう

固定リンクがコピーされました

最後に、kintoneのデザインに合わせたカスタマイズ方法を紹介します。
kintoneのデフォルトスタイルに合わせるためには、「51-modern-default」を利用します。
51-modern-default は、UIパーツをkintoneのデザインと調和させるためのスタイルシートです。
ボタンやテキストボックスなどのデザインをkintoneに合わせることができます。

それでは作成したボタンをkintoneのデザインに合わせてみましょう。

ボタンに「51-modern-default」のクラス名を追加

ボタンを作成する処理に、kintoneplugin-button-normalを付与するコードを一行追加します。
kintoneplugin-button-normalは「51-modern-default」のボタンをデザインするクラス名です。

1
2
3
4
5


// ボタンを作成
const menuButton = document.createElement('button');
menuButton.id = 'menu_button';
menuButton.classList.add('kintoneplugin-button-normal');
menuButton.innerText = '一覧のボタン';

「51-modern-default」をダウンロード

ファイルをダウンロードする方法は、 51-modern-default.cssのダウンロードを参照してください。
sample.cssを削除し、ダウンロードした51-modern-default.cssを「JavaScript/CSSでカスタマイズ」に追加

次の画像のように、CSSファイルを設定してください。

再度一覧画面を開くと、kintoneのデフォルトスタイルに合ったボタンが表示されます。

おわりに

固定リンクがコピーされました

kintoneをCSSでカスタマイズすると、見た目を自由に変更できます。
今回は、作成したボタンの見た目を変更するサンプルを紹介しましたが、カスタマイズビューやプラグイン、ポータルやスペースでも同じ要領でカスタマイズできます。
より使いやすいkintoneを目指して、CSSカスタマイズに挑戦してみましょう。

このTipsは、2026年7月版kintoneで動作を確認しています。

kintone API

開発ノウハウ