生成 AI Gemini 使用例の紹介: ローカル環境でWebページを作成し、Webブラウザでテストする方法

2025年6月8日日曜日

ローカル環境でWebページを作成し、Webブラウザでテストする方法

はい、Windows 11 とメモ帳、そしてネットワーク環境があれば、サーバーサイドの開発ソフトを使わずに、ローカル環境でWebページを作成し、Webブラウザでテストできるというのはその通りです。これはWeb制作の最も基本的な出発点であり、非常に重要な概念です。

このことについて、具体的にどのように行えるのか、そのメリット・デメリット、注意点を含めて解説します。

Windows 11 とメモ帳でローカルWebページを作成・テストする方法

1. Webページの作成（HTMLファイルの作成）

メモ帳を開く:
Windows 11 のスタートメニューから「メモ帳」を検索して開きます。

HTMLコードを記述する:

メモ帳に、Webページの基本的な構造であるHTML（HyperText Markup Language）のコードを記述します。

以下は、ごくシンプルなHTMLの例です。これをコピーしてメモ帳に貼り付けてみてください。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私の初めてのWebページ</title>
    <style>
        /* ここにCSSを書くこともできます */
        body {
            font-family: sans-serif;
            background-color: #f0f0f0;
            color: #333;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これはメモ帳で作成した私の初めてのWebページです。</p>
    <p>ローカル環境でテストしています。</p>
    <img src="https://via.placeholder.com/150" alt="サンプル画像">
    <br>
    <a href="https://www.google.com" target="_blank">Googleへ</a>
</body>
</html>

ファイルを保存する:
- メモ帳の「ファイル」メニューから「名前を付けて保存」を選択します。
- 保存場所はどこでも構いませんが、デスクトップなど分かりやすい場所が良いでしょう。
- 重要: 「ファイル名」を index.html や mypage.html のように、必ず .html または .htm という拡張子を付けて保存します。
- 「文字コード」は通常「UTF-8」を選択します。
- 「ファイルの種類」は「すべてのファイル」を選択します。

2. Webブラウザでのテスト

保存したHTMLファイルを探す:
デスクトップなどに保存した index.html（またはあなたが付けたファイル名）を見つけます。
ブラウザで開く:
- そのHTMLファイルをダブルクリックします。
- 通常、お使いのデフォルトのWebブラウザ（Microsoft Edge、Google Chrome、Firefoxなど）で開かれます。
- または、ブラウザを先に開いておき、ファイルメニューから「ファイルを開く」（または Ctrl+O）を選択し、保存したHTMLファイルを選択して開くこともできます。
表示の確認:
ブラウザに、メモ帳で記述したHTMLの内容が表示されます。
- 画像（上記の例ではプレースホルダー画像）が表示されるか、リンクが機能するかなどを確認します。
- メモ帳でHTMLコードを修正し、保存し直してからブラウザを**再読み込み（F5キーなど）**すると、変更が反映されます。

この方法で可能なこと・メリット

HTMLとCSSの学習: Webページの基本的な構造（HTML）と見た目の装飾（CSS）を、実際に手を動かしながら学ぶことができます。
プログラミング不要: サーバーサイドの言語（PHP, Python, Node.jsなど）やデータベースの知識が一切不要で、Webページの骨格を作成・表示できます。
手軽に始められる: Windows 11に標準搭載されているメモ帳とWebブラウザだけで完結するため、特別なソフトウェアのインストールが不要です。
ローカル環境での確認: インターネットに公開する前に、自分のPC上で表示や動作を確認できます。表示の崩れや誤字脱字などを公開前に修正できます。
費用がかからない: ドメイン取得やレンタルサーバーの契約など、公開にかかる費用が一切発生しません。

この方法でできないこと・注意点

静的なページのみ: HTMLとCSSだけで構成される「静的なWebページ」しか作成できません。
- ユーザーからの入力値を受け取って処理するお問い合わせフォーム
- ログイン機能や会員登録機能
- データベースから情報を取得して表示するブログ記事一覧
- 動的に内容が変化するコンテンツこれらを実現するためには、サーバーサイドの言語やデータベース、JavaScript（クライアントサイドの動的な処理）が必要になります。
インターネットへの公開はできない:
この方法で作成したWebページは、あなたのPCの中だけに存在します。他の人がインターネット経由でアクセスすることはできません。公開するためには、レンタルサーバーにファイルをアップロードし、ドメインを設定する必要があります。
機能の限界:
- JavaScript（クライアントサイドスクリプト）を記述して、ボタンクリックでメッセージを出す、画像をスライドさせるなどの軽い動的な処理は組み込めます。
- しかし、PHPなどのサーバーサイド言語が必要な動的なデータのやり取りや、複雑なアプリケーションの構築はできません。
開発効率:
メモ帳はシンプルなテキストエディタであり、HTMLやCSSの記述を効率化する機能（コードの自動補完、エラーチェック、構文ハイライトなど）はありません。本格的な開発には、Visual Studio Codeなどの高機能なテキストエディタやIDE（統合開発環境）が推奨されます。
ネットワークの必要性:
「ネットワークがあれば」とありますが、これはもし画像ファイルをオンライン上から読み込む場合（例：https://via.placeholder.com/150 のような外部URLの画像）や、外部のCSS/JavaScriptライブラリ（例：Bootstrap, jQueryのCDN版）を利用する場合に必要になります。純粋にローカルに保存した画像やCSSファイルだけを使うのであれば、インターネット接続は必須ではありません。

まとめ

Windows 11 のメモ帳とブラウザを使ったローカルWebページ作成は、Web制作の第一歩として非常に有効です。HTMLとCSSの基本を学ぶには最適な環境と言えるでしょう。

「まずは自分のPCでWebページを作ってみたい」「HTMLやCSSってどんなものか試してみたい」という方にとっては、手軽に始められる素晴らしい方法です。ここから始めて、Webの仕組みを理解し、さらに高度な技術へとステップアップしていくことができます。

生成 AI Gemini 使用例の紹介