はじめに
kintoneのデザインと調和するスタイルシートを適用したい場合は、パッケージングの際に「51-modern-default.css」を同梱し、下記のクラスを適用したいHTMLタグにご適用ください。
※表示例はブラウザの設定によって表示が一部変わる可能性がございます。
※2017/06/14 CSSのファイル名を変更しています。
次のファイルの内容はすべて同じです。
- 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のデザインと調和しなくなる可能性があります。
- デザインの変更によるスタイルの保障は致しませんのでご注意ください。
記事に関するフィードバック
直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。