ソフトウェアキーボードコントロールのCSS
本製品のソフトウェアキーボードコントロールに適用できるCSSの一覧をこちらに記載します。
これらのCSSは以下のコントロールに適用されます。
ソフトウェアキーボードコントロール（GcSoftkeyboard）
コントロール全体
CSSクラス | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim__soft-keyboard （コントロールの基本スタイル） | 境界線 | border, border-color,border-radiusなど |
行の高さ | line-height | |
背景 | background | |
カーソルの形状 | cursor | |
サイズ | width, height | |
.gcim__soft-keyboard .soft-keyboard_container （コントロール内部のコンテナスタイル） | 境界線 | border, border-color, border-radiusなど |
余白 | padding | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard_btn_panel （ボタン配置されているパネル） | 境界線 | border, border-color, border-radiusなど |
余白 | padding | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard_title （タイトル文字部分） | 境界線 | border, border-color, border-radiusなど |
フォント | font-family, font-sizeなど | |
文字色 | color | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard_security-option （チェックボックス表示部の全体部分） | 境界線 | border, border-color, border-radiusなど |
余白 | padding, margin | |
フォント | font-family, font-sizeなど | |
文字色 | color | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard-labels （チェックボックス表示部のテキスト部分） | 境界線 | border, border-color, border-radiusなど |
余白 | padding, margin | |
フォント | font-family, font-sizeなど | |
文字色 | color | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard_content （各キー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.numeric （数値キー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.alphabet （アルファベットキー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.symbol （記号キー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.function （ナビゲーションキー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.qwerty_alphabet （qwerty配列キー部分のコンテナ） | 境界線 | border, border-color, border-radiusなど |
余白 | padding, margin | |
背景 | background |
ソフトウェアキーボタン
CSSクラス | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim__soft-keyboard .soft-keyboard_btn （キーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn:hover （ホバー時のキーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn:active （アクティブなキーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn[toggled] （トグル状態のキーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn[disabled] （無効なキーのスタイル） | 境界線 | border, border-color, border-radiusなど |
フォント | font-family, font-sizeなど | |
文字色、背景色 | color, background-color | |
余白 | margin, padding | |
配置 | align-items, justify-content | |
行の高さ | line-height | |
サイズ | width, height, min-width, min-height | |
.gcim__soft-keyboard .soft-keyboard_btn.close_button_container （閉じるボタンのスタイル） | 境界線 | border, border-color, border-radiusなど |
フォント | font-family, font-sizeなど | |
文字色、背景色 | color, background-color | |
余白 | margin | |
サイズ | width, height, min-width, min-height | |
カーソルの形状 | cursor | |
.gcim__soft-keyboard .soft-keyboard_btn[data-key-value="Caps"] （Capsキーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn[data-key-value="Shift"] （Shiftキーのスタイル） | 境界線 | border, border-color, border-radiusなど |
フォント | font-family, font-sizeなど | |
文字色、背景色 | color, background-color | |
余白 | margin | |
サイズ | width, height, min-width, min-height |
本製品のソフトウェアキーボードコントロールに適用できるCSSの一覧をこちらに記載します。
これらのCSSは以下のコントロールに適用されます。
ソフトウェアキーボードコントロール（GcSoftkeyboard）
コントロール全体
CSSクラス | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim__soft-keyboard （コントロールの基本スタイル） | 境界線 | border, border-color,border-radiusなど |
行の高さ | ling-height | |
背景 | background | |
カーソルの形状 | cursor | |
サイズ | width, height | |
.gcim__soft-keyboard .soft-keyboard_container （コントロール内部のコンテナスタイル） | 境界線 | border, border-color, border-radiusなど |
余白 | padding | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard_btn_panel （ボタン配置されているパネル） | 境界線 | border, border-color, border-radiusなど |
余白 | padding | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard_title （タイトル文字部分） | 境界線 | border, border-color, border-radiusなど |
フォント | font-family, font-sizeなど | |
文字色 | color | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard_security-option （チェックボックス表示部の全体部分） | 境界線 | border, border-color, border-radiusなど |
余白 | padding, margin | |
フォント | font-family, font-sizeなど | |
文字色 | color | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard-labels （チェックボックス表示部のテキスト部分） | 境界線 | border, border-color, border-radiusなど |
余白 | padding, margin | |
フォント | font-family, font-sizeなど | |
文字色 | color | |
背景 | background | |
.gcim__soft-keyboard .soft-keyboard_content （各キー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.numeric （数値キー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.alphabet （アルファベットキー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.symbol （記号キー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.function （ナビゲーションキー部分のコンテナ） .gcim__soft-keyboard .soft-keyboard_content.qwerty_alphabet （qwerty配列キー部分のコンテナ） | 境界線 | border, border-color, border-radiusなど |
余白 | padding, margin | |
背景 | background |
ソフトウェアキーボタン
CSSクラス | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim__soft-keyboard .soft-keyboard_btn （キーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn:hover （ホバー時のキーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn:active （アクティブなキーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn[toggled] （トグル状態のキーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn[disabled] （無効なキーのスタイル） | 境界線 | border, border-color, border-radiusなど |
フォント | font-family, font-sizeなど | |
文字色、背景色 | color, background-color | |
余白 | margin, padding | |
配置 | align-items, justify-content | |
行の高さ | line-height | |
サイズ | width, height, min-width, min-height | |
.gcim__soft-keyboard .soft-keyboard_btn.close_button_container （閉じるボタンのスタイル） | 境界線 | border, border-color, border-radiusなど |
フォント | font-family, font-sizeなど | |
文字色、背景色 | color, background-color | |
余白 | margin | |
サイズ | width, height, min-width, min-height | |
カーソルの形状 | cursor | |
.gcim__soft-keyboard .soft-keyboard_btn[data-key-value="Caps"] （Capsキーのスタイル） .gcim__soft-keyboard .soft-keyboard_btn[data-key-value="Shift"] （Shiftキーのスタイル） | 境界線 | border, border-color, border-radiusなど |
フォント | font-family, font-sizeなど | |
文字色、背景色 | color, background-color | |
余白 | margin | |
サイズ | width, height, min-width, min-height |