はじめに
kintoneのデザインと調和するスタイルシートを適用したい場合は、パッケージングの際にGithub上の「51-modern-default.css」を同梱し、下記のクラスを適用したいHTMLタグにご適用ください。
「51-modern-default.css」スタイルシート対応表
| クラス名 | 表示例 | 利用例 |
|---|---|---|
| kintoneplugin-alert |
|
|
| kintoneplugin-row |
|
|
| kintoneplugin-label |
|
|
| kintoneplugin-title |
|
|
| kintoneplugin-require |
|
|
| kintoneplugin-desc |
|
|
| kintoneplugin-input-outer kintoneplugin-input-text |
|
|
| kintoneplugin-input-checkbox kintoneplugin-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-name |
|
|
| kintoneplugin-select-outer kintoneplugin-select |
|
|
| 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 |
|
|
| kintoneplugin-button-dialog-cancel |
|
注意事項
- 今後のデザイン変更によって提供するスタイルのレイアウトが崩れたり、kintoneのデザインと調和しなくなる可能性があります。
- デザインの変更によるスタイルの保障は致しませんのでご注意ください。
- 表示例はブラウザの設定によって表示が一部変わる可能性がございます。
記事に関するフィードバック
直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。