スタイルシートの利用

フォローする

はじめに

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

「51-modern-default.css」スタイルシート対応表

クラス名 表示例 利用例
kintoneplugin-alert
  • メッセージ・注意書きの表示
    cap-001.PNG
kintoneplugin-row
  • 設定項目の行
    cap-002.PNG
kintoneplugin-label
  • 設定項目の見出し
    cap-003.PNG
kintoneplugin-title
  • 設定項目名
    cap-004.PNG
kintoneplugin-require
  • 必須項目マーク 
    cap-005.PNG
kintoneplugin-desc
  • 設定項目の説明 
    cap-006.PNG
kintoneplugin-input-outer
kintoneplugin-input-text
  • テキストボックスの装飾 
    cap-007.PNG
kintone-plugin-input-checkbox
kintone-plugin-input-checkbox-item
  • チェックボックス 
    cap-008.PNG
kintoneplugin-dropdown-outer
kintoneplugin-dropdown
kintoneplugin-dropdown-selected
  • 選択メニュー 
    cap-009.PNG
kintoneplugin-dropdown-list
kintoneplugin-dropdown-list-item
kintoneplugin-dropdown-list-item-selected
kintoneplugin-dropdown-list-item-name
  • 選択メニューの選択リスト 
    cap-010.PNG
kintoneplugin-select-outer
kintoneplugin-select
  • 選択メニュー+選択リスト
    cap-011.PNG
kintoneplugin-input-radio
kintoneplugin-input-radio-item
  • ラジオボタン 
    cap-012.PNG
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
  • テーブル 
    cap-013.PNG
kintoneplugin-button-normal
  • 通常のボタン 
    cap-014.PNG
kintoneplugin-button-disabled
  • 利用不可の時のボタン
    cap-015.PNG
kintoneplugin-button-dialog-ok
  • ダイアログのOKボタン 
    cap-016.PNG
kintoneplugin-button-dialog-cancel
  • ダイアログのキャンセルボタン 
    cap-017.PNG

注意事項

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk