編集履歴

質問編集履歴

css修正いたしました。今一度確認お願いします。

2021/10/07 06:19

投稿

free_teku

スコア103

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -374,10 +374,6 @@
 .plan {
   background-image: url(../../img/bg02.png);
@@ -390,8 +386,6 @@
   height: auto;
-  max-height: 775px;
   margin-top: 207px;
 }
@@ -432,10 +426,40 @@
-@media screen and (max-width: 992px) {
+@media screen and (min-width: 600px) and (max-width: 1179px) {
   .plan-list {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.plan .plan-item {
+  width: 28%;
+  height: 71%;
+}
+@media screen and (min-width: 600px) and (max-width: 1179px) {
+  .plan .plan-item {
     display: -webkit-box;
     display: -webkit-flex;
@@ -470,17 +494,11 @@
             align-items: center;
+    width: calc(100vw - 4vw*1/3);
+    height: calc(100vw-4vw*1/3);
-  }
+  }
-}
-.plan .plan-item {
-  width: 28%;
-  height: 71%;
 }
@@ -498,15 +516,15 @@
   display: flex;
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
-  -webkit-flex-direction: row-reverse;
+  -webkit-flex-direction: column-reverse;
-      -ms-flex-direction: row-reverse;
+      -ms-flex-direction: column-reverse;
-          flex-direction: row-reverse;
+          flex-direction: column-reverse;
   width: calc(750px/800px*100%);
@@ -514,7 +532,7 @@
-@media screen and (max-width: 992px) {
+@media screen and (min-width: 600px) and (max-width: 1179px) {
   .plan .plan-item a {
@@ -530,79 +548,81 @@
     -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -webkit-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    padding: 0px 4vw;
+  }
+}
+.plan .plan-item a .plan-txt {
+  padding-top: 32px;
+}
+@media screen and (min-width: 600px) and (max-width: 1179px) {
+  .plan .plan-item a .plan-txt {
+    width: 50%;
+    padding-left: 20px;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
+    -webkit-flex-direction: column;
-        -ms-flex-direction: row;
+        -ms-flex-direction: column;
-            flex-direction: row;
+            flex-direction: column;
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center;
-    padding: 0px 4vw;
-  }
-}
-.plan .plan-item a .plan-txt {
-  padding-top: 32px;
-}
-@media screen and (max-width: 992px) {
-  .plan .plan-item a .plan-txt {
-    width: calc(375px/800px*100%);
-    padding-left: 20px;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-            flex-direction: row;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    flex: 1;
   }
@@ -620,10 +640,12 @@
-@media screen and (max-width: 992px) {
+@media screen and (min-width: 600px) and (max-width: 1179px) {
   .plan .plan-item a .plan-txt .plan-ttl {
+    display: block;
     font-size: 2.0rem;
   }
@@ -634,16 +656,20 @@
 .plan .plan-item a .plan-txt .desc {
+  display: inline-block;
   padding-top: 36px;
 }
-@media screen and (max-width: 992px) {
+@media screen and (min-width: 600px) and (max-width: 1179px) {
   .plan .plan-item a .plan-txt .desc {
+    display: block;
     font-size: 1.6rem;
   }
@@ -654,22 +680,20 @@
 .plan .plan-item a img {
-  display: block;
+  overflow: hidden;
-}
+}
-@media screen and (max-width: 992px) {
+@media screen and (min-width: 600px) and (max-width: 1179px) {
   .plan .plan-item a img {
-    width: 28%;
+    width: 50%;
     height: 27%;
-    width: 100%;
   }
 }
@@ -686,4 +710,8 @@
 ### 補足情報（FW/ツールのバージョンなど）

修正いたしました

2021/10/07 06:19

投稿

free_teku

スコア103

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -14,7 +14,7 @@
 ![完成](d64f93addbdae4f206527e58c6e863cb.png)
-![現状](fd2d7215b69cbd06a3d3bfdebc1dedc0.png)
+![現状](df177cb29267d68af1f3c3a136715b68.jpeg)

追記しました

2021/10/06 11:02

投稿

free_teku

スコア103

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -22,6 +22,10 @@
+![plan-imgにfooter.scss??](d488750a31f90156e25fe00f0637676b.png)
 ### 発生している問題・エラーメッセージ

修正しました

2021/09/30 14:05

投稿

free_teku

スコア103

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -372,6 +372,8 @@
 .plan {
   background-image: url(../../img/bg02.png);
@@ -470,7 +472,7 @@
-.plan-list .plan-item {
+.plan .plan-item {
   width: 28%;
@@ -480,7 +482,7 @@
-.plan-list .plan-item a {
+.plan .plan-item a {
   display: block;
@@ -492,15 +494,15 @@
   display: flex;
-  -webkit-box-orient: vertical;
+  -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
-  -webkit-flex-direction: column-reverse;
+  -webkit-flex-direction: row-reverse;
-      -ms-flex-direction: column-reverse;
+      -ms-flex-direction: row-reverse;
-          flex-direction: column-reverse;
+          flex-direction: row-reverse;
   width: calc(750px/800px*100%);
@@ -510,7 +512,7 @@
 @media screen and (max-width: 992px) {
-  .plan-list .plan-item a {
+  .plan .plan-item a {
     width: calc(750px/800px*100%);
@@ -532,14 +534,6 @@
             flex-direction: row;
-    -webkit-box-pack: row;
-    -webkit-justify-content: row;
-        -ms-flex-pack: row;
-            justify-content: row;
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
@@ -564,7 +558,7 @@
-.plan-list .plan-item a .plan-txt {
+.plan .plan-item a .plan-txt {
   padding-top: 32px;
@@ -574,19 +568,45 @@
 @media screen and (max-width: 992px) {
-  .plan-list .plan-item a .plan-txt {
+  .plan .plan-item a .plan-txt {
     width: calc(375px/800px*100%);
     padding-left: 20px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
-  }
+  }
-}
+}
-.plan-list .plan-item a .plan-txt .plan-ttl {
+.plan .plan-item a .plan-txt .plan-ttl {
   font-size: 2rem;
@@ -598,7 +618,7 @@
 @media screen and (max-width: 992px) {
-  .plan-list .plan-item a .plan-txt .plan-ttl {
+  .plan .plan-item a .plan-txt .plan-ttl {
     font-size: 2.0rem;
@@ -608,7 +628,7 @@
-.plan-list .plan-item a .plan-txt .desc {
+.plan .plan-item a .plan-txt .desc {
   padding-top: 36px;
@@ -618,7 +638,7 @@
 @media screen and (max-width: 992px) {
-  .plan-list .plan-item a .plan-txt .desc {
+  .plan .plan-item a .plan-txt .desc {
     font-size: 1.6rem;
@@ -628,7 +648,7 @@
-.plan-list .plan-item a img {
+.plan .plan-item a img {
   display: block;
@@ -638,7 +658,7 @@
 @media screen and (max-width: 992px) {
-  .plan-list .plan-item a img {
+  .plan .plan-item a img {
     width: 28%;

CSS修正しました

2021/09/30 05:38

投稿

free_teku

スコア103

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,6 +18,10 @@
+![変更後：現状2](d91b3406261a845f6ef1a2ba7e2f93b2.png)
 ### 発生している問題・エラーメッセージ
@@ -366,6 +370,8 @@
 .plan {
   background-image: url(../../img/bg02.png);
@@ -474,9 +480,37 @@
+.plan-list .plan-item a {
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+  width: calc(750px/800px*100%);
+}
 @media screen and (max-width: 992px) {
-  .plan-list .plan-item {
+  .plan-list .plan-item a {
     width: calc(750px/800px*100%);
@@ -530,98 +564,80 @@
+.plan-list .plan-item a .plan-txt {
+  padding-top: 32px;
+}
+@media screen and (max-width: 992px) {
+  .plan-list .plan-item a .plan-txt {
+    width: calc(375px/800px*100%);
+    padding-left: 20px;
+  }
+}
+.plan-list .plan-item a .plan-txt .plan-ttl {
+  font-size: 2rem;
+  line-height: 1.6;
+}
+@media screen and (max-width: 992px) {
+  .plan-list .plan-item a .plan-txt .plan-ttl {
+    font-size: 2.0rem;
+  }
+}
+.plan-list .plan-item a .plan-txt .desc {
+  padding-top: 36px;
+}
+@media screen and (max-width: 992px) {
+  .plan-list .plan-item a .plan-txt .desc {
+    font-size: 1.6rem;
+  }
+}
-.plan-list .plan-item a {
+.plan-list .plan-item a img {
   display: block;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 96vw;
-}
-.plan-list .plan-item a .plan-txt {
-  padding-top: 32px;
 }
 @media screen and (max-width: 992px) {
-  .plan-list .plan-item a .plan-txt {
-    width: calc(375px/800px*100%);
-    padding-left: 20px;
-  }
-}
-.plan-list .plan-item a .plan-txt .plan-ttl {
-  font-size: 2rem;
-  line-height: 1.6;
-}
-@media screen and (max-width: 992px) {
-  .plan-list .plan-item a .plan-txt .plan-ttl {
-    font-size: 2.0rem;
-  }
-}
-.plan-list .plan-item a .plan-txt .desc {
-  padding-top: 36px;
-}
-@media screen and (max-width: 992px) {
-  .plan-list .plan-item a .plan-txt .desc {
-    font-size: 1.6rem;
-  }
-}
-.plan-list .plan-item a img {
-  display: block;
-}
-@media screen and (max-width: 992px) {
   .plan-list .plan-item a img {
     width: 28%;