fix: 体裁の乱れを修正

krmr73 · Oct 2, 2024 · ab171d2 · ab171d2
1 parent 2fefa5d
commit ab171d2
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 2 deletions.
diff --git a/src/styles/Contact.module.scss b/src/styles/Contact.module.scss
@@ -22,7 +22,7 @@
 
 // Text
 .text {
-  margin: 0.5rem 0 0 0.5rem;
+  margin: 0.5rem;
   font-size: 1.1rem;
 }
 
@@ -33,7 +33,6 @@
   text-decoration: none;
 
   .icon {
-    margin-right: 0.5rem;
     font-size: 1.1rem;
     transition: transform 0.3s ease;
     color: #555;

diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
@@ -8,3 +8,20 @@
   min-height: 100vh;
   gap: 3rem;
 }
+
+/* 画面サイズが768px以下の場合のスタイル */
+@media (max-width: 768px) {
+  .container {
+    padding-left: 0;  /* 左の余白をなくす */
+    padding-right: 1rem;  /* 右側に少し余白を残す場合 */
+    padding-top: 1rem;  /* 上部の余白を調整 */
+    padding-bottom: 1rem;  /* 下部の余白を調整 */
+  }
+}
+
+/* さらに小さい画面、480px以下の場合 */
+@media (max-width: 480px) {
+  .container {
+    padding: 0; /* 左右と上下の余白をすべてなくす */
+  }
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -53,3 +53,48 @@ body {
     margin: 0 auto; /* セクションを中央に配置 */
   }
 }
+
+/* スマホ表示向けのスタイル調整 */
+@media (max-width: 768px) {
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  h2 {
+    font-size: 1.6rem;
+  }
+
+  h3 {
+    font-size: 1.2rem;
+  }
+
+  p {
+    font-size: 0.9rem;
+  }
+
+  section {
+    padding: 2rem; /* モバイルでのパディングを小さく */
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.6rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+  }
+
+  p {
+    font-size: 0.8rem;
+  }
+
+  section {
+    padding: 1.5rem; /* スマホ向けにさらにパディングを小さく */
+  }
+}