雛形コード

雛形コードです。git clone もしくは、コピペして利用してください。

- Githubリポジトリ / Clone URL

git clone -b starter-vue https://github.com/if-tech-support/counter.git

- HTMLコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Counter</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div class="counter" id="app">
      <div class="counter__display">0</div>
      <div class="counter__buttons">
        <button>-1</button>
        <button>+1</button>
      </div>
      <button class="counter__reset">リセット</button>
    </div>

    <script src="app.js"></script>
  </body>
</html>

- CSSコード

.counter {
  width: 300px;
  margin: 80px auto 0;
}

.counter__display {
  font-size: 40px;
  padding: 35px;
  text-align: center;
  border: 3px solid #ccc;
}

.counter__buttons {
  display: flex;
  border: 3px solid #ccc;
  border-top: none;
}

.counter__buttons button {
  width: 150px;
  font-size: 26px;
  padding: 20px;
  background-color: rgba(204, 204, 204, 0.5);
  border: none;
  outline: none;
  cursor: pointer;
}

.counter__buttons button:first-child {
  border-right: 3px solid #ccc;
}

.counter__buttons button:hover {
  background-color: #ccc;
}

.counter__reset {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  background-color: rgba(204, 204, 204, 0.5);
  border: 3px solid #ccc;
  border-top: none;
  outline: none;
  cursor: pointer;
}

.counter__reset:hover {
  background-color: #ccc;
}

- JSコード

new Vue({
  el: '#app',
  data: {},
});

Previous成果物の確認 NextVueコード

Last updated 3 years ago

Was this helpful?