Garoon html/css/image-Kit for Customize

固定リンクがコピーされました

Garoon html/css/image-Kit for Customize とは

固定リンクがコピーされました

Garoon html/css/image-Kit for Customizeは、Garoonのデザインに調和するUIを作るためのスタイルシート（CSS）です。

GitHub

固定リンクがコピーされました

https://github.com/garoon/css-for-customize

ライセンス

固定リンクがコピーされました

MIT ライセンス

使い方

固定リンクがコピーされました

次のページから、CSSをダウンロードします。
https://github.com/garoon/css-for-customize
リファレンスを参考に、Garoonカスタマイズをします。
カスタマイズの手順は、製品ヘルプを参照してください。
- JavaScript / CSS によるカスタマイズ
  クラウド版／パッケージ版
- 予定メニュー連携の設定
  クラウド版／パッケージ版

各カスタマイズでこのCSSを使う場合は、「Garoon全体のカスタマイズ」で適用し、各カスタマイズでは適用しないことを推奨します。

利用イメージ

固定リンクがコピーされました

メッセージ

固定リンクがコピーされました

予定の詳細画面のテーブルに行を追加する APIを使って追加した行に、Garoonライクなアイコン付きメッセージを表示する例です。

ボタン

固定リンクがコピーされました

ワークフローを申請する画面で、カスタマイズ機能のための、Garoonライクなボタンを表示する例です。

テーブル

固定リンクがコピーされました

予定の詳細画面のテーブルに行を追加する APIを使って追加した行に、Garoonライクなテーブルを表示する例です。

リファレンス

固定リンクがコピーされました

文字

固定リンクがコピーされました

装飾（ノーマル）

表示例

利用例

1

<span class="font_normal_grn_kit">あああAAA</span>

装飾（太字）

表示例

利用例

1

<span class="bold_grn_kit">あああAAA</span>

文字サイズ（小）

表示例

利用例

1

<span class="fontsize_sub_grn_kit">あああAAA</span>

文字サイズ（最小）

表示例

利用例

1

<span class="fontsize_min_grn_kit">あああAAA</span>

文字色（薄い）

表示例

利用例

1

<span class="fontcolor_sub_grn_kit">あああAAA</span>

ラベル

表示例

利用例

1

<span class="label_grn_kit">あああAAA</span>

右そろえ

表示例

利用例

1

<span class="t_align_right_grn_kit">あああAAA</span>

中央そろえ（水平方向）

表示例

利用例

1

<span class="t_align_center_grn_kit">あああAAA</span>

左そろえ

表示例

利用例

1

<span class="t_align_left_grn_kit">あああAAA</span>

上そろえ

表示例

利用例

1

<span class="v_align_top_grn_kit">あああAAA</span>

中央そろえ（垂直方向）

表示例

利用例

1

<span class="v_align_middle_grn_kit">あああAAA</span>

下そろえ

表示例

利用例

1

<span class="v_align_bottom_grn_kit">あああAAA</span>

折り返しなし

表示例

利用例

1

<span class="nowrap_grn_kit">あああAAA</span>

メッセージ

固定リンクがコピーされました

ノーマル

表示例

利用例

1
2
3
4
5


<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
    class="icon_information16_3_grn_kit" style="width: 16px; height: 16px;"><rect class="icon_information16_3_1_grn_kit"/><circle class="icon_information16_3_2_grn_kit" cx="8" cy="8" r="7.37"/><path class="icon_information16_3_3_grn_kit" d="M9.45,3.94A1.44,1.44,0,1,1,8,2.5,1.44,1.44,0,0,1,9.45,3.94Z"/><path class="icon_information16_3_3_grn_kit" d="M9.24,6.23v4.88a1,1,0,0,0,.15.64,2.14,2.14,0,0,0,1,.17v1H5.93v-1h.15a1.25,1.25,0,0,0,.8-.18A1,1,0,0,0,7,11.11v-3a1,1,0,0,0-.15-.63,1.27,1.27,0,0,0-.8-.18H5.93V6.69Z"/></svg>
  <span class="message_text_grn_kit">あああああAAAAA</span>
</div>

注意

表示例

利用例

1
2
3
4
5


