スタイルシートの利用

はじめに

kintoneのデザインと調和するスタイルシートを適用したい場合は、パッケージングの際に「51-modern-default.css」を同梱し、下記のクラスを適用したいHTMLタグにご適用ください。

※表示例はブラウザの設定によって表示が一部変わる可能性がございます。

• 51-us-default.css
• 51-current-default.css
• 51-modern-default.css

メッセージ

kintoneplugin-alert

利用用途

注意書きの表示など

利用例

表示例

設定項目

kintoneplugin-row

利用用途

設定項目の行

利用例

表示例

kintoneplugin-label

利用用途

設定項目の見出し

利用例

表示例

kintoneplugin-title

利用用途

設定項目名

利用例

表示例

kintoneplugin-require

利用用途

必須項目マーク

利用例

表示例

kintoneplugin-desc

利用用途

設定項目の説明

利用例

表示例

テキストボックス

kintoneplugin-input-outer

kintoneplugin-input-text

利用用途

テキストボックスの装飾

利用例

表示例

チェックボックス

kintone-plugin-input-checkbox

kintone-plugin-input-checkbox-item

利用用途

チェックボックス

利用例

表示例

選択メニュー

kintoneplugin-dropdown-outer

kintoneplugin-dropdown

kintoneplugin-dropdown-selected

利用用途

選択メニュー

利用例

表示例

kintoneplugin-dropdown-list

kintoneplugin-dropdown-list-item.kintoneplugin-dropdown-list-item-selected

kintoneplugin-dropdown-list-item

利用用途

選択メニューの選択リスト

利用例

表示例

kintoneplugin-select-outer

kintoneplugin-select

利用用途

選択メニュー+選択リスト ※IE8未対応

利用例

表示例

ラジオボタン

kintoneplugin-input-radio

kintoneplugin-input-radio-item

利用用途

ラジオボタン

利用例

表示例

テーブル

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

利用用途

テーブル

利用例

表示例

ボタン

kintoneplugin-button-normal

利用用途

通常のボタン

利用例

表示例

kintoneplugin-button-disabled

利用用途

利用不可の時のボタン

利用例

表示例

kintoneplugin-button-dialog-ok

利用用途

ダイアログのOKボタン

利用例

表示例

kintoneplugin-button-dialog-cancel

利用用途

ダイアログのキャンセルボタン

利用例

表示例

注意事項

• 今後のデザイン変更によって提供するスタイルのレイアウトが崩れたり、kintoneのデザインと調和しなくなる可能性があります。
• デザインの変更によるスタイルの保障は致しませんのでご注意ください。