Garoon html/css/image-Kit for Customize

はじめに

Garoon html/css/image-Kit for Customizeは、
Garoonのカスタマイズ開発においてGaroonのスタイルに合ったUIを使いたい方のためのカスタマイズキットです。

使い方

STEP1　CSSファイルをダウンロードする
以下のGitHubからCSSファイルをダウンロードします。
https://github.com/garoon/css-for-customize

STEP2　リファレンスを見てカスタマイズをする
CSSファイルをGaroonへ適用し、リファレンス（当記事）を参照してGaroonをカスタマイズします。

カスタマイズの手順については製品ヘルプをご参照ください。

• JavaScript / CSSによるカスタマイズ　クラウド版・パッケージ版
• 予定メニュー連携の設定　クラウド版・パッケージ版

Garoonのカスタマイズの概要については、こちら（製品サイト）をご参照ください。

各カスタマイズでこのCSSを使うと重複して設定になりますので、"Garoon全体のカスタマイズ"で1つだけの設定を推奨します。

利用イメージ

メッセージ

ボタン

テーブル

文字

スタイル

種類	表示	ソース
ノーマル		class="font_normal_grn_kit"
太字		class="bold_grn_kit"
文字サイズ　小		class="fontsize_sub_grn_kit"
文字サイズ　最小		class="fontsize_min_grn_kit"
文字色　薄い		class="fontcolor_sub_grn_kit"
ラベル		class="label_grn_kit"

揃え・折り返し

種類	表示	ソース
右揃え		class="t_align_right_grn_kit"
中央揃え（左右）		class="t_align_center_grn_kit"
左揃え		class="t_align_left_grn_kit"
上揃え		class="v_align_top_grn_kit"
中央揃え（上下）		class="v_align_middle_grn_kit"
下揃え		class="v_align_bottom_grn_kit"
折り返しなし		class="nowrap_grn_kit"

メッセージ

種類	表示	ソース
ノーマル
注意
ノーマル （囲みパーツ）
ノーマル （囲みパーツ・リスト項目あり）
注意 （囲みパーツ）

ボタン

メインボタン

種類	表示	ソース
ポジティブ +ノーマル
ポジティブ + ノーマル +ノーマル
ポジティブ +ネガティブ
ネガティブ +ノーマル
disable

サブボタン

種類	表示	ソース
ポジティブ／強調
ノーマル
ネガティブ／注意
disable

タブ

補足：
選択色をデザインテーマに適用させる場合、全体を包括している div の class="tab_grn_kit" / class="tab_sub_grn_kit" / class="navi_viewchange_grn_kit" を削除してください。

種類	表示	ソース
ノーマル
サブ
サブ（ボタンライク） ・選択中：aria-pressed="true" ・未選択：aria-pressed="false"

線

種類	表示	ソース
ノーマル
濃い
点線

テーブル

ビューテーブル（線あり）

ビューテーブル（一部線あり）

ビューテーブル（線なし・サブ情報）

リストテーブル（線あり）

リストテーブル（線なし）

リスト

種類	表示	ソース
ノーマル

スピナー

種類	表示	ソース
大
小
小（ボタン横）

カラー

製品キーカラー

class="key_color_grn_kit"

グレー背景色

class="gray_color1_grn_kit"

class="gray_color2_grn_kit"

class="gray_color3_grn_kit"

class="gray_color4_grn_kit"

赤系

class="red_color1_grn_kit"

class="red_color2_grn_kit"

日曜・祝日背景色

class="sun_color1_grn_kit"

class="sun_color2_grn_kit"

土曜背景色

class="sat_color1_grn_kit"

class="sat_color2_grn_kit"

その他

class="color1_grn_kit"

class="color2_grn_kit"

class="color3_grn_kit"

class="color4_grn_kit"

class="color5_grn_kit"

class="color6_grn_kit"

class="color7_grn_kit"

class="color8_grn_kit"

class="color9_grn_kit"

class="color10_grn_kit"

余白

マージン（margin）

例：クラスを足す前（文字とボタンが近い）

例：クラスを足した後（文字とボタン間に10pxの余白を入れる）  

パディング（padding）

種類	表示	ソース
5px		class="padding_5_grn_kit"
10px		class="padding_10_grn_kit"
15px		class="padding_15_grn_kit"

注意事項

• 製品のCSSとは異なるクラスを利用しています。今後のデザイン変更によって提供するスタイルのレイアウトが崩れたり、Garoonのデザインと調和しなくなる可能性があります。
• デザインの変更によるスタイルの保障は致しませんのでご注意ください。
• 表示例はブラウザの設定によって表示が一部変わる可能性がございます。