雛形コードです。git clone もしくは、コピペして利用してください。
git clone -b starter-vue https://github.com/if-tech-support/counter.gitLast updated
Was this helpful?
Was this helpful?
<!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>.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;
}new Vue({
el: '#app',
data: {},
});