瀏覽代碼

Re: [kitagata_support:18444] Re: [kitagata_support:18438] Re: [kitagata_support:18432] Re: [kitagata_support:18427] Re: [kitagata_support:18411] PR動画に作成年を入れてください など

KuniakiTakenaka 1 年之前
父節點
當前提交
1e526d5e92
共有 3 個文件被更改,包括 126 次插入24 次删除
  1. 39
    2
      css/header_pc.css
  2. 41
    0
      css/style.css
  3. 46
    22
      index.html

+ 39
- 2
css/header_pc.css 查看文件

@@ -282,6 +282,43 @@ span#infolist {
282 282
     top: 1px;
283 283
     left: 120px;
284 284
 }
285
+/* 情報一覧 ここから */
286
+section#coronainfolist {
287
+    position: absolute;
288
+    display: block;
289
+    top: -310px;
290
+    left: 210px;
291
+    width: 710px;
292
+    height: 40px;
293
+    margin: 10px 10px 10px 0px;
294
+    background-color: #ffffff;
295
+    /*background-image: url(img/kitagata_background.png);*/
296
+}
297
+article#coronainfolist {
298
+    position: relative;
299
+    display: block;
300
+    margin: 5px 30px 5px 30px;
301
+    padding: 5px 40px;
302
+}
303
+
304
+div#coronainfolist {
305
+    position: relative;
306
+    display: block;
307
+    background-color: #f5cb53;
308
+    text-decoration: none;    
309
+}
310
+
311
+div#coronainfolist a {
312
+    text-decoration: none;
313
+    color: #000000;
314
+}
315
+
316
+span#coronainfolist {
317
+    position: absolute;
318
+    display: block;
319
+    top: 1px;
320
+    left: 120px;
321
+}
285 322
 
286 323
 /* 情報一覧 ここまで */
287 324
 
@@ -289,10 +326,10 @@ span#infolist {
289 326
 section#articlelist {
290 327
     position: absolute;
291 328
     display: block;
292
-    top: -310px;
329
+    top: -260px;
293 330
     left: 210px;
294 331
     width: 710px;
295
-    height: 250px;
332
+    height: 200px;
296 333
     margin: 10px 10px 10px 0px;
297 334
     background-color: #ffffff;
298 335
     /*background-image: url(img/kitagata_background.png);*/

+ 41
- 0
css/style.css 查看文件

@@ -139,6 +139,47 @@
139 139
         font-size: 3.2vw;
140 140
     }
141 141
 
142
+        /* 災害情報 */
143
+        .coronaInfo {
144
+            display: flex;
145
+            margin: 0 20px 16px;
146
+            min-height: 32px;
147
+            width: 90%;
148
+            border-radius: 8px;
149
+            background-color: #ffffff;
150
+        }
151
+    
152
+        .coronaInfoTitleWrap {
153
+            /* display: flex; */
154
+            /* justify-content: center; */
155
+            /* align-items: center; */
156
+            width: 90%;
157
+            margin: 10px;
158
+        }
159
+    
160
+        .coronaInfoTitle {
161
+            /* display: flex; */
162
+            justify-content: center;
163
+            align-items: center;
164
+            border-radius: 2px;
165
+            padding: 0 4px;
166
+            height: 20px;
167
+            background-color: #f5cb53;
168
+        }
169
+    
170
+        .coronaInfoTitle__text {
171
+            font-size: 2.8vw;
172
+            color: #000000;
173
+        }
174
+    
175
+        .coronaInfoDetail {
176
+            display: flex;
177
+            justify-content: center;
178
+            align-items: center;
179
+            margin-left: 8px;
180
+            font-size: 3.2vw;
181
+        }
182
+
142 183
     /* 新着情報 */
