Skip to content

Instantly share code, notes, and snippets.

@fddcddhdd

fddcddhdd/kintone_css.html

Created July 8, 2015 04:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fddcddhdd/ba87ac454fa09b86dd41 to your computer and use it in GitHub Desktop.
Save fddcddhdd/ba87ac454fa09b86dd41 to your computer and use it in GitHub Desktop.
Download ZIP
kintoneのcssファイルを使ったHTMLパーツのサンプル
Raw
kintone_css.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/kintone/plugin-sdk/master/stylesheet/51-jp-default.css">
</head>
<body>
<div class="kintoneplugin-alert">
<p>このメッセージは注意書きです。</p>
</div>
<div class="kintoneplugin-row">設定項目の行</div>
<div class="kintoneplugin-label">設定項目の見出し</div>
<div class="kintoneplugin-label">設定項目の見出し<span class="kintoneplugin-require">*</span></div>
<div class="kintoneplugin-input-outer">
<input class="kintoneplugin-input-text" type="text">
</div>
<div class="kintoneplugin-input-checkbox"><span class="kintoneplugin-input-checkbox-item"><input type="checkbox" name="checkbox" value="0" id="checkbox-0" checked=""><label for="checkbox-0">チェックボックスA</label></span></div>
<div class="kintoneplugin-input-checkbox"><span class="kintoneplugin-input-checkbox-item"><input type="checkbox" name="checkbox" value="1" id="checkbox-1"><label for="checkbox-1">チェックボックスB</label></span></div>
<div class="kintoneplugin-input-checkbox"><span class="kintoneplugin-input-checkbox-item"><input type="checkbox" name="checkbox" value="2" id="checkbox-2" checked="" disabled=""><label for="checkbox-2">チェックボックスC</label></span></div>
<div class="kintoneplugin-input-checkbox"><span class="kintoneplugin-input-checkbox-item"><input type="checkbox" name="checkbox" value="3" id="checkbox-3" disabled=""><label for="checkbox-3">チェックボックスD</label></span></div>
<div class="kintoneplugin-dropdown-outer">
<div class="kintoneplugin-dropdown">
<div class="kintoneplugin-dropdown-selected"><span class="kintoneplugin-dropdown-selected-name">ドロップダウン</span></div>
</div>
</div>
<div class="kintoneplugin-dropdown-list">
<div class="kintoneplugin-dropdown-list-item kintoneplugin-dropdown-list-item-selected"><span class="kintoneplugin-dropdown-list-item-name">オプションA</span></div>
<div class="kintoneplugin-dropdown-list-item"><span class="kintoneplugin-dropdown-list-item-name">オプションB</span></div>
<div class="kintoneplugin-dropdown-list-item"><span class="kintoneplugin-dropdown-list-item-name">オプションC</span></div>
</div>
<div class="kintoneplugin-select-outer">
<div class="kintoneplugin-select">
<select>
<option>セレクトA</option>
<option>セレクトB</option>
<option>セレクトC</option>
</select>
</div>
</div>
<div class="kintoneplugin-input-radio">
<span class="kintoneplugin-input-radio-item">
<input type="radio" name="radio" value="0" id="radio-0" checked="">
<label for="radio-0">ラジオボタンA</label>
</span>
<span class="kintoneplugin-input-radio-item">
<input type="radio" name="radio" value="1" id="radio-1">
<label for="radio-1">ラジオボタンB</label>
</span>
</div>
<button class="kintoneplugin-button-normal">通常のボタン</button>
<button class="kintoneplugin-button-disabled">利用不可のボタン</button>
<button class="kintoneplugin-button-dialog-ok">ダイアログのOKボタン</button>
<button class="kintoneplugin-button-dialog-cancel">ダイアログのキャンセルボタン</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment