teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

2020/06/07 08:48

投稿

KY1212
KY1212

スコア17

title CHANGED
@@ -1,1 +1,1 @@
1
- 【HTML,CSS】なぜかdiv要素が勝手に入れ子状態になる
1
+ wえ【HTML,CSS】なぜかdiv要素が勝手に入れ子状態になる
body CHANGED
@@ -186,4 +186,7 @@
186
186
  });
187
187
 
188
188
 
189
- ```
189
+ ```
190
+
191
+ ヘッダー外に出しても入れ子になってしまう。
192
+ ![イメージ説明](7119fe8d7d7c7836c8c7668ba30bf6a1.png)

2

2020/06/07 08:48

投稿

KY1212
KY1212

スコア17

title CHANGED
File without changes
body CHANGED
@@ -164,4 +164,26 @@
164
164
  }
165
165
 
166
166
 
167
+ ```
168
+
169
+ 追記
170
+ JS
171
+ ```ここに言語を入力
172
+ $(function () {
173
+
174
+ var duration = 1000;
175
+ //初期表示
176
+ $(".tabNav li:nth(0)").addClass("active");
177
+ $(".tab:nth(0)").addClass("active");
178
+
179
+ $(".tabNav li").click(function(){
180
+ var index = $(".tabNav li").index(this);
181
+ $(".tabNav li.act").removeClass("active");
182
+ $(this).addClass("active");
183
+ $(".tabNav li").removeClass("active").eq(index).addClass("active");
184
+ $(".tabs .tab").removeClass("active").eq(index).addClass("active");
185
+ });
186
+ });
187
+
188
+
167
189
  ```

1

2020/06/07 08:45

投稿

KY1212
KY1212

スコア17

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,24 @@
5
5
 
6
6
  HTML
7
7
  ```ここに言語を入力
8
+ <!DOCTYPE html>
9
+ <html lang="ja">
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
13
+ <link rel="stylesheet" href="./css/tab2.css">
14
+ <link rel="stylesheet" href="./css/reset.css">
15
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
16
+
17
+ <script src="./js/vendor/jquery-1.10.2.min.js"></script>
18
+ <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
19
+ <script src="./js/tab2.js"></script>
20
+ <title>test!!</title>
21
+ </head>
22
+ <body>
23
+ <section class="tabWrapper" id="tabWrapper">
24
+
25
+
8
26
  <header>
9
27
  <div class="tabTitle">
10
28
  <h1>タブ作成練習</h1>
@@ -29,10 +47,48 @@
29
47
  </ul>
30
48
  </div>
31
49
  </header>
50
+
51
+ <div class="tabs">
52
+ <div class="tab">
53
+ <img src="img/kanade7trim.jpg">
54
+ </div>
55
+ <div class="tab">
56
+ <img src="img/yui2trim.jpg">
57
+ </div>
58
+ <div class="tab">
59
+ <img src="img/kanade8trim.jpg">
60
+ </div>
61
+ <div class="tab">
62
+ <img src="img/shuko4trim.jpg">
63
+ </div>
64
+ <div class="tab">
65
+ <img src="img/shiki2trim.jpg">
66
+ </div>
67
+ </div>
68
+ </section>
69
+ </body>
70
+ </html>
71
+
32
72
  ```
33
73
 
34
74
  CSS
35
75
  ```ここに言語を入力
76
+ * {
77
+ color: #333;
78
+ }
79
+
80
+ * {
81
+ color: inherit;
82
+ }
83
+
84
+ ul {
85
+ list-style: none;
86
+ }
87
+
88
+ a {
89
+ text-decoration: none;
90
+ }
91
+
36
92
  .tabWrapper {
37
93
  width: 100%;
38
94
  }
@@ -72,4 +128,40 @@
72
128
  text-align: center;
73
129
  background-color: #d8d8d8;
74
130
  }
131
+
132
+ .tabNav li:hover {
133
+ background-color: rgb(95, 92, 92);
134
+ color: #fff;
135
+ }
136
+
137
+ .tabNav li.active {
138
+ background-color: rgb(180, 73, 73);
139
+ color: #fff;
140
+ }
141
+
142
+ .tabNav li:not(:first-child){
143
+ margin-left: 1px;
144
+ }
145
+
146
+ .tabs {
147
+ position: relative;
148
+ }
149
+
150
+ .tabs .tab {
151
+ position: absolute;
152
+ height: 500px;
153
+ width: 100%;
154
+ display: none;
155
+ }
156
+
157
+ .tabs .tab.active {
158
+
159
+ display: block;
160
+ }
161
+
162
+ .tabs img {
163
+ width: 100%;
164
+ }
165
+
166
+
75
167
  ```