From 0e7736b865cc738916199cb6a7163cc78c3af954 Mon Sep 17 00:00:00 2001
From: github <github>
Date: Sat, 18 Mar 2023 19:10:32 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Add=20Breadcrumbs=20trail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/breadcrumbs/breadcrumbs.jsx        | 11 +++++++++++
 components/breadcrumbs/breadcrumbs.module.css | 19 +++++++++++++++++++
 components/contents/contents.jsx              |  2 +-
 components/contents/contents.module.css       |  4 ++--
 components/footer/footer.jsx                  | 13 +++++--------
 components/header/header.jsx                  | 10 +++++-----
 components/header/header.module.css           |  1 +
 src/pages/index.js                            |  8 +++++---
 8 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 components/breadcrumbs/breadcrumbs.jsx
 create mode 100644 components/breadcrumbs/breadcrumbs.module.css

diff --git a/components/breadcrumbs/breadcrumbs.jsx b/components/breadcrumbs/breadcrumbs.jsx
new file mode 100644
index 0000000..db04fab
--- /dev/null
+++ b/components/breadcrumbs/breadcrumbs.jsx
@@ -0,0 +1,11 @@
+import styles from '/components/breadcrumbs/breadcrumbs.module.css'
+
+
+
+export function Breadcrumbs() {
+    return (
+        <div className={styles.breadcrumbs}>
+            パンくずリスト
+        </div>
+    )
+}
diff --git a/components/breadcrumbs/breadcrumbs.module.css b/components/breadcrumbs/breadcrumbs.module.css
new file mode 100644
index 0000000..b381bb6
--- /dev/null
+++ b/components/breadcrumbs/breadcrumbs.module.css
@@ -0,0 +1,19 @@
+.breadcrumbs {
+    position: absolute;
+    top:65px;
+    /* background-color: aqua; */
+    color: #000 ;
+    width: 100vw;
+    font-size: 12px;
+    padding-left: 20px;
+    z-index: 0;
+}
+
+
+@media screen and (max-width: 767px) {
+    .breadcrumbs {
+        top:70px;
+        padding-left: 15px;
+    }
+   
+}
diff --git a/components/contents/contents.jsx b/components/contents/contents.jsx
index 81e3054..3feff78 100644
--- a/components/contents/contents.jsx
+++ b/components/contents/contents.jsx
@@ -1,6 +1,6 @@
 import styles from '/components/contents/contents.module.css'
 
-export default function Content() {
+export  default function Content() {
   return (
     <main>
             <div className={styles.content}>
diff --git a/components/contents/contents.module.css b/components/contents/contents.module.css
index 9bda4d8..d6f173b 100644
--- a/components/contents/contents.module.css
+++ b/components/contents/contents.module.css
@@ -1,5 +1,5 @@
 .content {
-    padding: 70px 30px 0 30px;
+    padding: 85px 20px 0 20px;
     height: 100vh;
     width: 100vw;
     background-color: #e4b1ac81;
@@ -9,7 +9,7 @@
 @media screen and (max-width: 767px) {
 
     .content {
-        padding: 90px 20px 0 30px;
+        padding: 95px 15px 0 15px;
         font-size: 14px;
     }
 
diff --git a/components/footer/footer.jsx b/components/footer/footer.jsx
index c78ed9d..ae5085b 100644
--- a/components/footer/footer.jsx
+++ b/components/footer/footer.jsx
@@ -2,7 +2,7 @@ import styles from '/components/footer/footer.module.css'
 import Link from 'next/link'
 
 
-export default function Footer() {
+export function Footer() {
     return (
         <footer className={styles.footer}>
             <div className={styles.social}>
@@ -14,19 +14,16 @@ export default function Footer() {
 
             <ul className={styles.list}>
                 <li>
-                <Link href="/" > Section1</Link>
+                <Link href="/" >Home</Link>
                 </li>
                 <li>
-                <Link href="/" > Section2</Link>
+                <Link href="/" >About</Link>
                 </li>
                 <li>
-                <Link href="/" > Section3</Link>
+                <Link href="/" >Service</Link>
                 </li>
                 <li>
-                <Link href="/" > Section4</Link>
-                </li>
-                <li>
-                <Link href="/" > Section5</Link>
+                <Link href="/" >News</Link>
                 </li>
                 
                 <p className={styles.copyright}>
diff --git a/components/header/header.jsx b/components/header/header.jsx
index b34ae03..f6c8fac 100644
--- a/components/header/header.jsx
+++ b/components/header/header.jsx
@@ -1,7 +1,7 @@
 import styles from '/components/header/header.module.css'
 import Link from 'next/link'
 
-export default function Header() {
+export function Header() {
     return (
         <header className={styles.header}>
             <div className={styles.container}>
@@ -16,16 +16,16 @@ export default function Header() {
                 <nav className={styles.area_nav_header}>
                     <ul className={styles.list_nav_header}>
                         <li className={styles.lists}>
-                            <Link href="/" >Section1</Link>
+                            <Link href="/" >Home</Link>
                         </li>
                         <li className={styles.lists}>
-                            <Link href="/" >Section2</Link>
+                            <Link href="/" >About</Link>
                         </li>
                         <li className={styles.lists}>
-                            <Link href="/" >Section3</Link>
+                            <Link href="/" >Service</Link>
                         </li>
                         <li className={styles.lists}>
-                            <Link href="/" >Section4</Link>
+                            <Link href="/" >News</Link>
                         </li>
 
                     </ul>
diff --git a/components/header/header.module.css b/components/header/header.module.css
index d4d923e..5587873 100644
--- a/components/header/header.module.css
+++ b/components/header/header.module.css
@@ -3,6 +3,7 @@
     background: #c0d7dbf3;
     width: 100vw;
     position: fixed;
+    z-index: 1;
 }
 
 .header>.container {
diff --git a/src/pages/index.js b/src/pages/index.js
index b88dea3..8ae6cf2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,8 @@
 import Head from 'next/head'
-import Header from '/components/header/header'
+import { Header } from '/components/header/header'
 import Contents from '/components/contents/contents'
-import Footer from '/components/footer/footer'
+import { Footer } from '/components/footer/footer'
+import { Breadcrumbs } from '/components/breadcrumbs/breadcrumbs'
 
 export default function Home() {
   return (
@@ -14,9 +15,10 @@ export default function Home() {
       </Head>
 
       < Header />
+      < Breadcrumbs />
       <Contents />
       < Footer />
-      
+
     </>
   )
 }