HTML スクリプト (HTML Scripts)

Volardev 編集部 April 12, 2026

HTMLのスクリプトを使用することで、Webページに動的な挙動（インタラクション）を追加し、静的なドキュメントをフル機能のアプリケーションへと昇華させることができます。

1. HTML <script> タグ

HTMLの <script> タグは、クライアントサイド（Client-side）のスクリプト、特に JavaScript を定義するために使用されます。

<script> 要素には、スクリプト文を直接記述することも、src 属性を使用して外部のスクリプトファイルを読み込むことも可能です。

JavaScript の主な用途は、画像操作（Image Manipulation）、フォームのバリデーション（Form Validation）、およびコンテンツの動的な変更（Dynamic Content Changes）です。

1.1 スクリプトの実行例

特定の要素を選択して操作する、最も基本的な JavaScript の例です。

<script>
  // id が「demo」の要素を選択し、その内部コンテンツを書き換える
  document.getElementById("demo").innerHTML = "こんにちは JavaScript！";
</script>

2. JavaScript の基本操作

JavaScript は、HTML要素に対して様々な操作を行うことができます。

2.1 コンテンツの変更

JavaScript を使用すると、HTML要素のコンテンツ（innerHTML）を動的に書き換えることができます。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript のデモ</h1>
<p id="demo">JavaScript は HTML の内容を書き換えることができます。</p>

<button type="button" onclick="myFunction()">クリックしてね！</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "ハロー、JavaScript！";
}
</script>

</body>
</html>

2.2 スタイルの変更

JavaScript は、HTML要素のスタイル（CSS）を操作することも可能です。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript のデモ</h1>
<p id="demo">JavaScript は HTML 要素のスタイルを変更できます。</p>

<script>
function myFunction() {
  let x = document.getElementById("demo");
  x.style.fontSize = "25px";           // フォントサイズを変更
  x.style.color = "red";              // 文字色を変更
}
</script>

<button type="button" onclick="myFunction()">スタイルを変更！</button>

</body>
</html>

2.3 属性の変更

JavaScript を使用して、HTML要素の属性（src、href など）を動的に書き換えることができます。

<script>
function light(sw) {
  let pic;
  if (sw == 0) {
    pic = "pic_bulboff.gif"; // 電球をオフにする画像
  } else {
    pic = "pic_bulbon.gif";  // 電球をオンにする画像
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">オン</button>
<button type="button" onclick="light(0)">オフ</button>
</p>

3. HTML <noscript> タグ

HTMLの <noscript> タグは、ブラウザでスクリプトが完全に無効化されている場合や、スクリプトをサポートしていないブラウザを使用しているユーザーに対して表示される代替コンテンツを定義します。

<noscript> 要素の内部には、通常の <body> タグ内で使用できるすべてのHTML要素を含めることができます。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = "ハロー JavaScript！";
</script>

<noscript>
  お使いのブラウザは JavaScript をサポートしていないか、無効に設定されています。
  このページを正しく閲覧するには JavaScript を有効にしてください。
</noscript>

</body>
</html>

4. スクリプト関連タグのまとめ

Web開発において、スクリプト制御に関わる主要なタグは以下の通りです。

タグ	説明
`<script>`	クライアントサイドのスクリプトを定義します。
`<noscript>`	スクリプトが無効な環境での代替コンテンツを定義します。

[!TIP]
モダンなフロントエンド開発では、ページのレンダリング速度を向上させるために、<script> タグに async や defer 属性を付与して、HTMLの解析をブロックせずにスクリプトを読み込む手法が一般的です。