回答編集履歴

1

コード修正

2021/10/15 05:09

投稿

hatena19
hatena19

スコア34107

test CHANGED
@@ -39,3 +39,77 @@
39
39
  }
40
40
 
41
41
  ```
42
+
43
+
44
+
45
+ 追記
46
+
47
+ ---
48
+
49
+ 上記の変更でもうまくいかないということなので、リンク先のソースをみてみました。
50
+
51
+ HTMLを参考先と変更してますね。
52
+
53
+
54
+
55
+ 参考先のコード
56
+
57
+ ```html
58
+
59
+ <div class="readmore">
60
+
61
+ <input id="check1" class="readmore-check" type="checkbox">
62
+
63
+ <div class="readmore-content">
64
+
65
+ 中身のテキスト
66
+
67
+ </div>
68
+
69
+ <label class="readmore-label" for="check1"></label>
70
+
71
+ </div>
72
+
73
+ ```
74
+
75
+ [html でいれたもの](http://tktktktjp.wp.xdomain.jp/css%e3%81%ae%e3%81%bf%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%ef%bc%88%e3%82%82%e3%81%a3%e3%81%a8%e8%a6%8b%e3%82%8b%ef%bc%89%e3%80%8d%e3%82%92%e5%ae%9f%e8%a3%85/) のコード
76
+
77
+ ```html
78
+
79
+ <div class="readmore">
80
+
81
+ <input id="check1" class="readmore-check" type="checkbox"><p></p>
82
+
83
+ <div class="readmore-content">
84
+
85
+ 中身のテキスト 略
86
+
87
+ </div>
88
+
89
+ <p>
90
+
91
+ <label class="readmore-label" for="check1"></label>
92
+
93
+ </p>
94
+
95
+ </div>
96
+
97
+ ```
98
+
99
+ label が pタグで囲まれてます。これがうまくいかない原因です。
100
+
101
+ pタグを削除するか、デザイン上必要なら、
102
+
103
+ CSSをセレクタを下記のように変更すればいいでしょう。
104
+
105
+
106
+
107
+ ```css
108
+
109
+ .readmore-check:checked ~ p .readmore-label{
110
+
111
+ display: none;
112
+
113
+ }
114
+
115
+ ```