メモ帳で HTML プログラムを実行するにはどうすればよいですか?

メモ帳でHTMLを実行する方法

メモ帳は、Windowsに標準搭載されているシンプルなテキストエディタです。HTMLファイルを作成し、Webブラウザで実行するために使用することができます。

HTMLファイルの作成

メモ帳を開きます。
以下のHTMLコードをコピーして、メモ帳に貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルHTMLページ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        header, footer {
            background-color: #f8f8f8;
            padding: 10px;
            text-align: center;
        }
        nav {
            margin: 20px 0;
            text-align: center;
        }
        nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #333;
        }
        .content {
            margin: 20px 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <header>
        <h1>私のウェブサイト</h1>
    </header>

    <nav>
        <a href="#home">ホーム</a>
        <a href="#about">私たちについて</a>
        <a href="#contact">お問い合わせ</a>
    </nav>

    <div class="content">
        <section id="home">
            <h2>ホーム</h2>
            <p>これはサンプルのホームページです。ここでは、基本的なHTML構造とスタイリングを紹介します。</p>
        </section>

        <section id="about">
            <h2>私たちについて</h2>
            <p>私たちはウェブ開発に関する様々な情報を提供するチームです。以下は、私たちの主なサービスの一覧です。</p>
            <ul>
                <li>ウェブサイトのデザイン</li>
                <li>フロントエンド開発</li>
                <li>バックエンド開発</li>
            </ul>
        </section>

        <section id="contact">
            <h2>お問い合わせ</h2>
            <p>お問い合わせは、以下のフォームをご利用ください。</p>
            <form action="#" method="post">
                <label for="name">名前：</label>
                <input type="text" id="name" name="name"><br><br>
                <label for="email">メールアドレス：</label>
                <input type="email" id="email" name="email"><br><br>
                <label for="message">メッセージ：</label><br>
                <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
                <input type="submit" value="送信">
            </form>
        </section>
    </div>

    <footer>
        <p>&copy; 2024 私のウェブサイト. 全著作権所有.</p>
    </footer>
</body>
</html>

「ファイル」メニューの「名前を付けて保存」をクリックします。
ファイルの種類を「すべてのファイル」に変更します。
ファイル名に「index.html」と入力し、「保存」をクリックします。

HTMLファイルの実行

作成した「index.html」ファイルを右クリックします。
「プログラムから開く」を選択し、お好みのWebブラウザ（例：Chrome、Firefox、Edgeなど）を選択します。
選択したWebブラウザが起動し、HTMLファイルの内容が表示されます。

おめでとうございます！メモ帳を使用してHTMLコードを正常に実行できました。

HTMLの基本要素

要素	説明
`<!DOCTYPE html>`	HTML文書のタイプを宣言します。
`<html>`	HTML文書のルート要素です。
`<head>`	HTML文書のヘッダー情報を定義します。
`<title>`	HTML文書のタイトルを定義します。
`<body>`	HTML文書の本文を定義します。
`<h1>`	見出しレベル1を定義します。

QA

Q: メモ帳以外にHTMLファイルを作成できるエディタはありますか？

A: はい、数多くのテキストエディタがあります。例として、Visual Studio Code、Sublime Text、Atomなどがあります。

Q: HTMLファイルを実行するために、Webサーバーは必要ですか？

A: いいえ、Webサーバーは必要ありません。HTMLファイルは、Webブラウザで直接開くことができます。

Q: HTMLとCSSの違いは何ですか？

A: HTMLはWebページの構造を定義するマークアップ言語であり、CSSはWebページのスタイル（見た目）を定義するスタイルシート言語です。