143 184
     .newInfo {
144 185
         margin: 0 20px 16px;

+ 46
- 22
index.html 查看文件

@@ -19,7 +19,7 @@
19 19
   <script src="js/menu.js"></script>
20 20
   <script src="js/accordion.js"></script>
21 21
   <script src="js/slideme.js"></script>
22
-  <!-- <script src="js/init.js"></script> -->
22
+  <script src="js/init.js"></script>
23 23
 </head>
24 24
 
25 25
 <body id="back">
@@ -195,14 +195,7 @@
195 195
   <!-- 新型コロナウィルス感染症について -->
196 196
   <div class="coronaNotice">
197 197
     <div class="coronaNoticepadding">
198
-      <div class="aboutCorona">
199
-        <img class="aboutCoronaImg" src="image/corona/aboutCorona.png" alt="">
200
-      </div>
201
-      <div class="coronaVaccination">
202
-        <a href="second/Vaccination.html">
203
-          <img class="coronaVaccinationImg" src="image/corona/coronaVaccination_2023.png" alt="">
204
-        </a>
205
-      </div>
198
+                                <img src="css/img/slide01.png" width="90%" alt="“つながり”で築く躍動するまち、北方町" />
206 199
     </div>
207 200
   </div>
208 201
 
@@ -221,6 +214,21 @@
221 214
       <span>現在、緊急地震情報はありません</span>
222 215
     </div>
223 216
   </div>
217
+
218
+  <!-- 地震・災害情報 -->
219
+  <div class="coronaInfo">
220
+    <div class="coronaInfoTitleWrap">
221
+      <div class="coronaInfoTitle">
222
+        <a class="linkNone" href="second/Vaccination.html">
223
+          <span class="coronaInfoTitle__text">
224
+            ワクチンの接種についてはこちら
225
+          </span>
226
+        </a>
227
+      </div>
228
+    </div>
229
+  </div>
230
+
231
+
224 232
   <!-- 新着情報 -->
225 233
   <div class="newInfo">
226 234
     <div class="newInfoTitle">
@@ -3577,29 +3585,33 @@
3577 3585
     <section id="imgae">
3578 3586
       <article id="imgae">
3579 3587
         <div id="slide">
3580
-          <div id="item3" class="item">
3581
-            <p style="position: relative;	width: 690px;	height: 50px;">
3582
-              <img class="" src="image/corona/aboutCorona.png" alt="" width="100%">
3583
-            </p>
3584
-            <a href="second/Vaccination.html">
3585
-              <p>
3586
-                <img class="" src="image/corona/coronaVaccination_2023.png" alt="" width="100%">
3587
-              </p>
3588
-            </a>
3589
-          </div>
3588
+                        <div id="item0" class="item">
3589
+                          <img src="css/img/slide01.png" width="690px" alt="“つながり”で築く躍動するまち、北方町" />
3590
+                        </div>
3591
+                        <div id="item1" class="item">
3592
+                          <img src="css/img/slide02.png" width="690px" alt="家族で人生を送る「価値」あるまち" />
3593
+                        </div>
3594
+
3590 3595
         </div>
3591 3596
         <div class="clear"></div>
3592 3597
 
3593 3598
         <!--slideの枚数設定####-->
3594
-<!-- 
3595 3599
         <div id="item_slide">
3596 3600
           <div id="item_slide_center">
3597 3601
               <div id="itemnum0" class="itemnum">
3598 3602
                 <img id="navi_item0" src="css/img/on.png" alt="" />
3599 3603
               </div>
3604
+              <div id="itemnum1" class="itemnum">
3605
+                <img id="navi_item1" src="css/img/off.png" alt="" />
3606
+              </div>
3600 3607
           </div>
3601 3608
         </div>
3602
- -->
3609
+
3610
+          <ul class="slide_navi">
3611
+            <li id="next_move" class="next">&gt;</li>
3612
+            <li id="prev_move" class="prev">&lt;</li>
3613
+          </ul>
3614
+
3603 3615
 
3604 3616
  <!--
3605 3617
           <div id="item_slide">
@@ -3654,6 +3666,18 @@
3654 3666
       </article>
3655 3667
     </section>
3656 3668
 
3669
+        <!--セクション 情報一覧-->
3670
+        <section id="coronainfolist">
3671
+          <article id="coronainfolist">
3672
+            <div id="coronainfolist">
3673
+              <a href="second/Vaccination.html">
3674
+                ワクチンの接種についてはこちら
3675
+              </a>
3676
+              </span>
3677
+            </div>
3678
+          </article>
3679
+        </section>
3680
+
3657 3681
     <!--セクション 記事一覧-->
3658 3682
     <section id="articlelist">
3659 3683
       <article id="articlelist">
@@ -3667,7 +3691,7 @@
3667 3691
           </a>
3668 3692
         </div>
3669 3693
         <!--記事一覧 新着情報-->
3670
-        <div id="article_new" style="overflow:hidden; overflow-y:scroll;height: 181px;">
3694
+        <div id="article_new" style="overflow:hidden; overflow-y:scroll;height: 141px;">
3671 3695
           
3672 3696
           <span class="block_line">
3673 3697
             <span class="block_line_date2">2023.05.22</span>

Loading…
取消
儲存