latest
latest
ファンクションキーコントロールのCSS
本製品のファンクションキーコントロールに適用できるCSSの一覧をこちらに記載します。
これらのCSSは以下のコントロールに適用されます。
- ファンクションキーコントロール（GcFunctionKey）
コントロール全体
| CSSクラス | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__functionkey （コントロールの基本スタイル） |
境界線 | border, border-color, border-radiusなど |
| フォント | font-family, font-sizeなど | |
| 文字色、背景色 | color, background-color | |
| アイテムの配置 | align-items, justify-content | |
| テキストの複数行表示 | flex-wrap | |
| サイズ | width, min-width, min-height | |
| .gcim__functionkey .functionkey-text （キーの文字スタイル） |
文字色 | color |
| フォント | font-family, font-sizeなど |
ファンクションキーボタン
| CSSクラス | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__functionkey .functionkey-item-container （キーボタンのスタイル） .gcim__functionkey .functionkey-item-container.top （上方配置時のキーボタンのスタイル） .gcim__functionkey .functionkey-item-container.left （左方配置時のキーボタンのスタイル） .gcim__functionkey .functionkey-item-container.right （右方配置時のキーボタンのスタイル） .gcim__functionkey .functionkey-item-container.bottom （下方配置時のキーボタンのスタイル） .gcim__functionkey .functionkey-item-container[activekey] （アクティブなキーのスタイル） .gcim__functionkey .functionkey-item-container[data-functionkey="XXX"] （特定のキーのスタイル） .gcim__functionkey .functionkey-item-container:hover （ホバー時のキーボタンのスタイル） .gcim__functionkey .functionkey-item-container[data-enabled='false'] （無効時のスタイル） |
境界線 | border, border-color, border-radiusなど |
| フォント | font-family, font-sizeなど | |
| 余白 | margin, padding | |
| 文字色、背景色 | color, background-color | |
| サイズ | width, height | |
| 配置 | align-items, flex-direction | |
| .gcim__functionkey .functionkey-item-container .functionkey-image （キーイメージ部分のスタイル） |
境界線 | border, border-color, border-radiusなど |
| フォント | font-family, font-sizeなど | |
| 余白 | margin, padding | |
| 文字色 | color | |
| 背景 | background | |
| シャドウ効果 | box-shadow | |
| 行の高さ | line-height | |
| 配置 | align-items | |
| サイズ | width, height |
特定のキーのスタイルを設定する場合、data-functionkeyには、FunctionKey列挙型の値を指定します。