自作Web英単語カードの作り方（HTML/CSS/JS）— 初心者でも動く→公開まで

概要

自分でカスタマイズできる英単語カードは、生成AIを使えばすぐ作れます。このページでは「カードの仕組み」よりも、サイトとして形にする手順を重視してまとめます。

英単語カードのスクリーンショット — 作成した英単語カード（画像は差し替えOK）

生成AIはChatGPTを使用。無料版でも作れます。 Plusは速度と長文コードの安定感が上がるので、作業時間を短縮したい人向けです。

サイトの作り方（最小構成）

VS Codeの導入など、開発環境の設定は別ページにまとめてもOKです（リンク先は英数字推奨）。例：設定方法ページ

ステップ1：ファイルを作る

フォルダを作り、この2つを用意します。

english-cards.html
english-cards.css

ステップ2：まずブラウザで開いて表示確認

ファイルをダブルクリックで開いてOK。最初は動くこと最優先で進めます。見た目はあとで整えれば大丈夫です。

動くサンプル（コピペOK）

最小の動く例を載せます。下のコードを english-cards.html に貼ると、カードがクリックで日本語表示、自分でカードの追加ができる簡易システムです。

HTML（これ1枚で動く）

<main class="container">
  <h1>英単語カード</h1>

  <div class="card-grid" id="cardGrid"></div>

  <h2>カードを追加</h2>
  <form id="addForm">
    <input id="q" type="text" placeholder="表：English" required>
    <input id="a" type="text" placeholder="裏：Japanese" required>
    <button type="submit">追加</button>
  </form>
</main>

<style>
  .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}
  .wcard{border:1px solid #ddd;border-radius:14px;padding:14px;cursor:pointer;user-select:none}
  .wcard .front{font-weight:700;font-size:18px}
  .wcard .back{margin-top:8px;opacity:.85;display:none}
  .wcard.is-open .back{display:block}
  form{display:flex;gap:8px;flex-wrap:wrap}
  input{padding:10px;border:1px solid #ddd;border-radius:10px;min-width:220px}
  button{padding:10px 14px;border:1px solid #ddd;border-radius:10px;cursor:pointer}
</style>

<script>
  const cards = [
    {q:"apple", a:"りんご"},
    {q:"study", a:"勉強する"},
    {q:"important", a:"重要な"},
  ];

  const grid = document.getElementById("cardGrid");

  function render(){
    grid.innerHTML = "";
    cards.forEach((c, i) => {
      const el = document.createElement("div");
      el.className = "wcard";
      el.innerHTML = `<div class="front">${c.q}</div><div class="back">${c.a}</div>`;
      el.addEventListener("click", () => el.classList.toggle("is-open"));
      grid.appendChild(el);
    });
  }

  document.getElementById("addForm").addEventListener("submit", (e) => {
    e.preventDefault();
    const q = document.getElementById("q").value.trim();
    const a = document.getElementById("a").value.trim();
    if(!q || !a) return;
    cards.unshift({q, a});
    e.target.reset();
    render();
  });

  render();
</script>

サイトからサイトへのジャンプ（リンク）

同じフォルダにページを置けば、リンクで移動できます。例：

<a href="index.html">カタログに戻る</a>
<a href="english-cards.html">英単語カードを開く</a>

注意：ファイル名は 英数字＋ハイフン が安全です（スペースは避ける）。

公開（GitHub Pages最短）

GitHubで新規リポジトリ作成（例：english-cards）
index.html を置く（このカードページを index にしてもOK）
Settings → Pages → Branchを選んで保存
表示されたURLにアクセスして公開確認

※自前サーバー（FFFTP）で公開する場合も、やることは「ファイルを置く」だけなので同じです。

他のジャンルへの応用

英語 → 社会/理科の暗記カードに差し替え
単語数が増えるなら「JSON読み込み」や「CSV取り込み」に発展
スマホ向けにカードを1枚ずつ表示するUIに変更

Web英単語カード作成ノート

概要