HTMLについての基本
.html、.css、.jsがセット。.htmlがマザーボードみたいな感じで、.cssが見た目の調整要因で、.jsが実際の処理（ボタンとか）、計算に関わる。
File/
├─ index.html
├─ style.css
├─ script.js
|
├─ images/（画像など）
| └─img1.png
└─ data/（データなど）
└─data.js
テンプレート
HTML
各要素にはidをつけておく。（.js等からの参照用。）
<!Doctype html>
<html lang="ja">
<head>
<!-- ページの設定など -->
<meta charset ="UTF-8">
<title>pagetitle</title>
<!-- .cssの読み込み -->
<link rel="stylesheet" href="template.css" >
</head>
<body>
<!-- 本文 -->
<h1 id = "title">タイトル</h1>
<h2 id = "subtitle">中見出し</h2>
<h3 id = "subsubtitle">小見出し</h3>
<p>本文</p>
<!-- ボタン -->
<button id="btn">適当なボタン</button><br>
<!-- 画像 -->
<img src="./image/img1.png" width = "200"><br>
<!-- リンク -->
<a href="https://www.google.com">適当なリンク</a> <br>
<!-- スライダ (valueは初期値)-->
<input type="range" id="slider" min="0" max="100" value="50"><br>
<!-- 箱(.css で見た目整える。)-->
<div id="box">この中にいろいろ入れられる</div>
<!-- .jsの読み込み -->
<script src="template.js"></script>
</body>
</html>
CSS
.css
/* 諸々の見た目を決める。 */
/* 本文 */
body {
background-color: #f0f8ff;
font-family: sans-serif;
text-align: center;
margin-top: 100px;
}
button {
padding: 15px 20px;
font-size: 15px;
}
/* id指定したものは#でいける。 */
div{
border-radius: 16px;
border: 1px solid #e8f8f7;
padding: 16px;
background: #239399;
}
#box2{
border-radius: 16px;
border: 1px solid #e8eef8;
padding: 16px;
background: #c49f3a;
}