📝 Add Breadcrumbs trail

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>
+    )
+}

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;
+    }
+
+}

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}>

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;
     }
 

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}>

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>

components/header/header.module.css

@@ -3,6 +3,7 @@
     background: #c0d7dbf3;
     width: 100vw;
     position: fixed;
+    z-index: 1;
 }
 
 .header>.container {

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 />
-      
+
     </>
   )
 }