同じフォルダ内にindex.html、styles.css、main.jsのファイルをそれぞれ作成する。
まずは、HTMLファイルの作成。(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>circle</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="btn">?</div>
<script src="js/main.js"></script>
</body>
</html>
次に、cssファイルの作成。(styles.css)
@@charset "UTF-8";
body {
background: rgba(0, 0, 0, 0.31);
}
#btn {
margin: 30px auto 0;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgb(208, 22, 145);
text-align: center;
line-height: 200px;
color: rgb(212, 96, 162);
font-size: 42px;
font-weight: bold;
}
最後に、javascriptの記述。(main.js)
(function() {
'use strict';
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
this.textContent = 'hit!';
});
})();
コメント