HTML

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

  /

HTML、CSS、JavaScriptを初めて学ぶ際、いきなり複雑なプロジェクトに取り組むのは難しいと感じるかもしれません。そこで、基本的なスケルトンファイルを用意しました。
このスケルトンファイルは、初心者がHTMLやCSS、JavaScriptの基本を理解しながら実際に手を動かして学べるよう設計されています。プログラミングの基礎を学ぶためには、書籍やプログラミングスクールでの学習が有効ですが、自分でコードを変更し、結果を確認しながら進める方法も効果的です。
今回提供するスケルトンファイルは、そんな「実際に試してみる」学習方法をサポートするためのものです。

Contents

スケルトンファイルとは？

スケルトンファイルとは、特定のプロジェクトやウェブページの基本的な構造を持ったファイルセットです。初心者の方が自分でゼロからコードを書くのはハードルが高いこともあります。そのため、基本的なHTML、CSS、JavaScriptの雛形を提供し、それをベースにコードを編集していくことで学習を進められます。

このファイルセットを使うことで、以下のような学習効果が期待できます。

  • 基本的なディレクトリ構造の理解
  • 相対パスと絶対パスの使い分け
  • HTMLの基本的なタグや属性の理解
  • CSSによるレイアウトやデザインの調整方法の学習
  • JavaScriptを使った簡単なインタラクションの追加方法

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

今回提供するスケルトンファイルのディレクトリ構造は以下のようになっています。

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

この構造により、HTMLファイルからCSSやJavaScript、画像ファイルがどのようにリンクされているかを理解しやすくなっています。

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

このHTMLファイルは、ウェブページの基本的な構造を提供するものです。ヘッダー、メインコンテンツ、フッターの部分が含まれており、CSSやJavaScriptファイルとの連携も簡単に確認できます。

ローカルでも表示されるように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）の内容

次に、ページの見た目を決定する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;
}

このCSSを活用することで、シンプルながらも美しいレイアウトを実現できます。特に、初心者にとって重要なのは、各CSSセレクターがどの部分に作用しているかを確認しながら修正を加えることです。

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

JavaScriptファイルには、簡単なアラート処理がコメントアウトされた状態で含まれています。これを基に、さまざまな動きを追加していくことが可能です。

//alert("test");

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

提供しているスケルトンファイルは、GitHubからダウンロード可能です。GitHubページにアクセスし、「Code」ボタンをクリックして「Download ZIP」を選択することで、ファイル一式をダウンロードできます。

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

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

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

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



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

まとめ

このスケルトンファイルを活用して、HTML、CSS、JavaScriptの学習を進めてください。各ファイルを編集しながら、自分自身で試行錯誤することで、理解が深まるはずです。また、将来的にはこのテンプレートを基にさらなるプロジェクトにも挑戦できるようになります。

このように、基本的なテンプレートを使用してウェブ開発の基礎を学び、独自のサイトを構築する楽しさを感じてください。

　
※参考にされる場合は自己責任でお願いします。

スケルトン テンプレート
関連記事