<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
    class="icon_attention16_grn_kit" style="width: 16px; height: 16px;"><rect class="icon_attention16_1_grn_kit"/><path class="icon_attention16_2_grn_kit" d="M.1,15,7.92,1.47l8,13.53Z"/><rect class="icon_attention16_3_grn_kit" x="7" y="6" width="2" height="5"/><rect class="icon_attention16_3_grn_kit" x="7" y="12" width="2" height="2"/></svg>
  <span class="message_text_grn_kit attention_message_grn_kit">あああああAAAAA</span>
</div>

ノーマル（囲みパーツ）

表示例

利用例

1
2
3
4
5
6


<div class="info_area_grn_kit">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon_information16_grn_kit" style="width: 16px; height: 16px;"><rect class="icon_information16_1_grn_kit"/><circle class="icon_information16_2_grn_kit" cx="8" cy="8" r="7.37"/><path class="icon_information16_3_grn_kit" d="M9.45,3.94A1.44,1.44,0,1,1,8,2.5,1.44,1.44,0,0,1,9.45,3.94Z"/><path class="icon_information16_3_grn_kit" d="M9.24,6.23v4.88a1,1,0,0,0,.15.64,2.14,2.14,0,0,0,1,.17v1H5.93v-1h.15a1.25,1.25,0,0,0,.8-.18A1,1,0,0,0,7,11.11v-3a1,1,0,0,0-.15-.63,1.27,1.27,0,0,0-.8-.18H5.93V6.69Z"/></svg>
      <span class="message_text_grn_kit">あああああAAAAA</span>
  </div>
</div>

ノーマル（囲みパーツ・リスト項目あり）

表示例

利用例

1
2
3
4
5
6
7
8
9


<div class="info_area_grn_kit">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon_information16_grn_kit" style="width: 16px; height: 16px;"><rect class="icon_information16_1_grn_kit"/><circle class="icon_information16_2_grn_kit" cx="8" cy="8" r="7.37"/><path class="icon_information16_3_grn_kit" d="M9.45,3.94A1.44,1.44,0,1,1,8,2.5,1.44,1.44,0,0,1,9.45,3.94Z"/><path class="icon_information16_3_grn_kit" d="M9.24,6.23v4.88a1,1,0,0,0,.15.64,2.14,2.14,0,0,0,1,.17v1H5.93v-1h.15a1.25,1.25,0,0,0,.8-.18A1,1,0,0,0,7,11.11v-3a1,1,0,0,0-.15-.63,1.27,1.27,0,0,0-.8-.18H5.93V6.69Z"/></svg>
    <span class="message_text_grn_kit">あああああAAAAA</span>
  </div>
  <ul class="info_list_icon_grn_kit">
    <li>あああああAAAAA</li>
  </ul>
</div>

注意（囲みパーツ）

表示例

利用例

1
2
3
4
5


<div class="attention_area_grn_kit">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon_attention16_grn_kit" style="width: 16px; height: 16px;"><rect class="icon_attention16_1_grn_kit" width="16" height="16"/><path class="icon_attention16_2_grn_kit" d="M.1,15,7.92,1.47l8,13.53Z"/><rect class="icon_attention16_3_grn_kit" x="7" y="6" width="2" height="5"/><rect class="icon_attention16_3_grn_kit" x="7" y="12" width="2" height="2"/></svg><span class="message_text_grn_kit">あああああAAAAA</span>
  </div>
</div>

ボタン

固定リンクがコピーされました

メインボタン（ポジティブ＋ノーマル）

表示例

利用例

1
2


<button type="button" name="" value="" class="button_main_grn_kit button_r_margin2_grn_kit">XXXXXX</button>
<button type="button" name="" value="" class="button_normal_grn_kit">XXXXXX</button>

メインボタン（ポジティブ＋ノーマル＋ノーマル）

表示例

利用例

1
2
3


<button type="button" name="" value="" class="button_main_grn_kit button_r_margin3_grn_kit">XXXXXX</button>
<button type="button" name="" value="" class="button_normal_grn_kit button_r_margin1_grn_kit">XXXXXX</button>
<button type="button" name="" value="" class="button_normal_grn_kit">XXXXXX</button>

メインボタン（ポジティブ＋ネガティブ）

