HTMLとJavaScriptでつくる初心者向けに丁寧に解説します
今回は、あるHTMLページのコードを使って「車の色を自由に変えられるアプリ」を作ってみます。このコードにはWeb制作の基礎がぎっしり詰まっています。新人エンジニアの方が学ぶのにぴったりな題材ですよ！
では、「どんな技術が使われていて、どこがポイントなのか？」一つずつやさしく見ていきましょう。
HTML＋CSS＋JavaScriptの役割とは？
まず全体像を整理しましょう。
| 技術 | 役割 | 例え |
|---|---|---|
| HTML | ページの骨組み（構造） | 家の設計図 |
| CSS | 見た目の装飾（デザイン） | 壁紙や家具の色や配置 |
| JavaScript | ユーザーの操作に応じた動き | スイッチや電気の制御 |
HTMLの重要ポイント
<head> セクションの役割
HTMLの最初の部分には次のようなタグが含まれています。
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
charset="UTF-8"：日本語などの文字を正しく表示するための設定です。viewport：スマホやタブレットでも正しく表示されるように、表示領域を調整します。
これらはほぼすべてのWebページで必須です！
外部ライブラリの読み込み
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
- Bootstrap：レイアウトや見た目を簡単に整えるCSSフレームワーク。
- Font Awesome：アイコンを表示するためのツール。
たとえば「パレット」や「スポイト」のアイコンはFont Awesomeのおかげです！
CSSの役割と大事なスタイル設定
リセットCSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
これはすべての要素のデフォルト余白（margin/padding）をリセットし、サイズ計算をわかりやすくします。
レイアウトを整えるflexbox
.row {
display: flex;
flex-wrap: wrap;
}
display: flex によって、ボックスが横に並びます。画面が狭くなると wrap によって折り返してくれるので、スマホでも見やすくなります。
レスポンシブ対応（メディアクエリ）
@media (max-width: 768px) {
.col {
flex: 100%;
}
}
画面幅が768ピクセル以下になったら、カラム（列）を縦並びに変更します。
JavaScriptで動きのあるアプリに！
イベントリスナーとDOM操作
colorBoxes.forEach(box => {
box.addEventListener('click', () => {
const color = box.getAttribute('data-color');
carBody.style.fill = color;
colorPreview.style.background = color;
});
});
querySelectorAll('.color-box')：すべての色付きボックスを取得addEventListener('click', ...)：クリックされたら処理を実行getAttribute('data-color')：HTMLの属性から色名を取得
つまり、赤いボックスをクリックすると、車の色とプレビューが赤に変わるという仕組みです！
カラーピッカーとリアルタイム反映
colorPicker.addEventListener('input', () => {
const color = colorPicker.value;
carBody.style.fill = color;
colorPreview.style.background = color;
});
ここでは <input type="color"> を使って、ユーザーが好きな色を選ぶことができます。
inputイベントは、色を変更した瞬間に発火します。carBody.style.fill = colorはSVGの色を直接変えてくれるんです！
SVGで描いた「車」の秘密
<svg id="carSVG" ...>
<rect id="carBody" ... fill="gray" />
</svg>
SVGとは「Scalable Vector Graphics」の略で、**ベクター画像（拡大してもキレイ）**です。
この中の fill="gray" をJavaScriptで動的に変えていくわけですね！
よくある質問とその答え
「data-colorって何ですか？」
HTMLの要素に独自のデータをもたせたいときに使う属性です。たとえば：
<div data-color="red"></div>
この"red"という情報をJavaScript側で読み取って使えるようになります。
今後の学習の指針
このコードを理解することで、以下の技術を一通り触れました。
| 技術 | 次に学びたいこと |
|---|---|
| HTML | フォーム、セクション、ARIAの活用 |
| CSS | Gridレイアウト、アニメーション |
| JavaScript | DOMの操作、イベントの詳細、関数定義 |
| SVG | パスの描画、アイコン作成 |
| UI設計 | ユーザビリティ、レスポンシブデザイン |
次のステップとしては、「JavaScriptの関数」や「イベント伝播」について学ぶことをおすすめします。
たとえば、ボタンを押すと別の画面が表示されたり、入力内容をチェックしてエラーを出すような処理などです。
以上。