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の関数」や「イベント伝播」について学ぶことをおすすめします。
たとえば、ボタンを押すと別の画面が表示されたり、入力内容をチェックしてエラーを出すような処理などです。
以上。