表示例

利用例

1
2


<button type="button" name="" value="" class="button_main_grn_kit button_r_margin2_grn_kit">XXXXXX</button>
<button type="button" name="" value="" class="button_attention_grn_kit">XXXXXX</button>

メインボタン（ネガティブ＋ノーマル）

表示例

利用例

1
2


<button type="button" name="" value="" class="button_attention_grn_kit button_r_margin1_grn_kit">XXXXXX</button>
<button type="button" name="" value="" class="button_normal_grn_kit">XXXXXX</button>

メインボタン（非活性：disable）

表示例

利用例

1

<button type="button" name="" value="" class="button_normal_grn_kit" disabled>XXXXXX</button>

サブボタン

サブボタン（ポジティブ／強調）

表示例

利用例

1

<button type="button" name="" value="" class="button_main_sub_grn_kit">XXXXXX</button>

サブボタン（ノーマル）

表示例

利用例

1

<button type="button" name="" value="" class="button_normal_sub_grn_kit">XXXXXX</button

サブボタン（ネガティブ／注意）

表示例

利用例

1

<button type="button" name="" value="" class="button_attention_sub_grn_kit">XXXXXX</button>

サブボタン（非活性：disable）

表示例

利用例

1

<button type="button" name="" value="" class="button_normal_sub_grn_kit" disabled>XXXXXX</button>

タブ

固定リンクがコピーされました

選択色を適用する場合には、全体を囲む<div>に付与した次のクラスは削除してください。

tab_grn_kit
tab_sub_grn_kit
navi_viewchange_grn_kit

ノーマル

表示例

利用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<div class="tab_grn_kit">
  <div class="tab_memu">
    <div class="tab">
      <span class="tab_left_on"></span><span class="tab_on"><span>XXXXX</span></span>
      <span class="tab_right_on"></span>
    </div>
    <div class="tab">
      <span class="tab_left_off"></span><span class="tab_off"><a href="">XXXXX</a></span>
      <span class="tab_right_off"></span>
    </div>
    <div class="tab">
      <span class="tab_left_off"></span><span class="tab_off"><a href="">XXXXX</a></span>
      <span class="tab_right_off"></span>
    </div>
  </div>
  <div class="tab_menu_end"></div>
</div>

サブ

表示例

利用例

1
2
3
4
5
6


<div class="tab_sub_grn_kit">
  <ul class="tab_sub_grn">
    <li class="active"><p><span>XXXXX</span></p></li><li><p><a href="">XXXXX</a></p></li><li><p><a href="">XXXXX</a></p></li>
  </ul>
  <div class="tab_sub_baseline_grn"></div>
</div>

サブ（ボタンライク）

表示例

プロパティ

選択中：aria-pressed="true"
未選択：aria-pressed="false"

利用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<div class="navi_viewchange_grn_kit">
<div class="navi_viewchange_grn navi_viewchange_theme_grn">
    <div class="inline_block_grn">
      <ul class="button_group_ul_grn">
        <li class="button_group_li_grn">
          <button type="button" class="button_group_item_grn button_style_off_grn button_group_item_select_grn" aria-pressed="true">
            <span>XXXXX</span>
          </button>
        </li>
        <li class="button_group_li_grn">
          <button type="button" class="button_group_item_grn button_style_off_grn " aria-pressed="false">
            <span>XXXXX</span>
          </button>
        </li>
        <li class="button_group_li_grn">
          <button type="button" class="button_group_item_grn button_style_off_grn " aria-pressed="false">
            <span>XXXXX</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

線

固定リンクがコピーされました

ノーマル（囲み線）

表示例

利用例

1

<div class="border_normal_grn_kit"></div>

ノーマル（下線）

表示例

利用例

1

<div class="border_normal_separator_grn_kit"></div>

濃い（囲み線）

表示例

利用例

1

<div class="border_dark_grn_kit"></div>

濃い（下線）

表示例

利用例

1

<div class="border_dark_separator_grn_kit"></div>

点線（囲み線）

表示例

利用例

1

<div class="border_dashed_grn_kit"></div>

点線（下線）

表示例

利用例

1

<div class="border_dashed_separator_grn_kit"></div>

テーブル

固定リンクがコピーされました

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

