テーミングのCSS
概要
この記事では、テーミングアプリのデザインマッピングを示し、テーマが提供するものとは異なる色やタイポグラフィに変更したい場合のCSSの使い方を説明します。
マッピング
| CSS Var | テーマアプリケーション：色 | テーマアプリケーション：タイポグラフィ | テーマアプリケーション：ボタン |
| --colors_text_main: | テキストメイン | ||
| --colors_text_tint: | テキストのティント | ||
| --colors_text_shade: | テキストのシェード | ||
| --colors_primary_main: | プライマリ メイン | ||
| --colors_primary_tint: | プライマリ ティント | ||
| --colors_primary_shade: | プライマリ シェード | ||
| --colors_secondary_main | セカンダリ メイン | ||
| --colors_secondary_tint: | セカンダリ ティント | ||
| --colors_secondary_shade: | セカンダリ シェード | ||
| --colors_background_main: | バックグラウンド メイン | ||
| --colors_background_tint: | バックグラウンド ティント | ||
| --colors_background_shade: | バックグラウンド シェード | ||
| --colors_success_main: | サクセス メイン | ||
| --colors_success_tint: | サクセス ティント | ||
| --colors_success_shade: | サクセス シェード | ||
| --colors_warning_main: | ワーニング メイン | ||
| --colors_warning_tint: | ワーニング ティント | ||
| --colors_warning_shade: | ワーニング シェード | ||
| --colors_error_main: | エラー メイン | ||
| --colors_error_tint: | エラー ティント | ||
| --colors_error_shade: | エラー シェード | ||
| --colors_info_main: | 情報 メイン | ||
| --colors_info_tint: | 情報 ティント | ||
| --colors_info_shade: | 情報 シェード | ||
| --colors_link_main: | リンク メイン | ||
| --colors_link_tint: | リンク ティント | ||
| --colors_link_shade: | リンク シェード | ||
| --colors_base_black: | ベース ブラック | ||
| --colors_base_white: | ベース ホワイト | ||
| --typography_title1_font_family: | タイポグラフィ タイトル 1 フォント ファミリー | ||
| --typography_title1_font_size: | タイポグラフィ タイトル 1 フォントサイズ | ||
| --typography_title1_font_weight: | タイポグラフィ タイトル 1 フォントウェイト | ||
| --typography_title1_font_style: | タイポグラフィ タイトル 1 フォント スタイル | ||
| --typography_title1_text_decoration: | タイポグラフィ タイトル 1 フォント 装飾 | ||
| --typography_title2_font_family: | タイポグラフィ タイトル 2 フォント ファミリー | ||
| --typography_title2_font_size: | タイポグラフィ タイトル 2 フォントサイズ | ||
| --typography_title2_font_weight: | タイポグラフィ タイトル 2 フォントウェイト | ||
| --typography_title2_font_style: | タイポグラフィ タイトル 2 フォント スタイル | ||
| --typography_title2_text_decoration: | タイポグラフィ タイトル 2 フォント 装飾 | ||
| --typography_body1_font_family: | タイポグラフィ 本体 1 フォント ファミリー | ||
| --typography_body1_font_size: | タイポグラフィ 本体 1 フォントサイズ | ||
| --typography_body1_font_weight: | タイポグラフィ 本体 1 フォントウェイト | ||
| --typography_body1_font_style: | タイポグラフィ 本体 1 フォント スタイル | ||
| --typography_body1_text_decoration: | タイポグラフィ 本体 1 フォント 装飾 | ||
| --typography_body2_font_family: | タイポグラフィ 本体 2 フォント ファミリー | ||
| --typography_body2_font_size: | タイポグラフィ 本体 2 フォントサイズ | ||
| --typography_body2_font_weight: | タイポグラフィ 本体 2 フォントウェイト | ||
| --typography_body2_font_style: | タイポグラフィ 本体 2 フォント スタイル | ||
| --typography_body2_text_decoration: | タイポグラフィ 本体 2 フォント 装飾 | ||
| --typography_tooltip1_font_family: | タイポグラフィ ツールチップ 1 フォント ファミリー | ||
| --typography_tooltip1_font_size: | タイポグラフィ ツールチップ 1 フォントサイズ | ||
| --typography_tooltip1_font_weight: | タイポグラフィ ツールチップ 1 フォントウェイト | ||
| --typography_tooltip1_font_style: | タイポグラフィ ツールチップ 1 フォント スタイル | ||
| --typography_tooltip1_text_decoration: | タイポグラフィ ツールチップ 1 フォント 装飾 | ||
| --typography_tooltip2_font_family: | タイポグラフィ ツールチップ 2 フォント ファミリー | ||
| --typography_tooltip2_font_size: | タイポグラフィ ツールチップ 2 フォントサイズ | ||
| --typography_tooltip2_font_weight: | タイポグラフィ ツールチップ 2 フォントウェイト | ||
| --typography_tooltip2_font_style: | タイポグラフィ ツールチップ 2 フォント スタイル | ||
| --typography_tooltip2_text_decoration: | タイポグラフィ ツールチップ 2 フォント 装飾 | ||
| --typography_info_font_family: | タイポグラフィ 情報 フォント ファミリー | ||
| --typography_info_font_size: | タイポグラフィ 情報 フォントサイズ | ||
| --typography_info_font_weight: | タイポグラフィ 情報 フォントウェイト | ||
| --typography_info_font_style: | タイポグラフィ 情報 フォント スタイル | ||
| --typography_info_text_decoration: | タイポグラフィ 情報 フォント 装飾/ | ||
| --typography_link_font_family: | タイポグラフィ リンク フォント ファミリー | ||
| --typography_link_font_size: | タイポグラフィ リンク フォントサイズ | ||
| --typography_link_font_weight: | タイポグラフィ リンク フォントウェイト | ||
| --typography_link_font_style: | タイポグラフィ リンク フォント スタイル | ||
| --typography_link_text_decoration: | タイポグラフィ リンク フォント 装飾 | ||
| --typography_stepnumber_font_family: | タイポグラフィ ステップ 番号 フォント ファミリー | ||
| --typography_stepnumber_font_size: | タイポグラフィ ステップ 番号 フォントサイズ | ||
| --typography_stepnumber_font_weight: | タイポグラフィ ステップ 番号 フォントウェイト | ||
| --typography_stepnumber_font_style: | タイポグラフィ ステップ 番号 フォント スタイル | ||
| --typography_stepnumber_text_decoration: | タイポグラフィ ステップ 番号 フォント 装飾 | ||
| --buttons_primary_default_border_width: | ボタン プライマリ デフォルト 境界 幅 | ||
| --buttons_primary_hover_border_width: | ボタン プライマリ ホバー 境界 幅 | ||
| --buttons_primary_default_text_color: | ボタン プライマリ デフォルト テキスト 色 | ||
| --buttons_primary_default_fill_color: | ボタン プライマリ デフォルト 塗りつぶし 色 | ||
| --buttons_primary_default_border_color1: | ボタン プライマリ デフォルト 境界 色1 | ||
| --buttons_primary_default_corner_radius: | ボタン プライマリ デフォルト コーナー 半径 | ||
| --buttons_primary_hover_text_color: | ボタン プライマリ ホバー テキスト 色 | ||
| --buttons_primary_hover_fill_color: | ボタン プライマリ ホバー 塗りつぶし 色 | ||
| --buttons_primary_hover_corner_radius: | ボタン プライマリ ホバー コーナー 半径 | ||
| --buttons_primary_clicked_text_color: | ボタン プライマリ クリック済 テキスト 色 | ||
| --buttons_primary_clicked_fill_color: | ボタン プライマリ クリック済 塗りつぶし 色 | ||
| --buttons_primary_clicked_border_width: | ボタン プライマリ クリック済 境界 幅 | ||
| --buttons_primary_clicked_corner_radius: | ボタン プライマリ クリック済 コーナー 半径 | ||
| --buttons_secondary_default_text_color: | ボタン セカンダリ デフォルト テキスト 色 | ||
| --buttons_secondary_default_border_color: | ボタン セカンダリ デフォルト 境界 色 | ||
| --buttons_secondary_default_border_width: | ボタン セカンダリ デフォルト 境界 幅 | ||
| --buttons_secondary_default_corner_radius: | ボタン セカンダリ デフォルト コーナー 半径 | ||
| --buttons_secondary_hover_text_color: | ボタン セカンダリ ホバー テキスト 色 | ||
| --buttons_secondary_hover_border_color: | ボタン セカンダリ ホバー 境界 色 | ||
| --buttons_secondary_hover_border_width: | ボタン セカンダリ ホバー 境界 幅 | ||
| --buttons_secondary_hover_corner_radius: | ボタン セカンダリ ホバー コーナー 半径 | ||
| --buttons_secondary_clicked_text_color: | ボタン セカンダリ クリック済 テキスト 色 | ||
| --buttons_secondary_clicked_border_color: | ボタン セカンダリ クリック済 境界 色 | ||
| --buttons_secondary_clicked_border_width: | ボタン セカンダリ クリック済 境界 色 幅 | ||
| --buttons_secondary_clicked_corner_radius: | ボタン セカンダリ クリック済 コーナー 半径 | ||
| --buttons_textprimary_default_border_width: | ボタン テキストプライマリ デフォルト 境界 幅 | ||
| --buttons_textprimary_default_text_color: | ボタン テキストプライマリ デフォルト テキスト 色 | ||
| --buttons_textprimary_default_corner_radius: | ボタン テキストプライマリ デフォルト コーナー 半径 | ||
| --buttons_textprimary_hover_text_color: | ボタン テキストプライマリ ホバー テキスト 色 | ||
| --buttons_textprimary_hover_border_color: | ボタン テキストプライマリ ホバー 境界 色 | ||
| --buttons_textprimary_hover_border_width: | ボタン テキストプライマリ ホバー 境界 幅 | ||
| --buttons_textprimary_hover_corner_radius: | ボタン テキストプライマリ ホバー コーナー 半径 | ||
| --buttons_textprimary_clicked_text_color: | ボタン テキストプライマリ クリック済 テキスト 色 | ||
| --buttons_textprimary_clicked_border_color: | ボタン テキストプライマリ クリック済 境界 色 | ||
| --buttons_textprimary_clicked_border_width: | ボタン テキスト プライマリ クリック済 境界 幅 | ||
| --buttons_textprimary_clicked_corner_radius: | ボタン テキスト プライマリ クリック済 コーナー 半径 | ||
| --buttons_textsecondary_default_text_color: | ボタン テキスト セカンダリ デフォルト テキスト 色 | ||
| --buttons_textsecondary_default_border_width: | ボタン テキスト セカンダリ デフォルト 境界 幅 | ||
| --buttons_textsecondary_default_corner_radius: | ボタン テキスト セカンダリ デフォルト コーナー 半径 | ||
| --buttons_textsecondary_hover_text_color: | ボタン テキスト セカンダリ ホバー テキスト 色 | ||
| --buttons_textsecondary_hover_border_color: | ボタン テキスト セカンダリ ホバー 境界 色 | ||
| --buttons_textsecondary_hover_border_width: | ボタン テキスト セカンダリ ホバー 境界 幅 | ||
| --buttons_textsecondary_hover_corner_radius: | ボタン テキスト セカンダリ ホバー コーナー 半径 | ||
| --buttons_textsecondary_clicked_text_color: | ボタン テキスト セカンダリ クリック済 テキスト 色 | ||
| --buttons_textsecondary_clicked_fill_color: | ボタン テキストセカンダリ クリック済 塗りつぶし 色 | ||
| --buttons_textsecondary_clicked_border_color: | ボタン テキストセカンダリ クリック済 境界 色 | ||
| --buttons_textsecondary_clicked_border_width: | ボタン テキストセカンダリ クリック済 境界 幅 | ||
| --buttons_textsecondary_clicked_corner_radius: | ボタン テキストセカンダリ クリック済 コーナー 半径 | ||
| --buttons_closebutton_default_text_color: | ボタン クローズボタン デフォルト テキスト 色 | ||
| --buttons_closebutton_default_border_color: | ボタン クローズボタン デフォルト 境界 色 | ||
| --buttons_closebutton_default_border_width: | ボタン クローズボタン デフォルト 境界 幅 | ||
| --buttons_closebutton_default_corner_radius: | ボタン クローズボタン デフォルト コーナー 半径 | ||
| --buttons_closebutton_hover_text_color: | ボタン クローズボタン ホバー テキスト 色 | ||
| --buttons_closebutton_hover_border_color: | ボタン クローズボタン ホバー 境界 色 | ||
| --buttons_closebutton_hover_border_width: | ボタン クローズボタン ホバー 境界 幅 | ||
| --buttons_closebutton_hover_corner_radius: | ボタン クローズボタン ホバー コーナー 半径 | ||
| --buttons_closebutton_clicked_text_color: | ボタン クローズボタン クリック済 テキスト 色 | ||
| --buttons_closebutton_clicked_border_color: | ボタン クローズボタン クリック済 境界 色 | ||
| --buttons_closebutton_clicked_border_width: | ボタン クローズボタン クリック済 境界 幅 | ||
| --buttons_closebutton_clicked_corner_radius: | ボタン クローズボタン クリック済 コーナー 半径 | ||
| --buttons_success_default_text_color: | ボタン サクセス デフォルト テキスト 色 | ||
| --buttons_success_default_fill_color: | ボタン サクセス デフォルト 塗りつぶし 色 | ||
| --buttons_success_default_border_width: | ボタン サクセス デフォルト 境界 幅 | ||
| --buttons_success_default_corner_radius: | ボタン サクセス デフォルト コーナー 半径 | ||
| --buttons_success_hover_text_color: | ボタン サクセス ホバー テキスト 色 | ||
| --buttons_success_hover_fill_color: | ボタン サクセス ホバー 塗りつぶし 色 | ||
| --buttons_success_hover_border_width: | ボタン サクセス ホバー 境界 幅 | ||
| --buttons_success_hover_corner_radius: | ボタン サクセス ホバー コーナー 半径 | ||
| --buttons_success_clicked_text_color: | ボタン サクセス クリック済 テキスト 色 | ||
| --buttons_success_clicked_fill_color: | ボタン サクセス クリック済 塗りつぶし 色 | ||
| --buttons_success_clicked_border_width: | ボタン サクセス クリック済 境界 幅 | ||
| --buttons_success_clicked_corner_radius: | ボタン サクセス クリック済 コーナー 半径 | ||
| --buttons_warning_default_text_color: | ボタン ワーニング デフォルト テキスト 色 | ||
| --buttons_warning_default_fill_color: | ボタン ワーニング デフォルト 塗りつぶし 色 | ||
| --buttons_warning_default_border_width: | ボタン ワーニング デフォルト 境界 幅 | ||
| --buttons_warning_default_corner_radius: | ボタン ワーニング デフォルト コーナー 半径 | ||
| --buttons_warning_hover_text_color: | ボタン ワーニング ホバー テキスト 色 | ||
| --buttons_warning_hover_fill_color: | ボタン ワーニング ホバー 塗りつぶし 色 | ||
| --buttons_warning_hover_border_width: | ボタン ワーニング ホバー 境界 幅 | ||
| --buttons_warning_hover_corner_radius: | ボタン ワーニング ホバー コーナー 半径 | ||
| --buttons_warning_clicked_text_color: | ボタン ワーニング クリック済 テキスト 色 | ||
| --buttons_warning_clicked_fill_color: | ボタン ワーニング クリック済 塗りつぶし 色 | ||
| --buttons_warning_clicked_border_width: | ボタン ワーニング クリック済 境界 幅 | ||
| --buttons_warning_clicked_corner_radius: | ボタン ワーニング クリック済 コーナー 半径 | ||
| --buttons_error_default_text_color: | ボタン エラー デフォルト テキスト 色 | ||
| --buttons_error_default_fill_color: | ボタン エラー デフォルト 塗りつぶし 色 | ||
| --buttons_error_default_border_width: | ボタン エラー デフォルト 境界 幅 | ||
| --buttons_error_default_corner_radius: | ボタン エラー デフォルト コーナー 半径 | ||
| --buttons_error_hover_text_color: | ボタン エラー ホバー テキスト 色 | ||
| --buttons_error_hover_fill_color: | ボタン エラー ホバー 塗りつぶし 色 | ||
| --buttons_error_hover_border_width: | ボタン エラー ホバー 境界 幅 | ||
| --buttons_error_hover_corner_radius: | ボタン エラー ホバー コーナー 半径 | ||
| --buttons_error_clicked_text_color: | ボタン エラー クリック済 テキスト 色 | ||
| --buttons_error_clicked_fill_color: | ボタン エラー クリック済 塗りつぶし 色 | ||
| --buttons_error_clicked_border_width: | ボタン エラー クリック済 境界 幅 | ||
| --buttons_error_clicked_corner_radius: | ボタン エラー クリック済 コーナー 半径 | ||
| --buttons_info_default_text_color: | ボタン 情報 デフォルト テキスト 色 | ||
| --buttons_info_default_fill_color: | ボタン 情報 デフォルト 塗りつぶし 色 | ||
| --buttons_info_default_border_width: | ボタン 情報 デフォルト 境界 幅 | ||
| --buttons_info_default_corner_radius: | ボタン 情報 デフォルト コーナー 半径 | ||
| --buttons_info_hover_text_color: | ボタン 情報 ホバー テキスト 色 | ||
| --buttons_info_hover_fill_color: | ボタン 情報 ホバー 塗りつぶし 色 | ||
| --buttons_info_hover_border_width: | ボタン 情報 ホバー 境界 幅 | ||
| --buttons_info_hover_corner_radius: | ボタン 情報 ホバー コーナー 半径 | ||
| --buttons_info_clicked_text_color: | ボタン 情報 クリック済 テキスト 色 | ||
| --buttons_info_clicked_fill_color: | ボタン 情報 クリック済 塗りつぶし 色 | ||
| --buttons_info_clicked_border_width: | ボタン 情報 クリック済 境界 幅 | ||
| --buttons_info_clicked_corner_radius: | ボタン 情報 クリック済 コーナー 半径 |
この記事は役に立ちましたか？
はい
いいえ
ご意見ありがとうございます！