51-modern-default

目次

51-modern-defaultとは

51-modern-defaultは、kintoneのデザインと調和するUIパーツのスタイルシート(CSS)です。

GitHub

https://github.com/kintone-samples/plugin-samples/blob/master/stylesheet/51-modern-default.css (External link)

ライセンス

MITライセンス (External link)

ドキュメント

Quick Start

レコード一覧のメニューの右側へ、kintoneに調和したボタンを追加するカスタマイズです。

Step1:kintoneアプリの準備

kintoneアプリを作成します。
フィールドを配置する必要はありません。

Step2:サンプルコードの作成

  1. 次の内容をテキストエディタに貼り付けます。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    /*
    * 51-modern-default sample
    *
    * Licensed under the MIT License
    * https://opensource.org/license/mit/
    */
    
    (() => {
      'use strict';
      kintone.events.on('app.record.index.show', async (event) => {
        // レコード一覧のメニューの右側の要素を取得する
        const headerSpace = kintone.app.getHeaderMenuSpaceElement();
    
        const button = document.createElement('button');
        button.textContent = 'Hello kintone';
        button.className = 'kintoneplugin-button-normal';
        headerSpace.appendChild(button);
    
        return event;
      });
    })();
  2. 文字コードを「UTF-8」、ファイルの拡張子を「.js」にしてファイルを保存します。
    この記事ではファイル名を「kintone-like-css-sample.js」としています

Step3:51-modern-default.cssのダウンロード

  1. 51-modern-default.css (External link) の内容を、テキストエディタに貼り付けます。

  2. 文字コードを「UTF-8」、ファイルの拡張子を「.css」にして、ファイルを保存します。
    この記事ではファイル名を「51-modern-default.css」としています。

Step4:kintoneアプリに適用

STEP1で作成したアプリに、kintoneカスタマイズファイルを適用します。
手順の詳細は、 JavaScriptやCSSでアプリをカスタマイズする (External link) を確認してください。

  1. 次の内容で、カスタマイズファイルを指定します。

    • PC用のJavaScriptファイル
      • サンプルコード(kintone-like-css-sample.js)
    • PC用のCSSファイル
      • 51-modern-default.css
  2. 「アプリの設定」画面で、【アプリを更新】をクリックします。

Step5:動作確認

  1. カスタマイズを適用したアプリの一覧画面を開きます。

  2. kintoneに調和するスタイルが、メニュー右のスペースへ挿入されたボタンに適用されていることを確認します。

ドキュメント

アラートメッセージ

注意書きの表示
クラス名
kintoneplugin-alert
表示例

利用例
1
2
3
<div class="kintoneplugin-alert">
<p>このメッセージは注意書きです。</p>
</div>

ラベル

設定項目の行
クラス名
kintoneplugin-row
表示例

利用例
1
2
<div class="kintoneplugin-row">設定項目の行A</div>
<div class="kintoneplugin-row">設定項目の行B</div>
設定項目の見出し
クラス名
kintoneplugin-label
表示例

利用例
1
<div class="kintoneplugin-label">設定項目の見出し</div>
設定項目名
クラス名
kintoneplugin-title
表示例

利用例
1
<div class="kintoneplugin-title">設定項目名</div>
必須項目マーク
クラス名
kintoneplugin-require
表示例

利用例
1
<div class="kintoneplugin-title">設定項目名<span class="kintoneplugin-require">*</span></div>
設定項目の説明
クラス名
kintoneplugin-desc
表示例

利用例
1
<div class="kintoneplugin-desc">設定項目の説明</div>

テキストボックス

テキストボックス
クラス名
kintoneplugin-input-outer
kintoneplugin-input-text
表示例

利用例
1
2
3
<div class="kintoneplugin-input-outer">
  <input class="kintoneplugin-input-text" type="text">
</div>

チェックボックス

チェックボックス
クラス名
kintoneplugin-input-checkbox
kintoneplugin-input-checkbox-item
表示例

利用例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="0" id="checkbox-0" checked="">
    <label for="checkbox-0">チェックボックスA</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="1" id="checkbox-1">
    <label for="checkbox-1">チェックボックスB</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="2" id="checkbox-2" checked="" disabled="">
    <label for="checkbox-2">チェックボックスC</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="3" id="checkbox-3" disabled="">
    <label for="checkbox-3">チェックボックスD</label>
  </span>
