商品一覧画面修正途中

src/main/resources/static/css/style.css

@@ -1879,7 +1879,7 @@ th, td {
 
 /* list画面 */
 #listBox {
-    background-color: #FDF5E6;
+    /*background-color: #FDF5E6;*/
     height: 100%;
     display: flex;
     flex-direction: row;
@@ -1887,9 +1887,10 @@ th, td {
 }
 
 .productBox {
-    height: 30%;
+	background-color: #FDF5E6;
+    height: 400px;
     width: 30%;
-    border: 1px solid black;
+    /*border: 1px solid black;*/
     margin: 5px;
 }
 
@@ -1936,11 +1937,26 @@ th, td {
 .details {
 	width: 150px;
     height: 50px;
-    margin: 50px 0;
     font-weight: bold;
     font-size: small;
     background-color: #1abc9c;
     border-radius: 3px;
     border:none;
     color: #000;	
+}
+
+.detailsBtn, .shoeImage, .shoeName, .shoePrice, .shoeImageDiv{
+	text-align: center;
+}
+
+.productBox {
+	margin: 0 auto;
+}
+
+.shoeImageDiv{	
+	margin-top: 45px;
+}
+
+.shoeName {
+	margin-top: 10px;
 }
\ No newline at end of file

src/main/resources/templates/index.html

@@ -9,8 +9,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
       	<link rel="icon" href="images/favicon.png" th:href="@{/images/favicon.png}"/>
         <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
-		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
-            integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"/>
+		<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
+            integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"/> -->
         <!--[if lt IE 9]>
             <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
             <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
@@ -60,7 +60,14 @@
                         </button>
                         <a class="navbar-brand" href="#"><b>L</b>imited</a>
                     </div>
-
+					<!-- Collect the nav links, forms, and other content for toggling -->
+                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                        
+                        <ul class="nav navbar-nav navbar-right cart-menu">
+                        <li><a href="#" class="search-btn"><i class="fa fa-search" aria-hidden="true"></i></a></li>
+                        <li><a href="#"><span> Cart</span> <span class="shoping-cart">0</span></a></li>
+                    </ul>
+                    </div><!-- /.navbar-collapse -->
 
                     <!--検索機能のためいらないと判断(宮嶋)-->
                     <!-- Collect the nav links, forms, and other content for toggling -->

src/main/resources/templates/list.html

@@ -72,6 +72,14 @@
                         </button>
                         <a class="navbar-brand" href="#"><b>L</b>imited</a>
                     </div>
+                    <!-- Collect the nav links, forms, and other content for toggling -->
+                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                        
+                        <ul class="nav navbar-nav navbar-right cart-menu">
+                        <li><a href="#" class="search-btn"><i class="fa fa-search" aria-hidden="true"></i></a></li>
+                        <li><a href="#"><span> Cart</span> <span class="shoping-cart">0</span></a></li>
+                    </ul>
+                    </div><!-- /.navbar-collapse -->
                 </div>
             </nav>
         </header>
@@ -94,11 +102,11 @@
         <div id="listBox">
             <!--each分でくりかえす(宮嶋)-->
             <div class="productBox" th:each="shoe : ${shoes}">
-                <img class="shoeImage" th:src="@{/upload/{photo}(photo=${shoe.photo})}" alt="productImage" width="300" height="300"/>
+                <div class="shoeImageDiv"><img class="shoeImage" th:src="@{/upload/{photo}(photo=${shoe.photo})}" alt="productImage" width="300" height="200"/></div>
                 <p th:text= "${shoe.name}" class="shoeName">AirMAX</p>
                 <p th:text = "'&yen;' +${shoe.price}" class="shoePrice">￥10,000</p>
                 <input type="hidden" th:value="${shoe.id}"/>
-                <button type="button" id="modal-open" class="details">Datails</button>
+                <div class="detailsBtn"><button type="button" id="modal-open" class="details">Datails</button></div>
                 <!-- <button class="js-modal-open" id="sign-up">Details</button>-->
             </div>
         </div>