# チェックボックスのフィールドを複数行で表示

**URL:** <https://community.cybozu.dev/t/topic/728>\
**Category:** kintone 開発相談\
**Created:** [2017 年 5 月 31 日午前 6:17 UTC](https://community.cybozu.dev/t/topic/728 "2017-05-31T06:17:30Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account519](https://avatars.discourse-cdn.com/v4/letter/l/e36b37/32.png) [@Legacy\_Account519](https://community.cybozu.dev/u/Legacy_Account519)\
**Post date:** [2017 年 5 月 31 日午前 6:17 UTC](https://community.cybozu.dev/t/topic/728/1 "2017-05-31T06:17:30Z")

</div>

&nbsp;お世話になっております。

アプリ内にチェックボックスを設置しておりますが、項目数が増えてきて困っております。

すでに情報が中に入っているためチェックボックスというフィールドをそのまま活かしたいと考えております。

&nbsp;

現在は「横に並べる」「縦に並べる」で項目の配置の仕方を選べると思いますが、

こちらを複数行での配置にする方法はありますでしょうか。

&nbsp;

皆様のお知恵をお借りでれきば幸いです。

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2017 年 5 月 31 日午前 7:23 UTC](https://community.cybozu.dev/t/topic/728/2 "2017-05-31T07:23:10Z")

</div>

KH さん

CSS を指定すると調整できます。  
DOM 操作になるため、kintone の仕様変更で、動作しなくなるリスクがあります。

・チェックボックスの並びを横にします。

・下記のCSS を指定。

width: 400px は、適当に調整してください。  
5345882 の番号は、チェックボックスに付与された番号をデベロッパーツールで調べてください。

.control-gaia.field-5345882 {  
width: 400px !IMPORTANT;  
}  
.control-value-gaia.value-5345882 span {  
float: left;  
}

---

<div class="post-metadata">

**Author:** ![Legacy\_Account519](https://avatars.discourse-cdn.com/v4/letter/l/e36b37/32.png) [@Legacy\_Account519](https://community.cybozu.dev/u/Legacy_Account519)\
**Post date:** [2017 年 5 月 31 日午前 8:10 UTC](https://community.cybozu.dev/t/topic/728/3 "2017-05-31T08:10:34Z")

</div>

rex0220様

早速のご連絡ありがとうございます！

仕様変更で動作しなくなるリスクがあるとのことですが、やりたいことができました！

できるのかどうかもわからなかったため、CSSのコードまで記載いただいて本当に助かりました。

ありがとうございました！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2017 年 6 月 1 日午前 9:49 UTC](https://community.cybozu.dev/t/topic/728/4 "2017-06-01T09:49:09Z")

</div>

KH さん

[kintone チェックボックスレイアウトプラグイン](http://qiita.com/rex0220/items/0cc12bd8bce58d5a1f06) というものを作ってみました。

縦スクロール、リセット機能なども出来るようにしています。

有償ですが、試用版もありますので、よろしければお試しください。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account519](https://avatars.discourse-cdn.com/v4/letter/l/e36b37/32.png) [@Legacy\_Account519](https://community.cybozu.dev/u/Legacy_Account519)\
**Post date:** [2017 年 6 月 12 日午前 4:02 UTC](https://community.cybozu.dev/t/topic/728/5 "2017-06-12T04:02:05Z")

</div>

rex0220様

こちらで投稿させていただいた内容でプラグインまで作成されてしまうなんてすばらしいですね！

当方では、有償ですと購入が難しいためこちらの試用・購入は見合わせさせていただきたく存じます。

ご連絡が遅くなり申し訳ありません。

CSSコードをこちらで書いていただき、本当にありがとうございました。

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2289](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Legacy\_Account2289](https://community.cybozu.dev/u/Legacy_Account2289)\
**Post date:** [2021 年 3 月 3 日午前 8:53 UTC](https://community.cybozu.dev/t/topic/728/6 "2021-03-03T08:53:36Z")

</div>

初歩的な質問ですみません。

5345882 の番号は、チェックボックスに付与された番号をデベロッパーツールで調べる。

とあるのですが、どうしても付与された番号が調べられませんでした。

調べ方を教えていただけることはできますでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2021 年 3 月 3 日午前 9:05 UTC](https://community.cybozu.dev/t/topic/728/7 "2021-03-03T09:05:04Z")

</div>

下記が参考になると思います。

[kintone 開発で Chrome デベロッパーツールを使おう DOM 操作](https://qiita.com/rex0220/items/58122efda9f94f669ec4#dom-%E6%93%8D%E4%BD%9C)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2289](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Legacy\_Account2289](https://community.cybozu.dev/u/Legacy_Account2289)\
**Post date:** [2021 年 3 月 4 日午前 2:36 UTC](https://community.cybozu.dev/t/topic/728/8 "2021-03-04T02:36:14Z")

</div>

ありがとうございました！

年数が経ち、要素の記述が変わっておりました。

変更して修正変更することができました

ありがとうございます。丁寧にありがとうございます！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2289](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Legacy\_Account2289](https://community.cybozu.dev/u/Legacy_Account2289)\
**Post date:** [2021 年 3 月 4 日午前 2:37 UTC](https://community.cybozu.dev/t/topic/728/9 "2021-03-04T02:37:04Z")

</div>

素晴らしいプラグインをたくさん作られており、私も作れるようになりたいと考えております！

ありがとうございました！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2289](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Legacy\_Account2289](https://community.cybozu.dev/u/Legacy_Account2289)\
**Post date:** [2021 年 3 月 4 日午前 2:39 UTC](https://community.cybozu.dev/t/topic/728/10 "2021-03-04T02:39:49Z")

</div>

今後こちらを見た方の力になればと思います。

今現在の記述は

.control-multiple\_check-field-gaia.field-5524688 {  
width: 400px !IMPORTANT;  
}  
.control-value-gaia.value-5524688 span {  
float: left;  
}

上記のようになっていました。

同様のことを調べられている方の力になれれば幸いです。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 5 日午前 12:45 UTC](https://community.cybozu.dev/t/topic/728/11 "2024-09-05T00:45:36Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
