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

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

初心者向けにHTML・CSS・JSスケルトンファイルを用意しました。
参考書やプログラミングスクールで勉強するのも一つですが、ベースとなるhtmlファイルを自分で更新・編集して実際にどうなるのかやりつつ覚える方が良いと思ってます。
色々やってみたうえでわからないところを参考書やプログラミングスクールで教えて貰う方が良いのではと考えてます。
そのための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("test");

GitHubからダウンロード

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

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

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

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

【HTML初心者用に考えてみた】テンプレートHTMLファイルを触って覚える【HTML講座#1】YouTube動画



HTML講座、YouTube、動画編集全て初めてやりました。あたたかい目で見てもらえると幸いです。