質問編集履歴

4

add pics

2021/10/28 15:03

投稿

utasan_1008
utasan_1008

スコア56

test CHANGED
File without changes
test CHANGED
@@ -170,7 +170,7 @@
170
170
 
171
171
  ### 変更後
172
172
 
173
- ![イメージ説明](20ea9e96efad4fbb9b98a120ff6e4b05.png)
173
+ ![イメージ説明](8002a390c4126e969ed5f23b65076658.png)
174
174
 
175
175
  ```ここに言語を入力
176
176
 

3

add pics

2021/10/28 15:03

投稿

utasan_1008
utasan_1008

スコア56

test CHANGED
File without changes
test CHANGED
@@ -170,6 +170,8 @@
170
170
 
171
171
  ### 変更後
172
172
 
173
+ ![イメージ説明](20ea9e96efad4fbb9b98a120ff6e4b05.png)
174
+
173
175
  ```ここに言語を入力
174
176
 
175
177
  <!-- トップバー -->

2

add code

2021/10/28 15:01

投稿

utasan_1008
utasan_1008

スコア56

test CHANGED
File without changes
test CHANGED
@@ -165,3 +165,151 @@
165
165
 
166
166
 
167
167
  ```
168
+
169
+
170
+
171
+ ### 変更後
172
+
173
+ ```ここに言語を入力
174
+
175
+ <!-- トップバー -->
176
+
177
+ <nav class="navbar px-3 py-5 bg-light border-bottom shadow-sm position-static justify-content-center" id="navbar">
178
+
179
+ <div class="navbar-brand toggle-menu position-absolute start-0">
180
+
181
+ <button class="btn btn-light btn-sm" id="sidebarToggler">
182
+
183
+ <i class="fas fa-bars fa-lg" id="sidebarTogglerFa"></i>
184
+
185
+ </button>
186
+
187
+ </div>
188
+
189
+
190
+
191
+ <!-- 中央画像 -->
192
+
193
+ <!-- text-muted mx-auto -->
194
+
195
+ <a class="nav-item-image" href="/">
196
+
197
+ <img src="{{ STATIC_URL }}img/header2.jpg" class="text-muted" width="200" height="50" alt="サンプル">
198
+
199
+ </a>
200
+
201
+
202
+
203
+ <ul class="navbar-nav d-flex flex-row position-absolute end-0">
204
+
205
+ <li class="nav-item-underline ml-3 text-muted">
206
+
207
+ <a class="p-2 link-secondary" href="#" style="text-decoration:none;">ABOUT</a>
208
+
209
+ </li>
210
+
211
+ <li class="nav-item-underline ml-3 text-muted">
212
+
213
+ <a class="p-2 link-secondary" href="#" style="text-decoration:none;">CONTACT</a>
214
+
215
+ </li>
216
+
217
+ <li class="nav-item-login mx-3 text-muted">
218
+
219
+ LOGIN
220
+
221
+ </li>
222
+
223
+ </ul>
224
+
225
+ </nav>
226
+
227
+ <!-- トップバー -->
228
+
229
+ ```
230
+
231
+ ```ここに言語を入力
232
+
233
+ .navbar-nav {
234
+
235
+ right: 0px; /* 右からの位置指定 */
236
+
237
+ /* top: 38%; */
238
+
239
+ font-family: "001Shirokuma-Regular";
240
+
241
+ font-size: large;
242
+
243
+ }
244
+
245
+
246
+
247
+ .nav-item-image {
248
+
249
+ text-align: center;
250
+
251
+ /* position: absolute; */
252
+
253
+ /* right: 50%; 右からの位置指定 */
254
+
255
+ /* top: 50px; */
256
+
257
+ }
258
+
259
+
260
+
261
+ /* <- menu icon -> */
262
+
263
+ .nav-item-menu {
264
+
265
+ position: relative;
266
+
267
+ display: inline-block;
268
+
269
+ text-decoration: none;
270
+
271
+ font-family: "001Shirokuma-Regular";
272
+
273
+ font-size: large;
274
+
275
+ }
276
+
277
+
278
+
279
+ .nav-item-menu::after {
280
+
281
+ position: absolute;
282
+
283
+ left: 17%;
284
+
285
+ content: "";
286
+
287
+ width: 65%;
288
+
289
+ height: 1.5px;
290
+
291
+ background: #000000;
292
+
293
+ bottom: 10px;
294
+
295
+ opacity: 0;
296
+
297
+ visibility: hidden;
298
+
299
+ transition: 0.3s;
300
+
301
+ }
302
+
303
+
304
+
305
+ .nav-item-menu:hover::after {
306
+
307
+ visibility: visible;
308
+
309
+ bottom: 5px;
310
+
311
+ opacity: 1;
312
+
313
+ }
314
+
315
+ ```

1

dddcode

2021/10/28 15:01

投稿

utasan_1008
utasan_1008

スコア56

test CHANGED
File without changes
test CHANGED
@@ -81,3 +81,87 @@
81
81
  </main>
82
82
 
83
83
  ```
84
+
85
+
86
+
87
+ ```CSS
88
+
89
+ a {
90
+
91
+ font-family: "001Shirokuma-Regular";
92
+
93
+ font-size: large;
94
+
95
+ }
96
+
97
+
98
+
99
+ .navbar-nav {
100
+
101
+ position: absolute;
102
+
103
+ right: 0px; /* 右からの位置指定 */
104
+
105
+ top: 50px;
106
+
107
+ }
108
+
109
+
110
+
111
+ /* <- header-bar icon -> */
112
+
113
+ .nav-item-underline {
114
+
115
+ position: relative;
116
+
117
+ display: inline-block;
118
+
119
+ text-decoration: none;
120
+
121
+ font-size: large;
122
+
123
+ }
124
+
125
+
126
+
127
+ .nav-item-underline::after {
128
+
129
+ position: absolute;
130
+
131
+ left: 0;
132
+
133
+ content: "";
134
+
135
+ width: 100%;
136
+
137
+ height: 2px;
138
+
139
+ background: #000000;
140
+
141
+ bottom: 0px; /*アンダーラインが現れ始める位置(aタグの下辺からの高さ)*/
142
+
143
+ opacity: 0;
144
+
145
+ visibility: hidden;
146
+
147
+ transition: 0.3s;
148
+
149
+ }
150
+
151
+
152
+
153
+ .nav-item-underline:hover::after {
154
+
155
+ visibility: visible;
156
+
157
+ bottom: -3px;
158
+
159
+ opacity: 1;
160
+
161
+ }
162
+
163
+ /* <- header-bar icon -> */
164
+
165
+
166
+
167
+ ```