NEW POST新着記事
【Section01】htmlファイルを作って、動かしてみよう2025年12月11日
HTMLの「実行環境」はブラウザだけでOK
まず最初に押さえておきたいのは、HTMLは「ブラウザがあれば動く」ということです。
特別なソフトをインストールしなくても、Chrome・Edge・Firefox など、ふだん使っているブラウザさえあれば、それがそのまま「HTMLの実行環境」になります。
むずかしく聞こえる「環境構築」も、入り口だけ見るならとてもシンプルで、
1.テキストファイルとしてHTMLを書く
2..html という名前で保存する
3.そのファイルをダブルクリックしてブラウザで開く
この3ステップができれば、いきなりWebページを「自作」していることになります。
Windowsでの一番ラクな始め方
次に、いちばん簡単な「具体的なやり方」を Windows 前提でまとめておきます。
まずは、メモ帳でも VS Code でも好きなエディタを開いて、最小限のHTMLを書きます。
中身は本当にシンプルでかまいません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>テスト</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>WindowsでHTMLを表示できました。</p>
</body>
</html>
書き終わったら、「名前を付けて保存」で index.html という名前にして保存します。
ここでポイントは2つです。
・文字コードを UTF-8 （）にすること
・拡張子が .html になっていること
Windowsでは、何も意識しないと index.txt のように「.txt」で保存されてしまうことがあります。
この場合、ダブルクリックしても「Webページ」ではなく「ただの文章」として扱われます。
もし index.html.txt のようになってしまっていたら、
1.エクスプローラーを開く
2.上の「表示」メニューから「ファイル名拡張子」にチェックを入れる
3.index.html.txt を index.html にリネームする
という流れで修正すれば大丈夫です。
あとは、その index.html をダブルクリックするだけでブラウザが開き、
自分が打ち込んだHTMLが「Webページ」として表示されます。
1つのHTMLファイルでどこまでできるか
HTMLファイルは、見た目はただのテキストですが、できることはかなり多いです。
1つの index.html の中に、
・見出しや本文などの文字
・画像の表示
・別ページへのリンク
・簡単な表（テーブル）
といった「ページの中身」はひと通り書けます。
さらに進んでいくと、
・styleタグの中に CSS を書いて、デザインを整える
・javascript>ファイルの中に JavaScript を書いて、簡単な動き（アニメーションなど）をつける
といったことも、同じファイルの中で完結させることができます。
最初の一歩では、まず 「HTMLファイルを書いてブラウザで開く」 というシンプルなサイクルを、身体になじませてしまうのがおすすめです。