表示例

利用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<table class="view_table_grn_kit" style="width:100%;">
  <tbody>
    <tr>
      <th class="nowrap_grn_kit">XXXXXX</th>
      <td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
    </tr>
    <tr>
      <th class="nowrap_grn_kit">XXXXXX</th>
      <td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
    </tr>
  </tbody>
</table>

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

表示例

利用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<table class="view_table_grn_kit view_table_style1_grn_kit" style="width:100%;">
  <tbody>
    <tr>
      <th class="nowrap_grn_kit">XXXXX</th>
      <td>XXXXX</td>
    </tr>
    <tr>
      <th class="nowrap_grn_kit">XXXXX</th>
      <td>XXXXX</td>
    </tr>
    <tr>
      <th class="nowrap_grn_kit">XXXXX</th>
      <td>XXXXX</td>
    </tr>
  </tbody>
</table>

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

表示例

利用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<table class="view_table_grn_kit view_table_sub_grn_kit">
  <tbody>
    <tr>
      <th class="nowrap_grn_kit">XXXXX</td>
      <td>：</td>
      <td>XXXXXXXXXX</td>
    </tr>
    <tr>
      <th class="nowrap_grn_kit">XXXXX</td>
      <td>：</td>
      <td>XXXXXXXXXX</td>
    </tr>
    <tr>
      <th class="nowrap_grn_kit">XXXXX</td>
      <td>：</td>
      <td>XXXXXXXXXX</td>
    </tr>
  </tbody>
</table>

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

表示例

利用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<table class="list_table_style1_grn_kit" style="width:100%;">
  <tbody>
    <tr>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXX</th>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXX</th>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXX</th>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXX</th>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXX</th>
    </tr>
    <tr>
      <td>XXXXX</td>
      <td>XXXXX</td>
      <td>XXXXX</td>
      <td>XXXXX</td>
      <td>XXXXX</td>
    </tr>
  </tbody>
</table>

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

表示例

利用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<table class="list_table_style2_grn_kit" style="width:100%;">
  <tbody>
    <tr>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXXX</th>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXXX</th>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXXX</th>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXXX</th>
      <th class="nowrap_grn_kit" style="width:20%;">XXXXXX</th>
    </tr>
    <tr class="list_table_linetwo_grn_kit">
      <td>XXXXXX</td>
      <td>XXXXXX</td>
      <td>XXXXXX</td>
      <td>XXXXXX</td>
      <td>XXXXXX</td>
    </tr>
    <tr class="list_table_lineone_grn_kit">
      <td>XXXXXX</td>
      <td>XXXXXX</td>
      <td>XXXXXX</td>
      <td>XXXXXX</td>
      <td>XXXXXX</td>
    </tr>
  </tbody>
</table>

スピナー

固定リンクがコピーされました

大

表示例

利用例

1
2
3
4
5


<div class="t_align_center_grn_kit" style="margin-right: auto; margin-left: auto;">
  <div class="spinner_base_grn_kit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon_spinner32_grn_kit"><rect class="icon_spinner_1_grn_kit"/><path class="icon_spinner_2_grn_kit" d="M11.25,5a1.25,1.25,0,0,1-2.5,0V1.25a1.25,1.25,0,0,1,2.5,0Z"/><path class="icon_spinner_2_grn_kit" d="M11.25,18.75a1.25,1.25,0,0,1-2.5,0V15a1.25,1.25,0,0,1,2.5,0Z"/><path class="icon_spinner_2_grn_kit" d="M7.35,5.58A1.25,1.25,0,0,1,5.58,7.35L2.93,4.7a1.25,1.25,0,0,1,0-1.77h0a1.25,1.25,0,0,1,1.77,0Z"/><path class="icon_spinner_2_grn_kit" d="M17.07,15.3a1.25,1.25,0,0,1,0,1.77h0a1.25,1.25,0,0,1-1.77,0l-2.65-2.65a1.25,1.25,0,0,1,1.77-1.77Z"/><path class="icon_spinner_2_grn_kit" d="M5,8.75a1.25,1.25,0,0,1,0,2.5H1.25a1.25,1.25,0,0,1,0-2.5Z"/><path class="icon_spinner_2_grn_kit" d="M18.75,8.75a1.25,1.25,0,0,1,0,2.5H15a1.25,1.25,0,0,1,0-2.5Z"/><path class="icon_spinner_2_grn_kit" d="M5.58,12.65a1.25,1.25,0,0,1,1.77,1.77L4.7,17.07a1.25,1.25,0,0,1-1.77,0h0a1.25,1.25,0,0,1,0-1.77Z"/><path class="icon_spinner_2_grn_kit" d="M15.3,2.93a1.25,1.25,0,0,1,1.77,0h0a1.25,1.25,0,0,1,0,1.77L14.42,7.35a1.25,1.25,0,0,1-1.77-1.77Z"/></svg>
  </div>
