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 (External link)

ライセンス

MIT ライセンス (External link)

使い方

  1. 次のページから、CSS をダウンロードします。
    https://github.com/garoon/css-for-customize (External link)

  2. リファレンス を参考に、Garoon カスタマイズをします。
    カスタマイズの手順は、製品ヘルプを参照してください。

各カスタマイズでこの 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
6
<ul class="list_grn_kit">
  <li>XXXXXXXXXX</li>
  <li>XXXXXXXXXX</li>
  <li>XXXXXXXXXX</li>
  <li>XXXXXXXXXX</li>
</ul>

スピナー

表示例

利用例
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 デザインの変更に対するサポートはしていません。