Merge pull request #9 from azuki774/apply-css-1

use bootstrap tag を利用

components/History.vue

@@ -25,7 +25,7 @@ recordList.value = data
 </script>
 
 <template>
-  <section>
+  <container>
     <table class="table">
       <thead>
         <tr>
@@ -46,5 +46,5 @@ recordList.value = data
         </tr>
       </tbody>
     </table>
-  </section>
+  </container>
 </template>

components/PostRecord.vue

@@ -46,19 +46,29 @@ const postButton = async (): Promise<void> => {
 </script>
 
 <template>
-  <section>
+  <container>
+    <Row justify-content="md-center">
+      <Col col="md-auto">
+      <BFormSelect v-model="selector" margin="b-4">
+        <b-option v-for="category in categoryList" :key="category.category_id">
+          {{ category.category_name }}
+        </b-option>
+      </BFormSelect>
+      </Col>
 
-    <select v-model="selector">
-      <option v-for="category in categoryList" :key="category.category_id">
-        {{ category.category_name }}
-      </option>
-    </select>
+      <Col col="md-auto">
+      <BFormFloating margin="b-2">
+        <BFormInput v-model="priceBox" type="number" placeholder="[email protected]" />
+        <BFormLabel for="floatingInput">
+          Price
+        </BFormLabel>
+      </BFormFloating>
+      </Col>
+    </Row>
 
-    <input v-model="priceBox" type="number" />
-
-    <div class="col">
-      <button @click="postButton" name="postButton" class="sendbutton" type="submit">Post</button>
-    </div>
-
-  </section>
+    <Col display="grid" gap="2" margin="x-auto" col="6">
+    <b-button button="primary" size="lg" @click="postButton" name="postButton" class="sendbutton"
+      type="submit">Post</b-button>
+    </Col>
+  </container>
 </template>