More than 5 years have passed since last update.

カウントボタンのhtml、CSS、Javascriptのメモ

Last updated at 2018-05-05Posted at 2018-05-05

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Count</title>
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<div id="btn">0</div>
	<script src="js/main.js"></script>
</body>

main.js

(function() {
  var btn = document.getElementById('btn');
  var n = 0;
  btn.addEventListener('click', function() {
    n++;
    this.textContent = n;
  });
  btn.addEventListener('mousedown', function() {
    this.className = 'pushed';
  });
  btn.addEventListener('click', function() {
    this.className = '';
  });
})();

styles.css

@charset "UTF-8";

#btn {
  /* 中央ぞろえ　上からマージン30px */
  margin: 30px auto 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ef454a;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.9;
  box-shadow: 0 10px 0 #d1483e;
  border: 3px solid #d1483e;
  /* 連打した時にテキストが選択されるのを防ぐ*/
  user-select: none;
}

#btn:hover {
  opacity: 1;
}

/* クリックした時の動き。6px下へ。30px＋6px。*/
#btn.pushed {
  margin-top: 36px;
  box-shadow: 0 4px 0 #d1483e;
}

結果

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up