教材用HTMLの基礎テンプレート（Jquery,Bootstarap含む）
作成手順
最初にフォルダの全階層分作成します。
まず、デスクトップ内にlessonフォルダを作成します。
続いて、そのlessonフォルダの中に以下のような構造のフォルダを作ります。
assets
∟ css
∟ images
∟ js
まず、デスクトップ内にlessonフォルダを作成します。
続いて、そのlessonフォルダの中に以下のような構造のフォルダを作ります。
assets
∟ css
∟ images
∟ js
次に、lesson/assets/cssフォルダ内にstyle.cssファイルを作成します。
※中身は空で構いません。
続いて、lesson/assets/jsフォルダ内にscript.jsファイルを作成します。
※中身は空で構いません。
最後に、lessonフォルダ内にlesson_xx.htmlファイルを作成し、以下のソースコードを張り付けて保存。
※ファイル名xxの部分は、自由に変更してください。
<!DOCTYPE html>
<html>
<head>
<title>教材</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css" media="screen"/>
</head>
<body>
<div class="container">
<div class="card card-default">
<div class="card-body">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
まとめ
最初は単なる文字の羅列にしか見えませんが、しばらくするとそれぞれに役割があることがわかってきます。
無理に記憶する必要はありません。
触っていくうちに慣れて覚えますので、何度でも触りましょう。
無理に記憶する必要はありません。
触っていくうちに慣れて覚えますので、何度でも触りましょう。
