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

回答編集履歴

2

修正

2020/04/27 03:50

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -179,7 +179,7 @@
179
179
 
180
180
  > ・上記のアイコンもしくはその隣のボタンを押すと上からドロワーメニューを実現させるため、:chekedや:before:afterを使って動きを繋げたがメニューは出てこない。
181
181
 
182
- `#navTgl` が `.label-wrap` 内にあるため、一般兄弟結合子による選択が行えないためです。`#navTgl` が `.content` と兄弟要素になるようにすることで問題は解決します ([動作確認用リンク](https://jsfiddle.net/2jmqy9nk/))。
182
+ `#navTgl` が `.label-wrap` 内にあ、一般兄弟結合子による選択が行えないためです。`#navTgl` が `.content` と兄弟要素になるようにすることで問題は解決します ([動作確認用リンク](https://jsfiddle.net/2jmqy9nk/))。
183
183
 
184
184
  ```CSS
185
185
  <!DOCTYPE html>

1

追記

2020/04/27 03:50

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -1,3 +1,5 @@
1
+ > ・ドロワーメニューのボタン用に、FontAwesomeのアイコンを二つ(横並びに配置)指定し表示させたいが、一つしか表示されない。
2
+
1
3
  `.icon` ではなく `.icon::before` ではないでしょうか ([動作確認用リンク](https://jsfiddle.net/pgytvjuk/))。
2
4
 
3
5
  ```HTML
@@ -171,4 +173,183 @@
171
173
  </body>
172
174
 
173
175
  </html>
176
+ ```
177
+
178
+ ---
179
+
180
+ > ・上記のアイコンもしくはその隣のボタンを押すと上からドロワーメニューを実現させるため、:chekedや:before:afterを使って動きを繋げたがメニューは出てこない。
181
+
182
+ `#navTgl` が `.label-wrap` 内にあるため、一般兄弟結合子による選択が行えないためです。`#navTgl` が `.content` と兄弟要素になるようにすることで問題は解決します ([動作確認用リンク](https://jsfiddle.net/2jmqy9nk/))。
183
+
184
+ ```CSS
185
+ <!DOCTYPE html>
186
+ <html lang="ja">
187
+
188
+ <head>
189
+ <meta charset="UTF-8">
190
+ <title>タイトル</title>
191
+ <style>
192
+ /* ++++ 開閉ボタン ++++ */
193
+ #navTgl {
194
+ display: none;
195
+ }
196
+
197
+ .label-wrap {
198
+ position: relative;
199
+ }
200
+
201
+ .label-wrap label {
202
+ cursor: pointer;
203
+ display: flex;
204
+ flex-direction: row;
205
+ z-index: 100;
206
+ }
207
+
208
+ .icon::before {
209
+ content: '\ユニコード';
210
+ width: 25px;
211
+ height: 25px;
212
+ position: absolute;
213
+ top: 15px;
214
+ left: 30px;
215
+ }
216
+
217
+ .btn {
218
+ z-index: 1000;
219
+ transition: background .5s, transform .5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
220
+ color: #fff;
221
+ position: absolute;
222
+ top: 15px;
223
+ left: 50px;
224
+ transform: translate();
225
+ }
226
+
227
+ .btn li i {
228
+ position: absolute;
229
+ top: 16px;
230
+ left: 12px;
231
+ font-size: 18px;
232
+ color: #595959;
233
+ -webkit-transition: all 0.4s ease;
234
+ -o-transition: all 0.4s ease;
235
+ transition: all 0.4s ease;
236
+ }
237
+
238
+ .icon,
239
+ .btn:before,
240
+ .btn:after {
241
+ display: inline-block;
242
+ margin-right: .5em;
243
+ font-family: 'Font Awesome 5 Free';
244
+ font-weight: 900;
245
+ }
246
+
247
+
248
+ #navTgl:checked~.icon:after {
249
+ color: #0e898f;
250
+ }
251
+
252
+ .btn:before {
253
+ content: "\f078";
254
+ }
255
+
256
+ .btn:after {
257
+ content: "\f077";
258
+ }
259
+
260
+ .btn {
261
+ -webkit-transform: rotate(-180deg);
262
+ -ms-transform: rotate(-180deg);
263
+ -o-transform: rotate(-180deg);
264
+ transform: rotate(-180deg);
265
+ color: #fff;
266
+ }
267
+
268
+ #navTgl~.btn:before {
269
+ display: block;
270
+ }
271
+
272
+ #navTgl~.btn:after {
273
+ display: none;
274
+ }
275
+
276
+ #navTgl:checked~.btn:before {
277
+ display: none;
278
+ }
279
+
280
+ #navTgl:checked~.btn:after {
281
+ display: block;
282
+ color: #0e898f;
283
+ }
284
+
285
+
286
+
287
+ /* ++++ ドロワーメニュー ++++ */
288
+ .content {
289
+ z-index: 1000;
290
+ position: fixed;
291
+ overflow: auto;
292
+ top: -200px;
293
+ left: 0;
294
+ width: 100%;
295
+ height: 100%;
296
+ padding: 6%;
297
+ margin: 0;
298
+ box-sizing: border-box;
299
+ transform: translateY(-100%);
300
+ transition: transform .5s cubic-bezier(0.33, 1.01, 0.33, 0.97);
301
+ background-color: #fff;
302
+ }
303
+
304
+ .btn:checked+.content {
305
+ top: 200px;
306
+ }
307
+
308
+ #navTgl~.content {
309
+ transform: translate(0, 100px);
310
+ transition: transform 0.3s ease-in-out;
311
+ }
312
+
313
+ #navTgl:checked~.content {
314
+ transform: none;
315
+ }
316
+
317
+ #main .mainimg {
318
+ background-image: url(images/photo1.jpg);
319
+ background-size: cover;
320
+ box-shadow: 0 -90px 25px 30px rgba(0, 0, 0, .3) inset;
321
+ height: 240px;
322
+ margin-top: 0;
323
+ }
324
+
325
+ </style>
326
+ </head>
327
+
328
+
329
+ <body>
330
+ <div class="label-wrap">
331
+ <!--ボタンのスイッチ----->
332
+ <label for="navTgl" class="icon"></label>
333
+ <!---アイコンボタン(.btnと同じ開閉ボタン)--->
334
+ <label for="navTgl" class="btn">
335
+ <!---ドロワーメニュー開閉ボタン--->
336
+ </label>
337
+ </div>
338
+ <input type="checkbox" id="navTgl">
339
+
340
+ <nav class="content">
341
+ <ul>
342
+ <li>...</li>
343
+ <li>...</li>
344
+ <li>...</li>
345
+ <li>...</li>
346
+ </ul>
347
+ </nav>
348
+
349
+ <div id="main">
350
+ <div class="mainimg"></div>
351
+ </div>
352
+ </body>
353
+
354
+ </html>
174
355
  ```