ボタンのサンプル

kintone で JavaScript カスタマイズを行う際、多くの場合そのトリガーとしてボタンを使用します。

この記事では、kintone の標準 UI になじむボタンのデザインサンプルを、そのまま使える HTML/CSS とあわせて紹介します。

シンプルな kintone 風ボタン

定義するスタイルを最小限に抑えたシンプルな kintone 風ボタンのサンプルです。

<button type="button">ボタン</button>

:root {
  --k-primary: 204 70% 53%;
  --k-primary-accent: 204 70% 38%;
  --k-primary-foreground: 0 0 100%;
  --k-border: 192 10% 90%;
}
button {
  box-sizing: border-box;
  border: 1px solid hsl(var(--k-border));
  background-color: hsl(var(--k-primary));
  color: hsl(var(--k-primary-foreground));
  &:hover,
  &:focus {
    background-color: hsl(var(--k-primary-accent));
  }

  min-width: 163px;
  padding: 0 1em;
  line-height: 3;

  cursor: pointer;
  outline: none;
}

影と角丸を追加したリッチなボタン

影と角丸を追加したリッチなボタンのサンプルです。

また、transition プロパティを使用して、ボタンのホバー時のアニメーションを追加しています。

<button type="button">ボタン</button>

:root {
  --k-primary: 204 70% 53%;
  --k-primary-accent: 204 70% 38%;
  --k-primary-foreground: 0 0 100%;
  --k-border: 192 10% 90%;
}
button {
  box-sizing: border-box;
  border: 0;
  background-color: hsl(var(--k-primary));
  color: hsl(var(--k-primary-foreground));

  transition: all 250ms ease;
  min-width: 163px;
  padding: 0 1em;
  line-height: 3;

  cursor: pointer;
  outline: none;

  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

  &:hover,
  &:focus {
    background-color: hsl(var(--k-primary-accent));
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}

kintone に設置する際の注意点

• セレクターを限定する: サンプルはbutton要素全体にスタイルを当てているため、そのまま CSS カスタマイズに貼り付けると kintone 標準のボタンにも影響します。.my-custom-buttonのようなクラスを付与し、セレクターを限定してください。
• 設置場所: ボタンはkintone.app.getHeaderMenuSpaceElement()（一覧画面）やkintone.app.record.getHeaderMenuSpaceElement()（レコード詳細画面）で取得できる要素に追加するのが一般的です。
• 二重追加の防止: 一覧画面では、一覧の切り替えやページ遷移のたびにapp.record.index.showイベントが発生するため、ボタンを追加する前に既存のボタンの有無を確認してください。
• type="button"の指定: フォーム内に配置した場合に意図せず送信されることを防げます。