前提・実現したいこと

チェックボックスを各ラベルの上下水平揃い、左揃いに位置したいです。
現状では、各リストの左下あたりに位置しています。

html,cssともに、大幅に変更になっても大丈夫です。
ラベルをチェックをすれば、隠していた補足情報が見えるリストをつくるのが目的です。
チェックボックスをあえて入れているのは、簡易なチェックシートとしてのＵＩを実現させるためです。

アドバイス、よろしくお願いします。

該当のソースコード

htmlの記述
1
2<!DOCTYPE html>
3<html>
4<head>
5<meta http-equiv="content-type" charset="Shift_JIS">
6</head>
7<div class="accbox">
8  <!--ラベル1-->
9    <label for="label1">クリックして表示1</label>
10    <input type="checkbox" id="label1" class="cssacc" />
11    <div class="accshow">
12      <!--ここに隠す中身-->
13      <p>
14        こんにちは1
15      </p>
16    </div>
17    <!--//ラベル1-->
18  <!--ラベル2-->
19    <label for="label2">クリックして表示2</label>
20    <input type="checkbox" id="label2" class="cssacc" />
21    <div class="accshow">
22      <!--ここに隠す中身-->
23      <p>
24        こんにちは2
25      </p>
26    </div>
27    <!--//ラベル2-->
28  <!--ラベル3-->
29    <label for="label3">クリックして表示3</label>
30    <input type="checkbox" id="label3" class="cssacc" />
31    <div class="accshow">
32      <!--ここに隠す中身-->
33      <p>
34        こんにちは3
35      </p>
36    </div>
37    <!--//ラベル3-->
38  <!--ラベル4-->
39    <label for="label4">クリックして表示4</label>
40    <input type="checkbox" id="label4" class="cssacc" />
41    <div class="accshow">
42      <!--ここに隠す中身-->
43      <p>
44        こんにちは4
45      </p>
46    </div>
47    <!--//ラベル4-->
48</div><!--//.accbox-->
49</html>
50
51
52```CSSの記述
53
54<style type="text/css">
55
56
57/*ボックス全体*/
58.accbox {
59    margin: 2em 0;
60    padding: 0;
61    max-width: 400px;/*最大幅*/
62}
63
64/*ラベル*/
65.accbox label {
66    display: block;
67    margin: 1.5px 0;
68    padding : 11px 12px;
69    color :#2f8fcf;
70    font-weight: bold;
71    background :#FFFFFF;
72    cursor :pointer;
73    transition: all 0.5s;
74    border: solid;
75    border-color :#2f8fcf;
76}
77
78/*ラベルホバー時*/
79.accbox label:hover {
80    background :#2f8fcf;
81    
82}
83
84/*チェックは隠す*/
85
86
87/*中身を非表示にしておく*/
88.accbox .accshow {
89    height: 0;
90    padding: 0;
91    overflow: hidden;
92    opacity: 0;
93    transition: 0.8s;
94}
95
96/*クリックで中身表示*/
97.cssacc:checked + .accshow {
98    height: auto;
99    padding: 5px;
100    background: #eaeaea;
101    opacity: 1;    
102}

行動規範の内容に同意します

回答2件

ベストアンサー

サンプル作成してみました。FlexBox とネガティブマージンを使ってチェックボックスとラベルを重ねてます。

CodePenサンプル

他にも、チェックボックスは非表示にしておいて、疑似要素でチェックボックス風のものを作るという方法もあります。「CSS チェックボックスデザイン」辺りをキーワードに検索すればサンプルはいくらでも見つかります。

投稿2020/09/18 09:22

hatena19

総合スコア33715

こんにちは。

このように変更するとどうでしょうか？

css
1.accbox label {
2	/*display: block;*/
3	display: inline-block;
4}
5.cssacc{
6	float:left;
7}

質問の変更に伴い追記

css
1section {
2	position: relative;
3}
4
5input {
6	position: absolute;
7	top: calc( 14px + 0.5em );
8	margin: 0 1em;
9}
10
11label{
12    text-indent: 1em;
13}

html
1  <section>
2      <label for="label1">クリックして表示1</label>
3        <input type="checkbox" id="label1" class="cssacc" />
4        <div class="accshow">
5          <p>
6            こんにちは1
7          </p>
8        </div>
9  </section>

投稿2020/09/18 03:35

編集2020/09/18 08:16

Lhankor_Mhy

総合スコア36115

Lhankor_Mhy

2020/09/18 03:36

あ、すみません、チェックボックスが左なのですね……

Lhankor_Mhy

2020/09/18 03:39

訂正しました。

tenten10

2020/09/18 04:41

CSSのコードをアドバイスいただいた通り編集、更新しました。コードを入れる場所が間違っているのでしょうか。チェックボックスは右にあり、チェックをいれると隠している内容が、同じ行内に表示されます。（いままでは、クリックすると隠ししている内容がラベルの下に表示されるようになっていました）アニメーションとしては、ラベルが右側にスライドして、隠ししている内容が表れている感じです。画像をアップできたらよいのですが。また、最初に書くべきでしたがチェックボックスは、ラベルの中に表示したいです。位置は、上下中央揃いの左寄せにしたいです。

Lhankor_Mhy

2020/09/18 06:06

ラベルの中で垂直中央ですか……それは無理なんじゃないかな……

Lhankor_Mhy

2020/09/18 06:07

とりあえず、他の回答者にもわかるように、質問を訂正されてはいかがでしょうか。また、HTMLは変更してよいのですか？

tenten10

2020/09/18 07:10

Lhankor_Mhy様質問内容を訂正しました。ご指摘ありがとうございます。はい、htmlは変更しても大丈夫です。ラベルをチェックをすれば、隠していた補足情報が見えるリストをつくるのが目的です。チェックボックスをあえて入れているのは、簡易なチェックシートとしてのＵＩを実現させるためです。

Lhankor_Mhy

2020/09/18 08:17

追記しました。