kintoneスタイルシート記述サンプル
kintoneプラグイン開発用に提供されているスタイルシートを、従来のkintoneカスタマイズでも利用してUIの統一性をもたせるために利用したく、jQueryによる記載例を書き出しました。
（参考：「cybozu.com developer network > kintone plugin > スタイルシートの利用」）
テーブルのスタイルも 51-modern-default.js から新しく登場していますが、HTMLのテンプレートエンジンやJavaScriptのフレームワークと一緒に使わないとjQueryを使ってのロジックの落とし込みはコードが煩雑になりそうです。
メッセージ
表示例
メッセージのスタイル、
メッセージのスタイル
メッセージのスタイル
記述例（HTML）
メッセージのスタイル、
メッセージのスタイル
メッセージのスタイル
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-alert').append(
$('<p>').html('メッセージのスタイル、
メッセージのスタイル'),
$('<p>').text('メッセージのスタイル')
)
);
設定項目の行
表示例
設定項目の行 1
設定項目の行 2
記述例（HTML）
設定項目の行 1
設定項目の行 2
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-row').text('設定項目の行 1'),
$('<div>').addClass('kintoneplugin-row').html('設定項目の行 2')
);
設定項目の見出し（ラベル・必須項目）
表示例
設定項目の見出し
必須項目の見出し
*
記述例（HTML）
設定項目の見出し
必須項目の見出し
*
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-label').text('設定項目の見出し')
);
$('#container').append(
$('<div>').addClass('kintoneplugin-label').text('必須項目の見出し').append(
$('<span>').addClass('kintoneplugin-require').html('*')
)
);
設定項目名（ラベル・必須項目）
表示例
設定項目名
必須の設定項目名
*
記述例（HTML）
設定項目名
必須の設定項目名
*
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-title').text('設定項目名')
);
$('#container').append(
$('<div>').addClass('kintoneplugin-title').text('必須の設定項目名').append(
$('<span>').addClass('kintoneplugin-require').html('*')
)
);
設定項目の説明
表示例
設定項目名
設定項目の説明
記述例（HTML）
設定項目名
設定項目の説明
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-title').text('設定項目名'),
$('<div>').addClass('kintoneplugin-desc').text('設定項目の説明')
);
テキストボックス
表示例
記述例（HTML）
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-input-outer').append(
$('<input>').prop('type', 'text').addClass('kintoneplugin-input-text')
)
);
チェックボックス
表示例
記述例（HTML）
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-input-checkbox').append(
$('<span>').addClass('kintoneplugin-input-checkbox-item').append(
$('<input>').prop('type', 'checkbox').prop('name', 'checkbox').prop('id', 'checkbox-0').val(0).prop('checked', true),
$('<label>').prop('for', 'checkbox-0').html('チェックボックスA')
)
)
);
$('#container').append(
$('<div>').addClass('kintoneplugin-input-checkbox').append(
$('<span>').addClass('kintoneplugin-input-checkbox-item').append(
$('<input>').prop('type', 'checkbox').prop('name', 'checkbox').prop('id', 'checkbox-1').val(1),
$('<label>').prop('for', 'checkbox-1').html('チェックボックスB')
)
)
);
$('#container').append(
$('<div>').addClass('kintoneplugin-input-checkbox').append(
$('<span>').addClass('kintoneplugin-input-checkbox-item').append(
$('<input>').prop('type', 'checkbox').prop('name', 'checkbox').prop('id', 'checkbox-2').val(2).prop('checked', true).prop('disabled', true),
$('<label>').prop('for', 'checkbox-2').html('チェックボックスC')
)
)
);
$('#container').append(
$('<div>').addClass('kintoneplugin-input-checkbox').append(
$('<span>').addClass('kintoneplugin-input-checkbox-item').append(
$('<input>').prop('type', 'checkbox').prop('name', 'checkbox').prop('id', 'checkbox-3').val(3).prop('disabled', true),
$('<label>').prop('for', 'checkbox-3').html('チェックボックスD')
)
)
);
ドロップダウンリスト
表示例
ドロップダウン
オプションA
オプションB
オプションC
記述例（HTML）
ドロップダウン
オプションA
オプションB
オプションC
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-dropdown-outer').append(
$('<div>').addClass('kintoneplugin-dropdown').append(
$('<div>').addClass('kintoneplugin-dropdown-selected').append(
$('<span>').addClass('kintoneplugin-dropdown-selected-name').text('ドロップダウン')
)
)
)
);
$('#container').append(
$('<div>').addClass('kintoneplugin-dropdown-list').append(
$('<div>').addClass('kintoneplugin-dropdown-list-item').addClass('kintoneplugin-dropdown-list-item-selected').append(
$('<span>').addClass('kintoneplugin-dropdown-list-item-name').text('オプションA')
),
$('<div>').addClass('kintoneplugin-dropdown-list-item').append(
$('<span>').addClass('kintoneplugin-dropdown-list-item-name').text('オプションB')
),
$('<div>').addClass('kintoneplugin-dropdown-list-item').append(
$('<span>').addClass('kintoneplugin-dropdown-list-item-name').text('オプションC')
)
)
);
セレクトボックス
表示例
記述例（HTML）
記述例（jQuery）
var options, $option;
var list = {
key1: 'ドロップダウンリストA',
key2: 'ドロップダウンリストB',
key3: 'ドロップダウンリストC'
};
options = $.map(list, function (item, key) {
$option = $('<option>', { text: item });
return $option;
});
$('#container').append(
$('<div>').addClass('kintoneplugin-select-outer').append(
$('<div>').addClass('kintoneplugin-select').append(
$('<select>').append(
options
)
)
)
);
ラジオボタン
表示例
記述例（HTML）
記述例（jQuery）
$('#container').append(
$('<div>').addClass('kintoneplugin-input-radio').append(
$('<span>').addClass('kintoneplugin-input-radio-item').append(
$('<input>').prop('type', 'radio').prop('name', 'radio').prop('id', 'radio-0').val(0).prop('checked', true),
$('<label>').prop('for', 'radio-0').html('ラジオボタンA')
),
$('<span>').addClass('kintoneplugin-input-radio-item').append(
$('<input>').prop('type', 'radio').prop('name', 'radio').prop('id', 'radio-1').val(1),
$('<label>').prop('for', 'radio-1').html('ラジオボタンB')
)
)
);
ボタン
表示例
記述例（HTML）
記述例（jQuery）
$('#container').append(
$('<button>').addClass('kintoneplugin-button-normal').text('通常のボタン')
);
$('#container').append(
$('<button>').addClass('kintoneplugin-button-disabled').text('disabledのボタン')
);
$('#container').append(
$('<button>').addClass('kintoneplugin-button-dialog-ok').text('ダイアログのOKボタン')
);
$('#container').append(
$('<button>').addClass('kintoneplugin-button-dialog-cancel').text('ダイアログのキャンセルボタン')
);
テーブル
表示例
| 列タイトル | |
|---|---|
|
|
記述例（HTML）
| 列タイトル | |
|---|---|
|
|