JavaScript備忘録

web

同じフォルダ内に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!';
  });
})();

See the Pen mmQJLM by nuto (@exarow) on CodePen.

コメント

タイトルとURLをコピーしました