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

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

• kintone全体のカスタマイズ
• アプリをカスタマイズ

本記事では、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のクラス名を指定しています。
kintoneのアップデートの影響を受けて、動かなくなる可能性があります。
注意事項

CSSの基本的な書き方が理解できたら、さっそくkintoneアプリで試してみましょう。
まずは、レコード一覧画面のヘッダーの背景に色をつけるカスタマイズを紹介します。

1. アプリストアの 顧客リスト を選択し、サンプルデータを含めるにチェックを入れ、アプリを作成します。

2. 次のCSSのコードを「sample.css」という名前で保存し、「JavaScript/CSSでカスタマイズ」に追加します。
   recordlist-header-cell-gaiaはヘッダー部分のクラス名です。

   1 2 3

   .recordlist-header-cell-gaia { background-color: yellow; }

次のように一覧画面のヘッダーの背景が黄色に変わっていることが確認できます。

kintoneのクラス名は変更される可能性があります。
そのため先ほど利用したrecordlist-header-cell-gaiaなどの、kintoneのクラス名を使用することは推奨されていません。
詳細は kintoneで使われているidやclass属性 を確認してください。

kintoneではカスタマイズビューや、JavaScriptでHTMLを作成できます。
また、作成したHTMLに対してJavaScriptでidやクラス属性を新たに付与できます。
作成したHTMLのidやクラス属性を利用する場合は、kintoneのクラス名が変更されても影響を受けません。

次に、JavaScriptで作成したボタンを使って、CSSでデザインを適用する方法を紹介します。
レコード一覧画面にボタンを配置してみよう で紹介したボタンに、CSSでカスタマイズしてみましょう。

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.recordlist-header-cell-gaia {
    background-color: yellow;
}

#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のデフォルトスタイルに合わせるためには、「51-modern-default」を利用します。
51-modern-default は、UIパーツをkintoneのデザインと調和させるためのスタイルシートです。
ボタンやテキストボックスなどのデザインをkintoneに合わせることができます。

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

1. ボタンに「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 = '一覧のボタン';

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

   ファイルをダウンロードする方法は、 51-modern-default.cssのダウンロード を参照してください。

3. sample.cssを削除し、ダウンロードした51-modern-default.cssを「JavaScript/CSSでカスタマイズ」に追加

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

   

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

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

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