初心者用HTML・CSS・JSスケルトンファイル【テンプレート#1】｜DAD UNION

初心者向けにHTML・CSS・JSスケルトンファイルを用意しました。
参考書やプログラミングスクールで勉強するのも一つですが、ベースとなるhtmlファイルを自分で更新・編集して実際にどうなるのかやりつつ覚える方が良いと思ってます。
色々やってみたうえでわからないところを参考書やプログラミングスクールで教えて貰う方が良いのではと考えてます。
そのためのHTML・CSS・JSスケルトンファイル第一弾を作ってみました。これから始める方や、まだ初めて間もない方のご参考になれば幸いです。

Contents

初心者用HTML・CSS・JSスケルトンファイルディレクトリ構造
スケルトン用HTMLファイル（test.html）の内容
スケルトン用CSSファイル（style.css）の内容
スケルトン用JSファイル（index.js）の内容
初心者用HTML・CSS・JSスケルトンファイルをGitHubからダウンロード
【HTML初心者用に考えてみた】テンプレートHTMLファイルを触って覚える【HTML講座#1】YouTube動画

初心者用HTML・CSS・JSスケルトンファイルディレクトリ構造

※HTML・CSS・JSファイルのディレクトリ構造は以下の通りです。

template1
│  test.html
│
└─assets
    ├─css
    │      style.css
    │
    ├─images
    │      1.jpg
    │
    └─js
            index.js

スケルトン用HTMLファイル（test.html）の内容

※ローカルでも表示されるようにCSS・JS・画像ファイルの読込を絶対パス（スラッシュ「/」から始まる）ではなく相対パス（カンマ、スラッシュ「./」）で記載してます。
　このファイル内容をいじってみて下さい。拡張子（.html）を変わらなければファイル名を変更しても大丈夫です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>サイト名</title>
  <meta name="description" content="サイトの説明">
  <meta property="og:title" content="サイトタイトル">
  <meta property="og:type" content="website">
  <meta property="og:image" content="">
  <meta property="og:description" content="サイトの説明">
  <meta property="og:site_name" content="サイト名">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="./assets/css/style.css"/>
</head>
<body>
<header>
  <div class="logo">サイトのロゴ</div>
</header>
<main>
  <section>
  	<h1>サイトの名前や説明（コピーやタイトル）</h1>
  	<div class="dummyimg"><img src="./assets/images/1.jpg" alt=""></div>
  </section>
</main>
<footer>
	<div class="copy">&copy;Company Co., Ltd.</div>
</footer>
<script src="./assets/js/index.js"></script>
</body>
</html>

スケルトン用CSSファイル（style.css）の内容

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  margin: 0 auto;
  background-color: #fff;
  width: 100%;
  color: #000;
}

header {
  width: 100%;
  background-color: #000;
  padding: 20px 0;
  text-align: center;
}

header .logo {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

section {
  font-size: 14px;
  padding: 60px 0;
}

section h1 {
  font-size: 18px;
  text-align: center;
}

section .dummyimg {
  width: 70%;
  margin: 20px auto 0 auto;
}

section .dummyimg img {
  width: 100%;
}

footer {
  width: 100%;
  text-align: center;
  background-color: #000;
}

footer .copy {
  color: #fff;
  padding: 20px 0;
  font-size: 12px;
}

スケルトン用JSファイル（index.js）の内容

※alert()処理をコメントアウトしてるだけです。

//alert("test");

初心者用HTML・CSS・JSスケルトンファイルをGitHubからダウンロード

※リンク先の「Code」をクリックし「Download ZIP」より一式ダウンロードできます。

「yo1tec/template1」からダウンロード＞＞

　
このHTML・CSS・JSスケルトン（テンプレート）を使って今後YouTubeでHTML講座を考えてます。
またスケルトン（テンプレート）はアップデート、第二・第三弾と初心者用に提供できればと考えてます。

　
※ダウンロード・利用される場合は自己責任でお願いします。