</div>
クラス名
kintoneplugin-dropdown-outer
kintoneplugin-dropdown
kintoneplugin-dropdown-selected
表示例

利用例
1
2
3
4
5
6
7
<div class="kintoneplugin-dropdown-outer">
  <div class="kintoneplugin-dropdown">
    <div class="kintoneplugin-dropdown-selected">
      <span class="kintoneplugin-dropdown-selected-name">ドロップダウン</span>
    </div>
  </div>
</div>
クラス名
kintoneplugin-dropdown-list
kintoneplugin-dropdown-list-item
kintoneplugin-dropdown-list-item-selected
kintoneplugin-dropdown-list-item-name
表示例

利用例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="kintoneplugin-dropdown-list">
  <div class="kintoneplugin-dropdown-list-item kintoneplugin-dropdown-list-item-selected">
    <span class="kintoneplugin-dropdown-list-item-name">オプションA</span>
  </div>
  <div class="kintoneplugin-dropdown-list-item">
    <span class="kintoneplugin-dropdown-list-item-name">オプションB</span>
  </div>
  <div class="kintoneplugin-dropdown-list-item">
    <span class="kintoneplugin-dropdown-list-item-name">オプションC</span>
  </div>
</div>
クラス名
kintoneplugin-select-outer
kintoneplugin-select
表示例

利用例
1
2
3
4
5
6
7
8
9
<div class="kintoneplugin-select-outer">
<div class="kintoneplugin-select">
    <select>
      <option>セレクトA</option>
      <option>セレクトB</option>
      <option>セレクトC</option>
    </select>
</div>
</div>

ラジオボタン

ラジオボタン
クラス名
kintoneplugin-input-radio
kintoneplugin-input-radio-item
表示例

利用例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="kintoneplugin-input-radio">
<span class="kintoneplugin-input-radio-item">
  <input type="radio" name="radio" value="0" id="radio-0" checked="">
  <label for="radio-0">ラジオボタンA</label>
</span>
<span class="kintoneplugin-input-radio-item">
  <input type="radio" name="radio" value="1" id="radio-1">
  <label for="radio-1">ラジオボタンB</label>
</span>
</div>

テーブル

テーブル
クラス名
kintoneplugin-table
kintoneplugin-table-th
kintoneplugin-table-th-blankspace
kintoneplugin-table-td-control
kintoneplugin-table-td-control-value
kintoneplugin-table-td-operation
kintoneplugin-button-add-row-image
kintoneplugin-button-remove-row-image
表示例

利用例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table class="kintoneplugin-table">
  <thead>
    <tr>
      <th class="kintoneplugin-table-th"><span class="title">列タイトル</span></th>
      <th class="kintoneplugin-table-th-blankspace"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="kintoneplugin-table-td-control">
          <div class="kintoneplugin-table-td-control-value">
            <div class="kintoneplugin-input-outer">
              <input class="kintoneplugin-input-text" type="text">
            </div>
          </div>
        </div>
      </td>
      <td class="kintoneplugin-table-td-operation">
        <button type="button" class="kintoneplugin-button-add-row-image" title="Add row"></button>
        <button type="button" class="kintoneplugin-button-remove-row-image" title="Delete this row"></button>
      </td>
    </tr>
  </tbody>
</table>

ボタン

通常のボタン
クラス名
kintoneplugin-button-normal
表示例

利用例
1
<button class="kintoneplugin-button-normal">通常のボタン</button>
利用不可のときのボタン
クラス名
kintoneplugin-button-disabled
表示例

利用例
1
<button class="kintoneplugin-button-disabled">利用不可のボタン</button>
ダイアログのOKボタン
クラス名
kintoneplugin-button-dialog-ok
表示例

利用例
1
<button class="kintoneplugin-button-dialog-ok">ダイアログのOKボタン</button>
ダイアログのキャンセルボタン
クラス名
kintoneplugin-button-dialog-cancel
表示例

利用例
1
<button class="kintoneplugin-button-dialog-cancel">ダイアログのキャンセルボタン</button>

注意事項

  • ブラウザーの設定によって、表示例と異なる見た目になることがあります。
  • kintoneのアップデートによって、提供するスタイルのレイアウトが崩れる可能性や、kintoneのデザインと調和しなくなる可能性があります。
    information

    この記事で紹介しているサンプルコードは、2022年5月版kintoneで動作を確認しています。