質問編集履歴

2

djangoでのウェブ作成時のhtmlを拡張するコード削除

2019/08/29 04:22

投稿

AAA7
AAA7

スコア10

test CHANGED
File without changes
test CHANGED
@@ -8,8 +8,6 @@
8
8
 
9
9
  ```html
10
10
 
11
- {% load static %}
12
-
13
11
  <html lang="en" dir="ltr">
14
12
 
15
13
  <head>
@@ -18,7 +16,7 @@
18
16
 
19
17
  <title>Fooden</title>
20
18
 
21
- <link href="{% static 'base.css' %}" rel="stylesheet">
19
+ <link href="base.css" rel="stylesheet">
22
20
 
23
21
  </head>
24
22
 
@@ -64,12 +62,6 @@
64
62
 
65
63
  </div>
66
64
 
67
- {% block content %}
68
-
69
- {% endblock %}
70
-
71
-
72
-
73
65
  </body>
74
66
 
75
67
  </html>

1

コードの追記とタイトルの変更

2019/08/29 04:22

投稿

AAA7
AAA7

スコア10

test CHANGED
@@ -1 +1 @@
1
- ハンバーグタグの表示位置の変更
1
+ ハンバーガーメニューの表示位置の変更
test CHANGED
@@ -1,5 +1,305 @@
1
- 先ほどの質問の続きのものでハンバーグタグを通常だとメニューが左に表記されてしまいます。これを右から出るようにすればいいのですがどのようにすればよろしいでしょうか
1
+ 先ほどの質問の続きのものでハンバーガーメニューを通常だとメニューが左に表記されてしまいます。これを右から出るようにすればいいのですがどのようにすればよろしいでしょうか
2
2
 
3
3
  サイト:
4
4
 
5
5
  https://teratail.com/questions/208632
6
+
7
+
8
+
9
+ ```html
10
+
11
+ {% load static %}
12
+
13
+ <html lang="en" dir="ltr">
14
+
15
+ <head>
16
+
17
+ <meta charset="utf-8">
18
+
19
+ <title>Fooden</title>
20
+
21
+ <link href="{% static 'base.css' %}" rel="stylesheet">
22
+
23
+ </head>
24
+
25
+ <body>
26
+
27
+
28
+
29
+ <div class="test">
30
+
31
+ <div id='main-name'>
32
+
33
+ <span>Post</span>
34
+
35
+ </div>
36
+
37
+ <input id="sbox1" id="s" name="s" type="text" placeholder="検索 …" />
38
+
39
+ <div class="test2">
40
+
41
+ <div id="nav-drawer">
42
+
43
+ <input id="nav-input" type="checkbox" class="nav-unshown">
44
+
45
+ <label id="nav-open" for="nav-input"><span></span></label>
46
+
47
+ <label class="nav-unshown" id="nav-close" for="nav-input"></label>
48
+
49
+ <div id="nav-content">
50
+
51
+ <p><a href="">お気に入り</a></p>
52
+
53
+ <p><a href="">予約確認</a></p>
54
+
55
+ <p><a href="">アカウント管理</a></p>
56
+
57
+ <p><a href="">設定</a></p>
58
+
59
+ </div>
60
+
61
+ </div>
62
+
63
+ </div>
64
+
65
+ </div>
66
+
67
+ {% block content %}
68
+
69
+ {% endblock %}
70
+
71
+
72
+
73
+ </body>
74
+
75
+ </html>
76
+
77
+ ```
78
+
79
+ ```css
80
+
81
+ #nav-drawer {
82
+
83
+ position: relative;
84
+
85
+ }
86
+
87
+
88
+
89
+ /*チェックボックス等は非表示に*/
90
+
91
+ .nav-unshown {
92
+
93
+ display:none;
94
+
95
+ }
96
+
97
+
98
+
99
+ /*アイコンのスペース*/
100
+
101
+ #nav-open {
102
+
103
+ display: inline-block;
104
+
105
+ width: 30px;
106
+
107
+ height: 22px;
108
+
109
+ vertical-align: middle;
110
+
111
+ }
112
+
113
+
114
+
115
+ /*ハンバーガーアイコンをCSSだけで表現*/
116
+
117
+ #nav-open span, #nav-open span:before, #nav-open span:after {
118
+
119
+ position: absolute;
120
+
121
+ height: 3px;/*線の太さ*/
122
+
123
+ width: 25px;/*長さ*/
124
+
125
+ border-radius: 3px;
126
+
127
+ background: #555;
128
+
129
+ display: block;
130
+
131
+ content: '';
132
+
133
+ cursor: pointer;
134
+
135
+ }
136
+
137
+ #nav-open span:before {
138
+
139
+ bottom: -8px;
140
+
141
+ }
142
+
143
+ #nav-open span:after {
144
+
145
+ bottom: -16px;
146
+
147
+ }
148
+
149
+
150
+
151
+ /*閉じる用の薄黒カバー*/
152
+
153
+ #nav-close {
154
+
155
+ display: none;/*はじめは隠しておく*/
156
+
157
+ position: fixed;
158
+
159
+ z-index: 99;
160
+
161
+ top: 0;/*全体に広がるように*/
162
+
163
+ left: 0;
164
+
165
+ width: 100%;
166
+
167
+ height: 100%;
168
+
169
+ background: black;
170
+
171
+ opacity: 0;
172
+
173
+ transition: .3s ease-in-out;
174
+
175
+ }
176
+
177
+
178
+
179
+ /*中身*/
180
+
181
+ #nav-content {
182
+
183
+
184
+
185
+ overflow: auto;
186
+
187
+ position: fixed;
188
+
189
+ top: 0;
190
+
191
+ left: 0;
192
+
193
+ z-index: 9999;/*最前面に*/
194
+
195
+ width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
196
+
197
+ max-width: 300px;/*最大幅(調整してください)*/
198
+
199
+ height: 100%;
200
+
201
+ background: #fff;/*背景色*/
202
+
203
+ transition: .3s ease-in-out;/*滑らかに表示*/
204
+
205
+ -webkit-transform: translateX(-105%);
206
+
207
+ transform: translateX(-105%);/*左に隠しておく*/
208
+
209
+
210
+
211
+ }
212
+
213
+
214
+
215
+ /*チェックが入ったらもろもろ表示*/
216
+
217
+ #nav-input:checked ~ #nav-close {
218
+
219
+ display: block;/*カバーを表示*/
220
+
221
+ opacity: .5;
222
+
223
+ }
224
+
225
+
226
+
227
+ #nav-input:checked ~ #nav-content {
228
+
229
+ -webkit-transform: translateX(0%);
230
+
231
+ transform: translateX(0%);/*中身を表示(右へスライド)*/
232
+
233
+ box-shadow: 6px 0 25px rgba(0,0,0,.15);
234
+
235
+ }
236
+
237
+ #sbox1{
238
+
239
+ max-width:700px;
240
+
241
+ height:40px;
242
+
243
+ outline:0;
244
+
245
+ margin-bottom:40px;
246
+
247
+ background:#eee;
248
+
249
+ position:absolute;
250
+
251
+ top:20px;
252
+
253
+ left:40%;
254
+
255
+ }
256
+
257
+
258
+
259
+ #main-name {
260
+
261
+ text-align: left;
262
+
263
+ font-size: 50px;
264
+
265
+ }
266
+
267
+
268
+
269
+ #nav-content {
270
+
271
+ text-align: center;
272
+
273
+ top: 0;
274
+
275
+ }
276
+
277
+
278
+
279
+ #nav-drawer {
280
+
281
+ text-align: right;
282
+
283
+ top: 0;
284
+
285
+ }
286
+
287
+
288
+
289
+ .test {
290
+
291
+ position:relative;
292
+
293
+ }
294
+
295
+ .test2 {
296
+
297
+ position:absolute;
298
+
299
+ top:20px;
300
+
301
+ right:20px;
302
+
303
+ }
304
+
305
+ ```