diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.js b/src/App.js
index b408ef3..80e53a7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,11 @@
-import React from 'react'
-import './App.css'
+import Card from './component/Card';
-function App () {
- return (
-
-
-
- )
+function App() {
+ return (
+
+
+
+ );
}
-export default App
+export default App
\ No newline at end of file
diff --git a/src/component/Card.js b/src/component/Card.js
new file mode 100644
index 0000000..3cd3038
--- /dev/null
+++ b/src/component/Card.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import './card.css';
+import Matsuya from './img/matsuya.gif';
+import Donut from './img/donut.jpg';
+import Bookoff from './img/bookoff.jpg';
+import Second from './img/second.jpg';
+import Uniqlo from './img/uniqlo.png';
+import Sukiya from './img/sukiya.png';
+import Wego from './img/wego.png';
+import Earth from './img/earth.jpg';
+import GU from './img/GU.png';
+
+let data = [
+ {img: Matsuya, alt:'matsuya', shop:'松屋金沢工大前店', distance:0.3},
+ {img: Donut, alt:'donut', shop:'ミスタードーナツ野々市ショップ', distance:1.9},
+ {img: Bookoff, alt:'bookoff', shop:'BOOKOFF野々市若松店', distance:1.9},
+ {img: Second, alt:'second', shop:'セカンドストリート野々市本町店', distance:2.4},
+ {img: Uniqlo, alt:'uniqlo', shop:'ユニクロ野々市店', distance:4.0},
+ {img: Sukiya, alt:'sukiya', shop:'すき家野々市新庄店', distance:4.3},
+ {img: Wego, alt:'wego', shop:'WEGO 金沢フォーラス店', distance:6.7},
+ {img: Earth, alt:'earth', shop:'アースミュージック＆エコロジー 金沢フォーラス店', distance:6.7},
+ {img: GU, alt:'GU', shop:'GU イオンタウン金沢示野店', distance:8.3}
+];
+
+class Card extends Component {
+ render() {
+ return (
+
+ {data.map((value) =>(
+
+ ))}
+