HP制作のためのJavaScript入門① ～ホームページに多彩な機能を追加する～
山崎講師JavaScriptはブラウザ上で動く唯一のプログラミング言語です。2024年人気のプログラミング言語ランキングでは、第2位にランキングされています。
JavaScriptはウェブサイトにインタラクティブな要素を追加したり、リアルタイムでデータを処理したりするために欠かせないツールです。例えば、フォームのバリデーション（検証）、動的なコンテンツの生成、アニメーションの追加など、JavaScriptを使えばウェブページが生き生きと動き出します。
さらに、この研修の対象外ですが、Node.jsというサーバーサイドで動くJavaScriptにも応用できます。そうすれば、フロントエンドからバックエンドまで一貫してJavaScriptを使うことが可能となり、開発効率が大幅に向上します。
JavaScriptを学ぶことで、皆さんのウェブ開発のスキルは飛躍的に向上するでしょう。そして、自分のアイデアを形にするための無限の可能性が広がるでしょう。このテキストでは、基本的な文法から実践的なテクニックまで、ステップバイステップで丁寧に解説していきます。さあ、JavaScriptの世界に足を踏み入れ、一緒にスキルを磨き上げましょう！
この研修のゴール
または、https://saycon.co.jp/html/javaScript-sample/index2.html
プログラミングの準備
環境設定
JavaScriptの学習を始めるためには、適切な開発環境を整えることが重要です。ここでは、開発環境の設定方法を説明します。すべて無料で入手できるツールです。
必要なツールの紹介
- ウェブブラウザ
- JavaScriptはウェブブラウザ上で動作します。Google ChromeやEdgeなどを使用することを推奨します。もうすでにお持ちかと思いますが、念のため最新バージョンを使うことをお勧めいたします。
- テキストエディタ
- プログラムを書くためのテキストエディタが必要です。以下のエディタは無料で利用でき、機能が充実しています。
必要なツールのインストール
Visual Studio Codeのインストール
- Visual Studio Codeの公式サイトにアクセスし、インストーラをダウンロードします。
- ダウンロードが完了したら、インストーラを実行し、画面の指示に従ってインストールを完了させます。
拡張機能のインストール
VS Codeには多くの便利な拡張機能があります。以下の拡張機能をインストールすることをお勧めします。
- Japanese Language Pack
- VS Codeを日本語で使用したい場合、日本語化のための拡張機能「Japanese Language Pack」をインストールします。この拡張機能をインストールすると、VS Codeのインターフェイスが日本語に変わります。
- インストール方法：
- VS Codeの拡張機能タブを開きます（左側の四角いアイコン）。
- 検索バーに「Japanese Language Pack」と入力し、インストールボタンをクリックします。
- 拡張機能をインストールした後、VS Codeを再起動します。
- VS Codeが再起動すると、日本語化のオプションが表示されるので、「日本語」を選択します。
- Live Server
- HTMLファイルをローカルサーバーでプレビューできます。リアルタイムで変更を確認できるため、開発がスムーズになります。
- インストール方法：
- VS Codeの拡張機能タブを開きます（左側の四角いアイコン）。
- 検索バーに「Live Server」と入力し、インストールボタンをクリックします。
- ESLint
- JavaScriptコードのエラーチェックを自動で行ってくれます。コーディングスタイルの統一やバグの早期発見に役立ちます。
- インストール方法：
- 拡張機能タブを開きます。
- 検索バーに「ESLint」と入力し、インストールボタンをクリックします。
- Prettier
- Code Formatter Prettierは、コードの整形を自動で行ってくれます。指定されたルールに基づいて、インデントや空白の配置を統一し、読みやすいコードを保つことができます。
- インストール方法：
- 拡張機能タブを開きます。
- 検索バーに「Prettier - Code Formatter」と入力し、インストールボタンをクリックします。
- Bracket Pair Colorizer
- 括弧のペアを色分けして表示してくれる拡張機能です。複雑なコードでも対応する括弧を簡単に見つけることができ、コードの可読性が向上します。
- インストール方法：
- 拡張機能タブを開きます。
- 検索バーに「Bracket Pair Colorizer」と入力し、インストールボタンをクリックします。
- Path Intellisense
- ファイルのパス補完を支援してくれる拡張機能です。import文やrequire文などのパス入力時に補完候補を表示してくれるため、タイピングミスを防ぎ、効率的にコーディングできます。
- インストール方法：
- 拡張機能タブを開きます。
- 検索バーに「Path Intellisense」と入力し、インストールボタンをクリックします。
- Debugger for Chrome
- VS Code上で直接デバッグを行うための拡張機能です。Chromeブラウザで実行されるJavaScriptコードをデバッグでき、ブレークポイントの設定や変数の監視が可能です。
- インストール方法：
- 拡張機能タブを開きます。
- 検索バーに「Debugger for Chrome」と入力し、インストールボタンをクリックします。
エディタの使い方
Visual Studio Code の基本操作
- 新しいファイルを作成します。
- ファイルを保存する際に拡張子を
.htmlにします。例：index.html - 以下のような基本的なHTMLテンプレートを入力します。（！を入力してからエンターキーを押すことでHTMLのテンプレートが入力できます）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript入門</title>
</head>
<body>
<h1>JavaScript入門</h1>
<script src="script.js"></script>
</body>
</html>index.htmlと同じフォルダにscript.jsという名前の新しいファイルを作成します。（Ctrlキーを押しながら上記「script.js」をクリックすると簡単にファイルが作成できます）script.jsに以下のような簡単なJavaScriptコードを入力します。
console.log('Hello, JavaScript!');環境の確認
以下の手順で環境が正しく設定されていることを確認します。
- VS Codeで
index.htmlファイルを開き、Live Serverを使用してファイルをプレビューします。 - ブラウザが開き、
index.htmlの内容が表示されます。 - 開発者ツール（F12キー）を開き、「コンソール」タブを確認します。
Hello, JavaScript!というメッセージが表示されていれば、環境設定は完了です。
HTMLの復習
HTMLの基本構造
HTML（HyperText Markup Language）は、ウェブページを作成するための基本的な言語です。HTMLはタグと呼ばれる特別なキーワードを使って、ウェブページの構造を定義します。皆様はHTMLについてはご存知であるという前提で、基本的なHTMLの構造について復習します。
HTML文書の基本構造
以下は、HTML文書の基本構造です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript入門</title>
</head>
<body>
<h1>JavaScript入門</h1>
<p>これはサンプルのHTMLページです。</p>
</body>
</html><!DOCTYPE html>: HTML5文書であることを宣言します。<html lang="ja">: 文書の言語を日本語に設定します。<head>: メタデータ（文字エンコーディング、タイトルなど）を含む部分です。<meta charset="UTF-8">: 文書の文字エンコーディングを指定します。<meta name="viewport" content="width=device-width, initial-scale=1.0">: ビューポートの設定を行い、レスポンシブデザインをサポートします。<title>: ウェブページのタイトルを設定します。<body>: 実際のコンテンツを含む部分です。<h1>: 見出し1を設定します。<p>: 段落を表します。
JavaScriptの主要ブラウザオブジェクト
JavaScriptのブラウザオブジェクトとは、ブラウザによって提供される組み込みオブジェクトで、ウェブページの表示や操作をサポートするためのものです。
windowオブジェクト
概要:
windowオブジェクトは、ブラウザウィンドウ全体を表し、ブラウザを操作するための機能を提供します。ブラウザオブジェクトの階層構造の最上位に位置しています。
特徴:
- ブラウザ全体の操作: 新しいウィンドウやタブを開く、タイマーの設定、ウィンドウのサイズ変更などの機能を持っています。
- グローバルオブジェクト: JavaScriptで宣言されたグローバル変数や関数はすべてWindowオブジェクトのプロパティとしてアクセスできます。
例:
// アラートダイアログを表示
window.alert("Hello World");
// 新しいウィンドウを開く
window.open("https://www.saycon.co.jp/touchtypeJS/");
// ウィンドウの高さを取得
let height = window.innerHeight;
window.alert(height);
documentオブジェクト
概要:
documentオブジェクトは、windowオブジェクトのプロパティの一つであり、現在のHTMLドキュメントの内容を保持しています。
このオブジェクトは、前述の通りDOM（Document Object Model）の一部であり、HTMLドキュメントを操作するためのインターフェースを提供します。DOMは、HTMLドキュメントの構造をツリー構造として表現し、その各要素にアクセスして操作するためのAPIを提供します。
特徴:
- HTML要素の操作: HTML要素を取得、変更、追加、削除するためのメソッドを提供します。
- イベントの処理: ユーザーの操作（クリック、キーボード入力など）に対するイベントハンドラを設定できます。
例:
// タイトルを変更
document.title = "new title";
// 特定のIDを持つ要素を取得
const element = document.querySelector("#example");
// 新しい段落を追加
const newParagraph = document.createElement("p");
newParagraph.textContent = "new paragraph";
document.body.appendChild(newParagraph);
DOM（Document Object Model）要素を選択するためのメソッド
querySelectorとquerySelectorAllは、JavaScriptでDOM（Document Object Model）要素を選択するためのメソッドです。これらのメソッドは、CSSセレクタを使用して要素を選択します。
querySelector
querySelectorは、指定されたCSSセレクタに一致する最初の要素を返します。見つからない場合はnullを返します。(sample)
使い方の例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>querySelectorの例</title>
</head>
<body>
<div class="example">最初のdiv</div>
<div class="example">2番目のdiv</div>
<script>
// 最初のdiv.exampleを選択
const firstDiv = document.querySelector('.example');
console.log(firstDiv.textContent); // "最初のdiv"が出力されます
</script>
</body>
</html>
querySelectorAll
querySelectorAllは、指定されたCSSセレクタに一致するすべての要素を返します。(sample)
返されるのはNodeListオブジェクトで、これには複数の要素が含まれます。NodeListは配列のように扱うことができますが、実際には配列ではありません。
使い方の例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>querySelectorAllの例</title>
</head>
<body>
<div class="example">最初のdiv</div>
<div class="example">2番目のdiv</div>
<div class="example">3番目のdiv</div>
<script>
// 全てのdiv.exampleを選択
const allDivs = document.querySelectorAll('.example');
allDivs.forEach((div, index) => {
console.log(`Div ${index + 1}: ${div.textContent}`);
});
</script>
</body>
</html>
<比較>
querySelector() | 最初に一致する要素を一つだけ返す。見つからない場合はnullを返す。 |
querySelectorAll() | 一致するすべての要素をNodeListとして返す。NodeListは配列のようにループ処理が可能。 |
CSSの復習
CSS（Cascading Style Sheets）は、HTML要素のスタイルを定義するための言語です。皆様は基本的なCSSについてはご存知であるという前提で、CSSの使い方について復習します。
CSSの書き方
CSSは、HTMLファイル内に直接記述する方法、<style>タグ内に記述する方法、外部スタイルシートとして記述する方法の3種類があります。ここでは、外部スタイルシートを使う方法を紹介します。
index.htmlファイルと同じフォルダにstyle.cssファイルを作成します。index.htmlファイルの<head>タグ内に、以下のようにリンクを追加します。（先に以下を記述してから、ファイル名をCtrlキーを押しながらクリックしてもファイルが作成できます）
<link rel="stylesheet" href="style.css">3. style.cssファイルに以下のスタイルを追加します。それぞれのスタイルの詳細はコメントを見て下さい。 (sample)
body {
font-family: Arial, sans-serif; /* フォントファミリーをArialとサンセリフに設定 */
line-height: 1.6; /* 行の高さを1.6に設定 */
margin: 0; /* ページ全体の余白をゼロに設定 */
padding: 20px; /* ページ全体に20ピクセルの内側余白を設定 */
background-color: #f4f4f4; /* 背景色を薄いグレーに設定 */
}
h1 {
color: #333; /* 見出し1の文字色を濃いグレーに設定 */
}
p {
color: #666; /* 段落の文字色を中間のグレーに設定 */
}
JavaScriptとの連携
HTMLとCSSを使って基本的なウェブページを作成したら、JavaScriptを使ってページに動的な機能を追加する方法を学びます。
JavaScriptの基本的な埋め込み方法
JavaScriptは、<script>タグを使ってHTMLファイルに埋め込むことも、外部JavaScriptファイルを使うこともできます。
外部JavaScriptファイルを複数のHTMLページで共有することで、同じスクリプトを再利用することができます。一度作成したスクリプトを複数のページで使用する場合、各ページに同じコードを記述する必要がなくなるのです。
- 既に作成した
script.jsファイルに、以下のようなコードを追加します。
document.addEventListener('DOMContentLoaded', function() {
const heading = document.querySelector('h1');
heading.textContent = 'JavaScriptで変更された見出し';
});上書き保存（Ctrl + s）をするとページが読み込まれた後にJavaScriptが実行され、<h1>タグのテキストが「JavaScriptで変更された見出し」に変更されます。
イベントハンドラ
イベントハンドラとは、ユーザーの操作やシステムの動作（イベント）が発生した際に実行される処理を制御する（ハンドラ）仕組みのことです。
HTML内で設定する場合、属性として記述され、特定のイベントに対して関数やコードを割り当てます。
例えば、onclick属性は、要素がクリックされたときに実行される関数を指定します。イベントハンドラは、ユーザーインターフェースを動的にし、インタラクティブな操作を実現するために不可欠です。
主なイベントには、クリック、キーボード入力、フォーム送信、ページ読み込みなどがあります。ユーザーのアクションに応じた反応をプログラムできます。
イベントハンドラ属性の中で、特に頻繁に使用される主要なものを以下に紹介します。
マウスイベント
onclick：要素がクリックされたときに実行されます。
<アウトプット例>
<ソースコード>
<button onclick="alert('ボタンがクリックされました')">クリック</button>onmouseover：マウスが要素の上に乗ったときに実行されます。
<アウトプット例>
<ソースコード>
<div onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''">
マウスオーバーで色が変わります
</div>キーボードイベント
onkeydown：キーが押されたときに実行されます。
<input type="text" onkeydown="console.log('キーが押されました')">onkeyup：キーが放されたときに実行されます。
<input type="text" onkeyup="console.log('キーが放されました')">フォームイベント
onsubmit：フォームが送信されたときに実行されます。
<アウトプット例>
<ソースコード>
<form onsubmit="alert('フォームが送信されました'); return false;"> <input type="submit" value="送信"> </form>onchange：入力フィールドの内容が変わったときに実行されます。
<アウトプット例>
<ソースコード>
<input type="text" onchange="console.log('入力が変更されました')">ウィンドウイベント
onload：ページが読み込まれたときに実行されます。
<body onload="alert('ページが読み込まれました')">onresize：ウィンドウのサイズが変更されたときに実行されます。
<body onresize="console.log('ウィンドウのサイズが変更されました')">JavaScriptの基礎
JavaScriptとは
JavaScriptは、ウェブページに動的な動作を追加するためのプログラミング言語です。クライアントサイドで実行されるため、ユーザーのブラウザ上で動作します。この章では、JavaScriptの基本的な構文と概念を学びます。
変数
変数は、データを保存した場所にニックネームを付けたものです。JavaScriptでは、let、const、varの3種類のキーワードを使って変数を宣言します。
変数の宣言と代入
let message = 'こんにちは、JavaScript!';
console.log(message);let：ブロックスコープの変数を宣言します。変数はその名の通り値を書き換えることができます。const：定数を宣言します。定数はその名の通り一度値を設定すると変更できません。var：関数スコープの変数を宣言します。古い書き方ですが、まだ使われることがあります。
const pi = 3.14;
let name = '松田';
console.log(pi);
console.log(name);データ型
JavaScriptにはいくつかのデータ型があります。主なデータ型は以下の通りです。
- 数値（Number）
- 文字列（String）
- 論理値（Boolean）
- 配列（Array）
- オブジェクト（Object）
nullとundefined
数値と文字列
let age = 30; // 数値
let greeting = 'こんにちは'; // 文字列
console.log(age);
console.log(greeting);論理値
let isStudent = true;
let isActive = false;
console.log(isStudent);
console.log演算子
JavaScriptの演算子を以下の表にまとめました。
| 演算子 | 説明 | 例 | 結果 |
|---|---|---|---|
+ | 足し算、文字列の連結、数値に変換する単項プラス演算子 | 5 + 3'Hello ' + 'World'+'123' | 8'Hello World'123 |
- | 引き算、数値に変換する単項マイナス演算子 | 5 - 3-'123' | 2-123 |
* | 掛け算 | 5 * 3 | 15 |
/ | 割り算 | 6 / 3 | 2 |
% | 剰余（余り） | 5 % 3 | 2 |
++ | インクリメント（値を1増やす） | let a = 5; a++ | a は 6 になる |
-- | デクリメント（値を1減らす） | let a = 5; a-- | a は 4 になる |
= | 代入 | let a = 5 | a は 5 になる |
+= | 加算代入 | let a = 5; a += 3 | a は 8 になる |
-= | 減算代入 | let a = 5; a -= 3 | a は 2 になる |
*= | 乗算代入 | let a = 5; a *= 3 | a は 15 になる |
/= | 除算代入 | let a = 6; a /= 3 | a は 2 になる |
== | 等価（型を比較しない） | 5 == '5' | true |
=== | 厳密等価（型も比較する） | 5 === '5' | false |
!= | 不等価（型を比較しない） | 5 != '5' | false |
!== | 厳密不等価（型も比較する） | 5 !== '5' | true |
< | より小さい | 5 < 3 | false |
<= | 以下 | 5 <= 5 | true |
> | より大きい | 5 > 3 | true |
>= | 以上 | 5 >= 5 | true |
&& | 論理積（AND） | true && false | false |
|| | 論理和（OR） | true || false | true |
! | 否定（NOT） | !true | false |
? : | 三項演算子（条件式） | true ? 'Yes' : 'No' | 'Yes' |
関数
関数は、一連の処理をまとめて部品化し、特定のタスクを実行するためのものです。関数を使うことで、コードの再利用性を高めることができます。
関数の基本構造
function 関数名(引数1, 引数2, ...) {
// 関数が実行されたときの命令
return 戻り値; // 任意。戻り値がない場合は省略可
}関数の定義と呼び出しの例
- 名前を受け取り挨拶を返す関数
function greet(name) {
return 'こんにちは、' + name + '!';
}
// 関数の呼び出し
let message = greet('松田');
console.log(message);- 二つの数値を加算する関数
// 二つの数値を加算する関数
function add(a, b) {
return a + b;
}
// 関数の呼び出し
let result = add(3, 5);
console.log(result); // 出力: 8
条件分岐
条件分岐を使うことで、特定の条件に応じた処理を実行することができます。if文やswitch文が一般的です。
if文
let age = 20;
if (age >= 18) {
console.log('成人です。');
} else {
console.log('未成年です。');
}if (条件) {...} else {...}：条件が真であれば、ifブロック内のコードが実行されます。そうでなければ、elseブロック内のコードが実行されます。
switch文
let day = 3;
let dayName;
switch (day) {
case 1:
dayName = '月曜日';
break;
case 2:
dayName = '火曜日';
break;
case 3:
dayName = '水曜日';
break;
default:
dayName = '不明';
}
console.log(dayName);switch (変数) {...}：変数の値に応じて異なるケースを実行します。
繰り返し
繰り返し処理を使うことで、同じ操作を複数回実行することができます。for文やwhile文が一般的です。
for文
for (let i = 0; i < 5; i++) {
console.log('繰り返し回数: ' + i);
}for (初期化; 条件; 更新) {...}：初期化ステートメントが1回実行され、条件が真である間、更新ステートメントが実行されるたびにループ内のコードが繰り返されます。
while文
let i = 0;
while (i < 5) {
console.log('繰り返し回数: ' + i);
i++;
}while (条件) {...}：条件が真である間、ループ内のコードが繰り返されます。
配列
配列は、複数のデータを一つの変数に格納するためのデータ構造です。配列の各要素には、インデックスを使ってアクセスできます。
インデックスは1からではなく、0から始まる点は初学者が間違いやすいところです。
配列の作成とアクセス
let fruits = ['りんご', 'バナナ', 'オレンジ'];
console.log(fruits[0]); // りんご
console.log(fruits[1]); // バナナ
console.log(fruits[2]); // オレンジ配列の操作
fruits.push('ぶどう'); // 配列に新しい要素を追加
console.log(fruits);
fruits.pop(); // 最後の要素を削除
console.log(fruits);実践・JavaScript
確認用メッセージを使う
JavaScriptでは、ユーザーに確認を求めるメッセージを表示することができます。これは、ユーザーが操作を継続するかどうかを確かめるのに使います。
alert() 関数
alert() 関数を使って、シンプルなメッセージを表示することができます。(sample)
alert('こんにちは、JavaScript!');このコードを実行すると、ポップアップウィンドウが表示され、メッセージが表示されます。
confirm() 関数
confirm() 関数を使って、ユーザーに確認を求めることができます。この関数は、ユーザーが「OK」または「キャンセル」をクリックしたかどうかを判定します。 (sample)
let result = confirm('本当にこの操作を行いますか?');
if (result) {
console.log('操作が確認されました。');
} else {
console.log('操作がキャンセルされました。');
}JavaScriptでスタイルを指定する方法
JavaScriptを使って、動的にHTML要素のスタイルを変更することができます。
ユーザーの操作や特定の条件に応じて、リアルタイムにWebページのデザインを変更することが可能です。
以下では、JavaScriptでスタイルを指定する基本的な方法を紹介します。
1. styleプロパティを使う
JavaScriptで特定の要素のスタイルを変更する最も直接的な方法は、要素のstyleプロパティを使用することです。
＜書式＞
要素.style.CSSのプロパティ名 ＝ 値;
例: 要素の背景色を変更する
以下の例では、ボタンをクリックすると、changeColor関数が呼び出され、div要素の背景色が変更されます。(sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptでスタイルを指定する例</title>
<style>
.example {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 20px;
}
</style>
</head>
<body>
<h1>JavaScriptでスタイルを変更する</h1>
<div class="example" id="myDiv">このボックスの色を変更します</div>
<button onclick="changeColor()">色を変える</button>
<script>
function changeColor() {
const div = document.getElementById('myDiv');
div.style.backgroundColor = 'lightgreen';
}
</script>
</body>
</html>
2. classListプロパティを使う
CSSクラスを追加・削除することで、より柔軟にスタイルを変更する方法もあります。classListプロパティを使用します。
例: CSSクラスを追加・削除する
以下の例では、ボタンをクリックすると、toggleClass関数が呼び出され、div要素にactiveクラスが追加され、再度クリックすると削除されます。 (sample)
皆さんはトグルスイッチというものを見たことがありますか？
上記リンクを辿るとお分かりのようにトグルスイッチは、一つの操作を行うことで、2つの状態（オン/オフ）を切り替えることができるものです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptでクラスを切り替える例</title>
<style>
.example {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 20px;
}
.active {
background-color: lightsalmon;
border: 2px solid orange;
}
</style>
</head>
<body>
<h1>JavaScriptでクラスを切り替える</h1>
<div class="example" id="myDiv">このボックスの色を変更します</div>
<button onclick="toggleClass()">クラスを切り替える</button>
<script>
function toggleClass() {
const div = document.getElementById('myDiv');
div.classList.toggle('active');
}
</script>
</body>
</html>3. setAttributeメソッドを使う
setAttributeメソッドを使って、スタイルをインラインで追加する方法もあります。
例: インラインスタイルを追加する
以下の例では、ボタンをクリックすると、addInlineStyle関数が呼び出され、div要素にインラインスタイルが追加されます。 (sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptでインラインスタイルを追加する例</title>
<style>
.example {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 20px;
}
</style>
</head>
<body>
<h1>JavaScriptでインラインスタイルを追加する</h1>
<div class="example" id="myDiv">このボックスの色を変更します</div>
<button onclick="addInlineStyle()">インラインスタイルを追加</button>
<script>
function addInlineStyle() {
const div = document.getElementById('myDiv');
div.setAttribute('style', 'background-color: lightcoral; border: 2px solid red;');
}
</script>
</body>
</html>
