【第4話】画像を使ったWebアプリを作る─ HTML / CSS / JavaScript をそれぞれのタブで書く方法

今すぐつくるの章では、HTML・CSS・JavaScriptをひとつのソースにまとめて、すぐに動かせるアプリをご紹介してきました。

今回はミニコデの強みでもある「タブごとにコードを書く方法」を学びます。

HTML・CSS・JavaScriptをタブごとに分けて書けば、見やすいソースになります。

ということで、今回はソースを分けて書くことに加えて、もう一つの画像タブを使って「ボタンを押すと画像が切り替わるアプリ」を作ってみましょう。

＼ 今すぐタップ ／

画像を準備しよう

STEP

次の2つの画像をダウンロードしてください。

catcat.webp ダウンロード

dogdog.webp ダウンロード

STEP

ミニコデを開き、「画像」タブを選択。右上の📂マークをタップして、ダウンロードした2つの画像を選びます。

画像タブに「cat.png」「dog.png」が表示されればOKです。

登録した画像は img/cat.png のように呼び出せます。

HTMLタブに書く内容

まずは画面の骨組みを作ります。

<h1>画像を切り替えるアプリ</h1>
<button id="changeBtn">画像を切り替え</button>
<br>
<img id="photo" src="img/cat.webp" alt="画像">

<h1>で見出し（タイトル）、<button id ="changeBtn"> でボタンのidを決定します。

<img id="photo" src="img/cat.webp" alt ="画像">で画像のidと画像の保存先を設定しています。

これで土台は完成です。

ミニコデのプレビューでこんな感じに見えていればOKです。

CSSタブに書く内容

次に見た目を整えましょう。CSSはこちらです。

body {
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
  background: #f0f8ff;
}

h1 { color: #333; }

img {
  width: 250px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  margin-top: 16px;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #4caf50;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
button:hover { background: #45a049; }

CSSも少しだけ解説しておきます。

body {～}
ページ全体（bodyタグ部分）の文字の種類（サンセリフ体）、文字の配置（中央揃え）、ページの余白、背景色（淡い水色系）を指定しています。
※「グレー」ではなく「#f0f8ff（アリスブルー）」です。

h1 { color: #333; }
見出し（h1）の文字色を濃いグレーにしています。

img {～}
画像の横幅（250px）、角を丸める（border-radius）、影をつける（box-shadow）、画像と上の要素との余白（margin-top）を設定しています。
※「境界線幅」ではなく「角丸と影」です。

button {～}
ボタンの上下左右の余白（padding）、角丸、背景色（緑）、文字色（白）、文字サイズなどを指定し、クリックできる見た目にしています。

button:hover {～}
マウスを重ねたときに背景色を少し暗くし、押せそうに見せています。

こんな感じになればOKです。

JavaScriptタブに書く内容

最後に「動き」をつけます。

const btn   = document.getElementById("changeBtn");
const photo = document.getElementById("photo");

// 画像タブのファイルを dataURL を保持
const CAT = __asset("img/cat.webp");
const DOG = __asset("img/dog.webp");

// 初期値を dataURL にそろえる
photo.src = CAT;

btn.addEventListener("click", () => {
  photo.src = (photo.src === CAT) ? DOG : CAT;
});

何をしているのか、一つずつ説明してきます。

const btn = document.getElementById(“changeBtn”);
ページの中から「ボタン」を探して、btn という名前で使えるようにします。

const photo = document.getElementById(“photo”);
ページの中から「画像」を探して、photo という名前で使えるようにします。

const CAT = __asset(“img/cat.webp”);
const DOG = __asset(“img/dog.webp”);
ネコとイヌの画像をそれぞれ CAT と DOG に入れています。
__asset(...) はミニコデの特別な仕組みで、「画像フォルダから正しいURLを取ってくる」ために使います。

photo.src = CAT;
最初はネコの画像が出るようにしています。

btn.addEventListener(“click”, () => { … });
「ボタンがクリックされたとき」にやることを書いています。

ここでは、もし今の画像がネコならイヌに、イヌならネコに切り替えるようにしています。

まとめ

HTML・CSS・JavaScriptを別々のタブに書きつつ、画像ファイルも設定する方法をお伝えしました。

一つ一つのファイル役割が違うので、個別にコード書いた方が圧倒的に内容が分かりやすくなるし、AIにソースを出力してもらうときも、より大きなソースを頼むことができるようになります。

ちなみにミニコデ上でアプリが動作しているので分かりづらいかもしれませんが、実はこのタブ構造は実際のアプリのフォルダ構造を意識して作られています。

📁
∟index.html
∟style.css
∟main.js
∟📁img
　　∟cat.webp
　 ∟dog.webp

ミニコデからファイルをダウンロードするとわかりますが、実はこんな構造で動作しています。

フォルダ構造？何の話？

フォルダの話もそうですが、プログラムの文法に関しても「本気で開発」編でお伝えしたいと思いますので、ぼんやり理解してくれればいいと思います。

今回はここまで！

残念パパいのっちでした。

では、また。