変数でまとめる＋不要なコードの削除＋boxの縦幅修正

saitamau-maximum · Mar 24, 2024 · 6295476 · 6295476
1 parent 98a4ce7
commit 6295476
Showing 1 changed file with 27 additions and 20 deletions.
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -1,50 +1,57 @@
+$hovering-color: #7FCC8F;
+$span-color: #47B660;
+$heroImage-change-width: 1280px;
+$header-change-width: 1200px;
+$tablet-width: 768px;
+$background-color: #F1F1F1;
+
 /* heroImageとヘッダーのpadding調整 */
-@media screen and (min-width: 1280px){
+@media (min-width: $heroImage-change-width) {
   .heroImage {
     width: 100%;
     height: 60vh;
     object-fit: cover;
   }
 }
 
-@media screen and (max-width: 1280px) {
+@media (max-width: $heroImage-change-width) {
   .heroImage {
     width: 100%;
     height: 100%;
     object-fit: cover;
   } 
 }
 
-@media screen and (max-width: 1200px) and (min-width: 768px) {
+@media (max-width: $header-change-width) and (min-width: $tablet-width) {
   .main {
     padding-top: 64px;
     flex-direction: column;
-    background-color: #f1f1f1;
+    background-color: $background-color;
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media (min-width: $header-change-width) {
   .main {
     padding-top: 72px;
     flex-direction: column;
-    background-color: #f1f1f1;
+    background-color: $background-color;
   }
 }
 
 /* 画面幅が768px以下の場合のスタイル */
-@media screen and (max-width: 768px) {
+@media (max-width: $tablet-width) {
   .main {
     padding-top: 64px;
     flex-direction: column;
-    background-color: #f1f1f1;
+    background-color: $background-color;
   }
 
   .hero {
     align-items: center;
     justify-content: center;
     display: flex;
     flex-direction: column;
-    background-color: #f1f1f1;
+    background-color: $background-color;
   }
 
   .heroImage {
@@ -96,8 +103,7 @@
     background-color: white;
     flex-direction: column;
     width: 80%;
-    height: 232px;
-    padding: 16px;
+    padding: 16px 16px 20% 16px;
     box-sizing: border-box;
     position: relative;
     z-index: 1;
@@ -114,6 +120,7 @@
   }
   .activityCPcontent {
     font-size: 1rem; // 16px
+    margin: 16px 0px;
   }
   .activityLeftButtonContainer {
     position: absolute;
@@ -126,8 +133,7 @@
     background-color: white;
     flex-direction: column;
     width: 80%;
-    height: 232px;
-    padding: 16px;
+    padding: 16px 16px 20% 16px;
     box-sizing: border-box;
     position: relative;
     z-index: 1;
@@ -144,6 +150,7 @@
   }
   .activityWebcontent {
     font-size: 1rem; // 16px
+    margin: 16px 0px;
   }
   .activityRightButtonContainer {
     position: absolute;
@@ -174,7 +181,7 @@
 
   .imgBox1 {
     width: 80%;
-    height: 220px;
+    aspect-ratio: 300 / 220;
     z-index: 0;
     background-color: gray;
     position: absolute;
@@ -183,21 +190,21 @@
 
   .imgBox2 {
     width: 80%;
-    height: 220px;
+    aspect-ratio: 300 / 220;
     z-index: 0;
     background-color: gray;
     position: absolute;
   }
 }
 
 /* 画面幅が768px以上の場合のスタイル */
-@media screen and (min-width:768px) {
+@media (min-width:768px) {
   .hero {
     align-items: center;
     justify-content: center;
     display: flex;
     flex-direction: column;
-    background-color: #f1f1f1;
+    background-color: $background-color;
   }
 
   .breadcrumb {
@@ -343,17 +350,17 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background-color: #f1f1f1;
+  background-color: $background-color;
 }
 
 .breadcrumbLink:hover {
-  color: #7FCC8F;
+  color: $hovering-color;
 }
 
 .bold {
   font-weight: bold;
 }
 
 .span {
-  color: #47B660;
+  color: $span-color;
 }