HTML、CSS、JavaScriptの最小構成テンプレートについて！

Webページの作成において、必要最低限のHTML、CSS、JavaScriptの構成を理解することは、効率的な開発を進めるために重要です。

この記事ではHTML、CSS、JavaScriptの最小構成のテンプレートについて説明しています。

HTML、CSS、JavaScriptの最小構成

以下にのHTML、CSS、JavaScriptの最小構成のテンプレートを示しています。これが最もシンプルなWebページの骨組みとなります。このテンプレートをもとに、さらに機能を追加していくことが可能です。

HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Hello</p>
    <script src="script.js"></script>
</body>
</html>

HTMLの解説

  • <!DOCTYPE html>: HTML5の宣言です。
  • <meta charset="UTF-8">: 文字コードをUTF-8に設定します。
  • <title>: ページのタイトルを指定します。
  • <link rel="stylesheet" href="styles.css">: 外部のCSSファイルを読み込みます。
  • <script src="script.js"></script>: 外部のJavaScriptファイルを読み込みます。

CSS（styles.css）

p {
  color: red;
}

CSSの解説

  • p は、HTMLの段落要素（<p>タグ）に適用されるスタイルです。
  • color: red; で、文字の色を赤に指定しています。

JavaScript（script.js）

window.onload = function() {
  console.log('Hello');
}

JavaScriptの解説

  • window.onload は、ページのすべてのリソース（HTML、CSS、画像など）が読み込まれた後に実行されるイベントハンドラです。
  • console.log('Hello'); は、ブラウザのデベロッパーツールのコンソールに「Hello」というメッセージを出力します。この方法でJavaScriptが正しく動作しているかを確認できます。

CSSとJavaScriptを直接HTMLに書き込んだ最小構成のテンプレート

HTMLファイルの中にCSSやJavaScriptを直接書くことも可能です。これにより、単一のHTMLファイルでスタイリングとスクリプトを管理できるようになります。

以下に、CSSとJavaScriptを直接HTMLに書き込んだ最小構成のテンプレートを示します。

HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* ここにCSSを直接記述します */
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Hello</p>
    <script>
        // ここにJavaScriptを直接記述します
        window.onload = function() {
            console.log('Hello');
        }
    </script>
</body>
</html>

HTMLの解説

  • <style>タグを使用すると、HTMLドキュメント内にCSSを直接記述できます。この方法では、styles.cssのように外部ファイルを使用せず、CSSを内部に書けます。
  • <script>タグを使用すると、HTMLドキュメント内にJavaScriptを直接記述できます。この方法では、script.js のような外部ファイルを使用せず、スクリプトを内部に書けます。