teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問このコード　CSSタブの内容、仕組みがよくわからない

編集履歴

質問編集履歴

5

タイトルの誤字修正

2020/04/30 10:29

投稿

sony
sony

スコア0

test CHANGED
@@ -1 +1 @@
1
- コードヴ六宇CSSタブのこのコードの　内容、仕組みがよくわからない
1
+ このコード　CSSタブの内容、仕組みがよくわからない
test CHANGED
File without changes

4

ソースコードの追加

2020/04/30 10:29

投稿

sony
sony

スコア0

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
  1時間ほど触ったのですがよくわからなかったので、質問させていただきました。
8
8
 
9
+
10
+
9
- 今まで色々な本をよおみながら覚えてきましたが、このようなCSSはみたことがありません
11
+ CSS部分の意味が、、なんとなく順番などやHTMｌで中身とタブ部分を組み合わせたりしてるんだろうなぁとはわかるんですけど、どういう風に意味してるのかがわからなくて、
10
12
 
11
13
 
12
14
 
@@ -66,7 +68,7 @@
66
68
 
67
69
  <h2></h2>
68
70
 
69
- <p>
71
+ <p><p>
70
72
 
71
73
  </div>
72
74
 

3

コードハイライト　改行

2020/04/30 10:18

投稿

sony
sony

スコア0

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,9 @@
12
12
 
13
13
  ### 該当のソースコード
14
14
 
15
+ ```CSS
16
+
15
- ```.tab .cp_tabpanel {display: none;}
17
+ 　.tab .cp_tabpanel {display: none;}
16
18
 
17
19
  .tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
18
20
 
@@ -36,7 +38,9 @@
36
38
 
37
39
  ### HTML部分
38
40
 
41
+ ```HTML
42
+
39
- ``` <div class="tab">
43
+ 　　　　　　　　　　　　　<div class="tab">
40
44
 
41
45
  <input type="radio" name="cp_tab" id="tab1_1">
42
46
 
@@ -90,4 +94,6 @@
90
94
 
91
95
  <ul>
92
96
 
97
+
98
+
93
99
  ```

2

コードブロックの追加

2020/04/30 10:14

投稿

sony
sony

スコア0

test CHANGED
@@ -1 +1 @@
1
- CSSタブのこのコードの　内容、仕組みがよくわからない
1
+ コードヴ六宇CSSタブのこのコードの　内容、仕組みがよくわからない
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ### 該当のソースコード
14
14
 
15
- .tab .cp_tabpanel {display: none;}
15
+ ```.tab .cp_tabpanel {display: none;}
16
16
 
17
17
  .tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
18
18
 
@@ -28,11 +28,15 @@
28
28
 
29
29
 
30
30
 
31
- ### HTML部分
31
+ ```
32
+
33
+
32
34
 
33
35
 
34
36
 
37
+ ### HTML部分
38
+
35
- <div class="tab">
39
+ ``` <div class="tab">
36
40
 
37
41
  <input type="radio" name="cp_tab" id="tab1_1">
38
42
 
@@ -85,3 +89,5 @@
85
89
  <p></p>
86
90
 
87
91
  <ul>
92
+
93
+ ```

1

HTML部分の記入

2020/04/30 10:08

投稿

sony
sony

スコア0

test CHANGED
@@ -1 +1 @@
1
- CSSタブのコードの　内容、仕組みがよくわからない
1
+ CSSタブのこのコードの　内容、仕組みがよくわからない
test CHANGED
@@ -25,3 +25,63 @@
25
25
  .tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
26
26
 
27
27
  .tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6)
28
+
29
+
30
+
31
+ ### HTML部分
32
+
33
+
34
+
35
+ <div class="tab">
36
+
37
+ <input type="radio" name="cp_tab" id="tab1_1">
38
+
39
+ <label for="tab1_1"></label>
40
+
41
+ <input type="radio" name="cp_tab" id="tab1_2">
42
+
43
+ <label for="tab1_2"></label>
44
+
45
+ <input type="radio" name="cp_tab" id="tab1_3">
46
+
47
+ <label for="tab1_3"></label>
48
+
49
+ <input type="radio" name="cp_tab" id="tab1_4">
50
+
51
+ <label for="tab1_4"></label>
52
+
53
+ <hr>
54
+
55
+ <div class="cp_tabpanels">
56
+
57
+ <div id="first_tab01" class="cp_tabpanel">
58
+
59
+ <h2></h2>
60
+
61
+ <p>
62
+
63
+ </div>
64
+
65
+ <div id="second_tab01" class="cp_tabpanel">
66
+
67
+ <h2></h2>
68
+
69
+ <p</p>
70
+
71
+ </div>
72
+
73
+ <div id="third_tab01" class="cp_tabpanel">
74
+
75
+ <h2></h2>
76
+
77
+ <p></p>
78
+
79
+ </div>
80
+
81
+ <div id="force_tab01" class="cp_tabpanel">
82
+
83
+ <h2></h2>
84
+
85
+ <p></p>
86
+
87
+ <ul>