質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

1回答

1442閲覧

[spring boot][Java][HTML] チェックボックスの表示

rwatanabe

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2020/07/03 07:34

編集2020/07/06 00:35

前提・実現したいこと

dbから取得した数値によってチェックボックスの数を変えて、htmlで出力することは
出来ていますが、チェックボックスの上に文字が出力されます。
チェックボックスの上の文字を消したいです。

以下のようなチェックボックスをつくりたい。(□がチェックボックス、横の数字が項目名になります)
例 □1-1 □1-2 □2-1 ・・・・

発生している問題

□のチェックボックスの上に項目名(1-1, 1-2, 2-1等)が表示される。
CSSに問題があることまでは分かったのですが、CSSのどの部分が問題なのか分からないのでCSSの該当部分を載せておきます。

該当のソースコード

HTML

1<tr class="showTargets"> 2 <th class="v_top">表示対象<em class="hissu">必須</em></th> 3 <td> 4 <div> 5 <p><input type="checkbox" name="tgt" value="all" id="tgtAll"><label for="tgtAll">全体</label></p><!-- 6 --><span class="btn b_uncheckAll">すべてのチェックを外す</span> 7 </div> 8 <div class="grade_wrapper" data-checked="1" data-classLen="10"> 9 <div class="gradeBlock"> 10 <th:block th:each="item:${checkboxItems}"> 11 <p><input type="checkbox" name="inputMultiCheck" th:id="${item.key}" th:value="${item.key}" th:text="${item.value}" class="_cb" th:field="*{inputMultiCheck}"><label th:for="${item.key}"></label></p> 12 </th:block> 13 </div> 14 </div> 15 </td> 16</tr>

CSS

1.regiNewsBox tr.showTargets{ 2 border-bottom:solid 1px #aaa; 3} 4.regiNewsBox tr.showTargets td{ 5 padding:0; 6} 7.regiNewsBox tr.showTargets td .b_uncheckAll{ 8 background: linear-gradient(-120deg, #9d9d9d 0, #787878 100%); 9 color: #fff; 10 height: 2.4vw; 11 display:inline-block; 12 width:14.5833vw; 13 text-align: center; 14 padding-top:0.9vw; 15 cursor: pointer; 16} 17.regiNewsBox tr.showTargets td > div{ 18 border-bottom:solid 1px #aaa; 19 padding: 1.458vw 0; 20} 21.regiNewsBox tr.showTargets td > div:first-child{ 22 padding-top:0; 23} 24.regiNewsBox tr.showTargets td > div:last-child{ 25 border:none; 26} 27.regiNewsBox tr.showTargets td div div:first-of-type{ 28 padding-bottom: 1.458vw; 29} 30.regiNewsBox tr.showTargets td div p:last-of-type{ 31 padding-bottom: 0; 32} 33.regiNewsBox tr.showTargets td > div .gradeBlock:last-child{ 34 padding-left:9.895vw; 35} 36.regiNewsBox tr.showTargets input{ 37 display:none; 38} 39 40 41.regiNewsBox tr.showTargets #tgtAll + label { 42 width: 9.895vw; 43} 44.regiNewsBox tr.showTargets label{ 45 width:7.3vw; 46 box-sizing: border-box; 47 display:block; 48} 49.regiNewsBox tr.showTargets label.g_all{ 50 width:9.8vw; 51} 52.regiNewsBox tr.showTargets p{ 53 position:relative; 54 display:inline-block; 55} 56.regiNewsBox tr.showTargets input{ 57 display:none; 58} 59.regiNewsBox tr.showTargets label{ 60 padding-left:5vw; 61 padding-right:2.4vw; 62 display:relative; 63 vertical-align: middle; 64} 65.regiNewsBox tr.showTargets input.g_all + label{ 66 width:9.895vw; 67 display:block; 68} 69.regiNewsBox tr.showTargets label:before{ 70 content:""; 71 display:inline-block; 72 height:1.3vw; 73 width:1.3vw; 74 border:solid 2px #bbb; 75 position:absolute; 76 left:0; 77 top:0; 78} 79 80.regiNewsBox tr.showTargets input:checked + label:before{ 81border-color:transparent; 82background: linear-gradient(-120deg, #115792 0, #252d9b 53.52%, #452d9b 100%); 83} 84.regiNewsBox tr.showTargets input:checked + label:after{ 85 content:""; 86 display:inline-block; 87 height:0.5vw; 88 width:0.9vw; 89 border-left:#fff solid 0.12vw; 90 border-bottom:#fff solid 0.12vw; 91 position:absolute; 92 left:0.3vw; 93 top:0.3vw; 94 transform:rotate(-45deg) 95} 96.regiNewsBox tr.showTargets th, 97.regiNewsBox tr.showTargets td{ 98 padding-top:1.458vw; 99}

controller
int koshuがdbから取得した数値で、koshuの分チェックボックスを出力します。

呼び出される側

Java

1private Map<String,String> getCheckBoxItems(int koshu){ 2 Map<String, String> selectMap = new LinkedHashMap<String, String>(); 3 for (int i=1; i <= koshu; i++) { 4 selectMap.put("P1-"+i, "1-"+i); 5 } 6 for (int i=1; i <= koshu; i++) { 7 selectMap.put("P2-"+i, "2-"+i); 8 } 9 return selectMap; 10}

呼び出す側

Java

1model.addAttribute("checkboxItems",getCheckBoxItems(koshu));

form

Java

1private String[] inputMultiCheck; 2 3public String[] getInputMultiCheck() { 4 return inputMultiCheck; 5} 6 7public void setInputMultiCheck(String[] inputMultiCheck) { 8 this.inputMultiCheck = inputMultiCheck; 9}

試したこと

htmlのinputタグのth:textを消すとチェックボックスの上の文字は消えたが、
チェックボックスにチェック出来なくなった。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/07/03 15:37

他所のタグのつき方みたいなタイトルからしてマルチポストでしょうか マルチポストなら双方にその旨を書きましょう
退会済みユーザー

退会済みユーザー

2020/07/06 00:31

1-1 これは ID の命名規則に違反しています。(数字からはじめてはいけない)
rwatanabe

2020/07/06 00:37

命名規則について知識不足でした。文字から始めるように修正しましたが、実行結果自体が変わりませんでした。。
guest

回答1

0

提示されたソースコードは以下のように横へ表示されます。 class="_cb" の定義ないしは他の親要素のスタイルシート定義によって表示がずれているのではないでしょうか。

イメージ説明

投稿2020/07/05 08:42

A-pZ

総合スコア12011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rwatanabe

2020/07/05 08:45

わざわざ実際にプログラムを動かしてくださりありがとうございます。 CSSに問題があることだけでも分かり助かりました。 ありがとうございました。
rwatanabe

2020/07/06 00:31

該当部分のCSSを載せました。 もしCSSに詳しければご教授して頂けると助かります。
A-pZ

2020/07/07 08:14

該当部分のCSSとありまずが、今回対象になっている class="_cb" がどこにもないようですし、記載されているCSS定義にある「regiNewsBox」がどこにも使われていません。 スタイルシートの定義方法は、本件の質問とは別の質問ですので、別途質問を立ち上げたほうが良いのではないかと。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問