</div>

小

表示例

利用例

1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon_spinner_grn_kit"><rect class="icon_spinner_1_grn_kit"/><path class="icon_spinner_2_grn_kit" d="M11.25,5a1.25,1.25,0,0,1-2.5,0V1.25a1.25,1.25,0,0,1,2.5,0Z"/><path class="icon_spinner_2_grn_kit" d="M11.25,18.75a1.25,1.25,0,0,1-2.5,0V15a1.25,1.25,0,0,1,2.5,0Z"/><path class="icon_spinner_2_grn_kit" d="M7.35,5.58A1.25,1.25,0,0,1,5.58,7.35L2.93,4.7a1.25,1.25,0,0,1,0-1.77h0a1.25,1.25,0,0,1,1.77,0Z"/><path class="icon_spinner_2_grn_kit" d="M17.07,15.3a1.25,1.25,0,0,1,0,1.77h0a1.25,1.25,0,0,1-1.77,0l-2.65-2.65a1.25,1.25,0,0,1,1.77-1.77Z"/><path class="icon_spinner_2_grn_kit" d="M5,8.75a1.25,1.25,0,0,1,0,2.5H1.25a1.25,1.25,0,0,1,0-2.5Z"/><path class="icon_spinner_2_grn_kit" d="M18.75,8.75a1.25,1.25,0,0,1,0,2.5H15a1.25,1.25,0,0,1,0-2.5Z"/><path class="icon_spinner_2_grn_kit" d="M5.58,12.65a1.25,1.25,0,0,1,1.77,1.77L4.7,17.07a1.25,1.25,0,0,1-1.77,0h0a1.25,1.25,0,0,1,0-1.77Z"/><path class="icon_spinner_2_grn_kit" d="M15.3,2.93a1.25,1.25,0,0,1,1.77,0h0a1.25,1.25,0,0,1,0,1.77L14.42,7.35a1.25,1.25,0,0,1-1.77-1.77Z"/></svg>

小（ボタン横）

表示例

利用例

1
2
3
4


<button type="button" name="" value="" class="button_normal_sub_grn_kit">XXXXXX</button>
<span class="spinner_button_grn_kit">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon_spinner_grn_kit"><rect class="icon_spinner_1_grn_kit"/><path class="icon_spinner_2_grn_kit" d="M11.25,5a1.25,1.25,0,0,1-2.5,0V1.25a1.25,1.25,0,0,1,2.5,0Z"/><path class="icon_spinner_2_grn_kit" d="M11.25,18.75a1.25,1.25,0,0,1-2.5,0V15a1.25,1.25,0,0,1,2.5,0Z"/><path class="icon_spinner_2_grn_kit" d="M7.35,5.58A1.25,1.25,0,0,1,5.58,7.35L2.93,4.7a1.25,1.25,0,0,1,0-1.77h0a1.25,1.25,0,0,1,1.77,0Z"/><path class="icon_spinner_2_grn_kit" d="M17.07,15.3a1.25,1.25,0,0,1,0,1.77h0a1.25,1.25,0,0,1-1.77,0l-2.65-2.65a1.25,1.25,0,0,1,1.77-1.77Z"/><path class="icon_spinner_2_grn_kit" d="M5,8.75a1.25,1.25,0,0,1,0,2.5H1.25a1.25,1.25,0,0,1,0-2.5Z"/><path class="icon_spinner_2_grn_kit" d="M18.75,8.75a1.25,1.25,0,0,1,0,2.5H15a1.25,1.25,0,0,1,0-2.5Z"/><path class="icon_spinner_2_grn_kit" d="M5.58,12.65a1.25,1.25,0,0,1,1.77,1.77L4.7,17.07a1.25,1.25,0,0,1-1.77,0h0a1.25,1.25,0,0,1,0-1.77Z"/><path class="icon_spinner_2_grn_kit" d="M15.3,2.93a1.25,1.25,0,0,1,1.77,0h0a1.25,1.25,0,0,1,0,1.77L14.42,7.35a1.25,1.25,0,0,1-1.77-1.77Z"/></svg>
</span>

