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の活用
CSSGridレイアウト、アニメーション
JavaScriptDOMの操作、イベントの詳細、関数定義
SVGパスの描画、アイコン作成
UI設計ユーザビリティ、レスポンシブデザイン

次のステップとしては、「JavaScriptの関数」や「イベント伝播」について学ぶことをおすすめします。

たとえば、ボタンを押すと別の画面が表示されたり、入力内容をチェックしてエラーを出すような処理などです。

以上。