Kura AI Lab

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

このページでは、作品の概要 / サイトの作り方 / サイト間ジャンプ / 他ジャンルへの応用を、はじめての人にも届く言葉でシンプルにまとめます。

目次

概要

自分でカスタマイズできる英単語カードは、生成AIを使えばすぐ作れます。ここではカードそのものの説明よりも、このサイトの作り方（HTML/CSS）をメインにまとめます。僕が実際にやった手順を短く記載します。

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

生成AIは ChatGPT を使用。無料版でも作れますが、Plus のほうが速度と安定感があります。

サイトの作り方

VS Code や Python の設定は別ページにまとめています。必要ならこちらへ → 【設定方法】

ここでは HTML と CSS の最小セットで進めます。コーディングは「自分で全部考えなくてOK」。まずは AI に土台を作ってもらい、自分の好みに寄せていくやり方がおすすめです。

ステップ1：HTML と CSS のファイルを作る

フォルダを作り、その中に以下の2つを用意します。

最初は CSS を使わない前提でOK。AIが出してくれたコードは、いったん HTML 側にだけ貼って動かします。

ステップ2：サイトの大枠を AI に作ってもらう

僕が投げた例：

あなたはWebクリエイターです。自分のゲームを紹介するサイトを作りたいです。書く内容は〇〇。
HTMLとCSSでテンプレートを書いてください。

返ってきたテンプレートをブラウザで表示して、まず動くことを確認します。そこから「色」「文字サイズ」「余白」などを自分好みに少しずつ直していきます。修正の頼み方は別ページにメモ → 【修正方法】

ステップ3：HTML と CSS を分ける

AIの指示どおり進めると、最初は <style> に CSS が入ったまま導出されがちです。保守と再利用のため、CSS は外部ファイルに分けます。

  1. HTML内の <style>...</style> の中身だけをコピー。
  2. それを .css ファイルに貼り付け。
  3. HTML側の <style>...</style> は削除。
  4. <head> の末尾に以下を追加：
    <link rel="stylesheet" href="ファイル名.css">

うまく反映しない時は、ファイル名と保存場所をまず確認。それで大体直ります。

サイトからサイトへのジャンプ処理

同じフォルダに 元のページ と 飛び先のページ を入れておけば、リンクで移動できます。やることはシンプルです。

  1. 同じフォルダに index.html と target.html を置く
  2. リンクを書くだけ：
    <a href="target.html" class="btn">飛ぶ</a>

言い方に迷ったら、AIに「このページからあのページに移動するリンクを書いて」と頼めばOK。
フォルダは VS Code 外で作っても中で作っても動作は同じです。

他のジャンルへの応用

今回の英単語カードの作り方は、将棋の解説ページなど他ジャンルにもそのまま流用できます。言語や中身が違っても、テンプレート→少しずつ自分の形にの流れは同じです。

応用アイデア：