背景色

固定リンクがコピーされました

製品キーカラー

クラス名	カラーコード	イメージ
`key_color_grn_kit`	#0e74dd

グレー

クラス名	カラーコード	イメージ
`gray_color1_grn_kit`	#e3e3e3
`gray_color2_grn_kit`	#ebebeb
`gray_color3_grn_kit`	#f3f3f3
`gray_color4_grn_kit`	#fafafa

赤

クラス名	色	イメージ
`red_color1_grn_kit`	#dc3219
`red_color2_grn_kit`	#e66154

日曜／祝日

クラス名	カラーコード	イメージ
`sun_color1_grn_kit`	#fee9eb
`sun_color2_grn_kit`	#ffdbde

土曜

クラス名	カラーコード	イメージ
`sat_color1_grn_kit`	#def1fe
`sat_color2_grn_kit`	#d6efff

その他

クラス名	カラーコード	イメージ
`color1_grn_kit`	#3182dc
`color2_grn_kit`	#d6e6f8
`color3_grn_kit`	#70c70c
`color4_grn_kit`	#e2f4ce
`color5_grn_kit`	#ef9201
`color6_grn_kit`	#fce9cc
`color7_grn_kit`	#b592d8
`color8_grn_kit`	#ece4f5
`color9_grn_kit`	#c3a88b
`color10_grn_kit`	#f1eae3

余白

固定リンクがコピーされました

マージン（margin）

クラス名	プロパティ
`margin_t2_grn_kit`	`margin-top: 2px;`
`margin_t5_grn_kit`	`margin-top: 5px;`
`margin_t10_grn_kit`	`margin-top: 10px;`
`margin_t15_grn_kit`	`margin-top: 15px;`
`margin_t20_grn_kit`	`margin-top: 20px;`
`margin_b2_grn_kit`	`margin-buttom: 2px;`
`margin_b5_grn_kit`	`margin-buttom: 5px;`
`margin_b10_grn_kit`	`margin-buttom: 10px;`
`margin_b15_grn_kit`	`margin-buttom: 15px;`
`margin_b20_grn_kit`	`margin-buttom: 20px;`
`margin_r2_grn_kit`	`margin-right: 2px;`
`margin_r5_grn_kit`	`margin-right: 5px;`
`margin_r10_grn_kit`	`margin-right: 10px;`
`margin_r15_grn_kit`	`margin-right: 15px;`
`margin_r20_grn_kit`	`margin-right: 20px;`
`margin_l2_grn_kit`	`margin-left: 2px;`
`margin_l5_grn_kit`	`margin-left: 5px;`
`margin_l10_grn_kit`	`margin-left: 10px;`
`margin_l15_grn_kit`	`margin-left: 15px;`
`margin_l20_grn_kit`	`margin-left: 20px;`

クラスを追加してもマージンが適用されない場合には、次のいずれかのクラスも追加してください。

inline_block_grn_kit
block_grn_kit

例

1

<div class="margin_t10_grn_kit inline_block_grn_kit"></div>

パディング（padding）

クラス名	プロパティ
`padding_5_grn_kit`	`padding: 5px;`
`padding_10_grn_kit`	`padding: 10px;`
`padding_15_grn_kit`	`padding: 15px;`

注意事項

固定リンクがコピーされました

ブラウザーの設定によっては、例で示しているイメージと表示が変わる可能性があります。

製品のCSSとは異なるクラス名で提供しています。
今後のGaroonのデザイン変更によっては、提供するスタイルのレイアウトが崩れたり、Garoonのデザインと調和しなくなったりする可能性があります。
Garoonデザインの変更に対するサポートはしていません。

SDK & Tools