Shunsuke

src/App.js

@@ -1,12 +1,11 @@
-import React from 'react'
-import './App.css'
+import Card from './component/Card';
 
-function App () {
-    return (
-        <div className="App">
-
-        </div>
-    )
+function App() {
+  return (
+    <div>
+      <Card />
+    </div>
+  );
 }
 
-export default App
+export default App

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 (       
+            <div className="container">
+                {data.map((value) =>(
+                    <div className="card-wrapper">
+                        <a href="#">
+                            <div className="card">
+                                <div className="card__img">
+                                    <img src={value.img} alt={value.alt} />
+                                </div>
+                                <div className="card__text">
+                                    <p className="card__text__shop">{value.shop}</p>
+                                    <p className="card__text__distance">{value.distance}km</p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    ))}   
+            </div>          
+        )
+    }
+}
+
+export default Card;

src/component/card.css

@@ -0,0 +1,85 @@
+.card-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 2.8125rem 0 0 4.375rem;
+}
+.card-wrapper a {
+  color: #000;
+  text-decoration: none;
+}
+
+.card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  /* img,shop,distanceをよこならびにする */
+  display: flex;
+  width: 40rem;
+  height: 13.4375rem;
+  cursor: pointer;
+  background-color: #fff;
+  border-radius: 10px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 5px 5px 25px;
+          box-shadow: rgba(0, 0, 0, 0.25) 5px 5px 25px;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+/* マウスが乗った時のアクション */
+.card:hover {
+  opacity: 0.7;
+}
+
+/*画像のサイズを調整*/
+.card__img {
+  width: 13.4375rem;
+}
+
+.card__img img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px 0 0 10px;
+  /*余白なく縦横比を維持して中央にトリミング*/
+  /*-o-のようにベンダー接頭辞ありとなしを用意することによって様々なブラウザに対して互換性を保証する*/
+  -o-object-fit: cover;
+      object-fit: cover;
+  -o-object-position: center;
+      object-position: center;
+}
+
+.card__text {
+  width: calc(40rem - 13.4375rem);
+}
+
+.card__text__shop {
+  width: calc(40rem - 13.4375rem);
+  overflow: hidden;
+  font-size: 2.5rem;
+  line-height: 9rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card__text__distance {
+  position: relative;
+  top: -5rem;
+  left: 20rem;
+  display: inline-block;
+  font-size: 1.875rem;
+  color: #696969;
+}
+
+.container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -ms-flex-line-pack: start;
+      align-content: flex-start;
+  width: 100%;
+  max-width: 1500px;
+  padding-top: 100px;
+  margin: 0 auto;
+}