カテゴリー内の他の記事

Garoon html/css/image-Kit for Customize

フォローする

Index

はじめに

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のカスタマイズの概要については、こちら(製品サイト)をご参照ください。

利用イメージ

メッセージ

_____.png

ボタン

___.png

テーブル

____.png

文字

スタイル

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

揃え・折り返し

種類 表示 ソース
右揃え
07.png
class="t_align_right_grn_kit"
中央揃え(左右)
08.png
class="t_align_center_grn_kit"
左揃え
09.png
class="t_align_left_grn_kit"
上揃え 10.png
class="v_align_top_grn_kit"
中央揃え(上下) 11.png
class="v_align_middle_grn_kit"
下揃え 12.png
class="v_align_bottom_grn_kit"
折り返しなし 13.png
class="nowrap_grn_kit"

メッセージ

種類 表示 ソース
ノーマル 14.png
注意 15.png
ノーマル
(囲みパーツ)
16.png
ノーマル
(囲みパーツ・リスト項目あり)
17.png
注意
(囲みパーツ)
18.png

ボタン

メインボタン

種類 表示 ソース
ポジティブ +ノーマル 19.png
ポジティブ + ノーマル +ノーマル 20.png
ポジティブ +ネガティブ 21.png
ネガティブ +ノーマル 22.png
disable 23.png

サブボタン

種類 表示 ソース
ポジティブ/強調 24.png
ノーマル 25.png
ネガティブ/注意 26.png
disable 27.png

タブ

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

種類 表示 ソース
ノーマル 28.png
サブ 29.png
サブ(ボタンライク) 30.png

種類 表示 ソース
ノーマル 31.png
32.png
濃い 33.png
34.png
点線 35.png
36.png

テーブル

ビューテーブル(線あり)

37.png

ソース

ビューテーブル(一部線あり)

38.png

ソース

ビューテーブル(線なし・サブ情報)

39.png

ソース

リストテーブル(線あり)

40.png

ソース

リストテーブル(線なし)

41.png

ソース

リスト

種類 表示 ソース
ノーマル 42.png

スピナー

種類 表示 ソース
 43.png
 44.png
小(ボタン横) 45.png

カラー

製品キーカラー

#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"

日曜・祝日背景色

#feebed  
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クラスを追加しても有効にならない場合、inline_block_grn_kit か block_grn_kit を追加してください。
例:class="margin_t10_grn_kit inline_block_grn_kit"
margin用 cssクラス(数字はピクセル)
margin top
  • margin_t2_grn_kit
  • margin_t5_grn_kit
  • margin_t10_grn_kit
  • margin_t15_grn_kit
  • margin_t20_grn_kit
margin bottom
  • margin_b2_grn_kit
  • margin_b5_grn_kit
  • margin_b10_grn_kit
  • margin_b15_grn_kit
  • margin_b20_grn_kit
margin right
  • margin_r2_grn_kit
  • margin_r5_grn_kit
  • margin_r10_grn_kit
  • margin_r15_grn_kit
  • margin_r20_grn_kit
margin left
  • margin_l2_grn_kit
  • margin_l5_grn_kit
  • margin_l10_grn_kit
  • margin_l15_grn_kit
  • margin_l20_grn_kit

例:クラスを足す前(文字とボタンが近い)

46.png  

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

47.png

パディング(padding)

種類 表示 ソース
5px 48.png
class="padding_5_grn_kit"
10px 49.png
class="padding_10_grn_kit"
15px 50.png
class="padding_15_grn_kit"

注意事項

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。