はじめに
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をカスタマイズします。
カスタマイズの手順については製品ヘルプをご参照ください。
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" を削除してください。
種類 | 表示 | ソース |
---|---|---|
ノーマル | ![]() |
|
サブ | ![]() |
|
サブ(ボタンライク) |
![]() |
線
種類 | 表示 | ソース |
---|---|---|
ノーマル | ![]() |
|
![]() |
||
濃い | ![]() |
|
![]() |
||
点線 | ![]() |
|
![]() |
テーブル
ビューテーブル(線あり)
ソース |
---|
ビューテーブル(一部線あり)
ソース |
---|
ビューテーブル(線なし・サブ情報)
ソース |
---|
リストテーブル(線あり)
ソース |
---|
リストテーブル(線なし)
ソース |
---|
リスト
種類 | 表示 | ソース |
---|---|---|
ノーマル | ![]() |
スピナー
種類 | 表示 | ソース |
---|---|---|
大 |
![]() |
|
小 | ![]() |
|
小(ボタン横) | ![]() |
カラー
製品キーカラー
#0e74dd |
class="key_color_grn_kit" |
グレー背景色
#e3e3e3 |
class="gray_color1_grn_kit" |
|
#ebebeb |
class="gray_color2_grn_kit" |
|
#f3f3f3 |
class="gray_color3_grn_kit" |
|
#fafafa |
class="gray_color4_grn_kit" |
赤系
#dc3219 |
class="red_color1_grn_kit" |
|
#e66154 |
class="red_color2_grn_kit" |
日曜・祝日背景色
#fee9eb |
class="sun_color1_grn_kit" |
|
#ffdbde |
class="sun_color2_grn_kit" |
土曜背景色
#def1fe |
class="sat_color1_grn_kit" |
|
#d6efff |
class="sat_color2_grn_kit" |
その他
#3182dc |
class="color1_grn_kit" |
|
#d6e6f8 |
class="color2_grn_kit" |
|
#70c70c |
class="color3_grn_kit" |
|
#e2f4ce |
class="color4_grn_kit" |
|
#ef9201 |
class="color5_grn_kit" |
|
#fce9cc |
class="color6_grn_kit" |
|
#b592d8 |
class="color7_grn_kit" |
|
#ece4f5 |
class="color8_grn_kit" |
|
#c3a88b |
class="color9_grn_kit" |
|
#f1eae3 |
class="color10_grn_kit" |
余白
マージン(margin)
margin用 cssクラス(数字はピクセル) |
---|
margin top
|
例:クラスを足す前(文字とボタンが近い)
例:クラスを足した後(文字とボタン間に10pxの余白を入れる)
パディング(padding)
種類 | 表示 | ソース |
---|---|---|
5px | ![]() |
class="padding_5_grn_kit" |
10px | ![]() |
class="padding_10_grn_kit" |
15px | ![]() |
class="padding_15_grn_kit" |
注意事項
- 製品のCSSとは異なるクラスを利用しています。今後のデザイン変更によって提供するスタイルのレイアウトが崩れたり、Garoonのデザインと調和しなくなる可能性があります。
- デザインの変更によるスタイルの保障は致しませんのでご注意ください。
- 表示例はブラウザの設定によって表示が一部変わる可能性がございます。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。