【環境構築】HTMLの開発環境

HTMLの開発環境を構築する方法を解説します。HTMLはテキストエディタとブラウザさえあればすぐに始められる、最も手軽な言語です。

必要なもの

HTMLの学習に必要なものは2つだけです。

必要なもの	説明
テキストエディタ	HTMLコードを記述するためのエディタです。メモ帳でも動作しますが、専用エディタはシンタックスハイライトやコード補完などの機能を備えており、開発で広く使われています。
ブラウザ	HTMLを表示するために使います。Chrome・Firefox・Edge など、お好みのブラウザで構いません。

HTMLファイルを作成してブラウザで開く

テキストエディタを開き、以下の内容を入力して『index.html』というファイル名で保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>Hello, Ayanami Rei!</h1>
  <p>HTMLの学習がここから始まります。</p>
</body>
</html>

保存したファイルをブラウザにドラッグ＆ドロップするか、ダブルクリックで開くと、ページが表示されます。

ファイルの書き方やコメントの記述方法については『.htmlファイルの作成とブラウザでの確認方法』を参照してください。

基本テンプレートの解説

上記のコードはHTMLの基本テンプレートです。各行の意味を以下の表で確認できます。

要素	説明
<!DOCTYPE html>	このファイルがHTML5であることをブラウザに伝えます。必ず1行目に記述します。
<html lang="ja">	HTML文書の最も外側の要素です。『lang』属性で言語を指定します。
<head>	ページの設定情報（文字コード・タイトルなど）を記述する領域です。画面には表示されません。
<meta charset="UTF-8">	文字コードをUTF-8に指定します。日本語を正しく表示するために必要です。
<title>	ブラウザのタブに表示されるページタイトルを指定します。
<body>	ページに表示される本文を記述する領域です。

テキストエディタ

HTML開発に便利なテキストエディタを紹介します。どれも無料で使えます（秀丸エディタのみシェアウェア）。

エディタ	特徴
VSCode	現在最も人気のあるエディタです。コード補完・エラー表示・拡張機能が豊富で、初心者から上級者まで幅広く使われています。Windows / macOS / Linux 対応。正式名は『Visual Studio Code』。
Sublime Text	軽量で動作が非常に速いエディタです。シンプルな画面でコーディングに集中できます。Windows / macOS / Linux 対応。
秀丸エディタ	1993年リリース、日本で長年愛されている国産テキストエディタです。動作が軽快でマクロ機能も搭載。Windows 専用・買い切り型。
Cursor	AI機能を搭載した最新のエディタです。Visual Studio Code をベースに、コード補完がさらに強力になっています。Windows / macOS / Linux 対応。

最近では『VSCode』が最も広く使われているらしいのですが、管理人はシンプルかつ軽快に動くエディタが大好物なので現在は『Sublime Text』を愛用しております。良ければ参考にしてやってください。

それと秀丸エディタについて補足をさせてください。秀丸エディタの初リリースは1993年、動作が軽快で正規表現による強力な検索・置換機能を備えており、更に『マクロ』を使って自分好みの設定にすることが可能な本当に素敵なエディタです。最近ですと『マクロ』は『アドオン』なんかが該当しますが、なんと1990年代からすでにその機能を実装していたという遙か先の未来を見越したような設計で、そういった面でも大変すばらしいエディタです。

実は管理人もWindows3.1からWindows7頃までずっと秀丸エディタを使ってプログラミングをしていたクチで、長年大変お世話になっています。そして開発者の斉藤秀夫さんは未だに秀丸エディタのアップデートを続けており、例えばWindows11、その他64Bit板のWindowsでも問題なく起動させることができます。秀丸エディタはこちらから購入でき、買い切り型で価格も4000円程度、WindowsOSに入れておくと色々と捗るので買っておいて損はないかなと思います。

(´-`).｡oO(管理人は昔からお世話になっている秀夫さんを応援したいので、個別にご紹介させて頂きました...)

(´-`).｡oO(しかし30年以上使っているのに支払った金額はたった4000円前後...これほどコスパの良いものが他に存在するのかというレベルですね...)

(´-`).｡oO(ではでは続きをどうぞ。環境構築作業、がんばってくださいませ...)

開発者ツールで確認する

ブラウザの開発者ツールを使うと、HTMLの構造をリアルタイムで確認・編集できます。

手順	操作
1	ブラウザでHTMLファイルを開きます。
2	『F12』キー（macOSは『Cmd + Option + I』）で開発者ツールを開きます。
3	『Elements』タブでHTML構造を確認できます。要素をクリックすると、画面上の対応する部分がハイライトされます。

Chromeの開発者ツール（DevTools）の画面

開発者ツールで行った変更は一時的なものです。ブラウザを再読み込みすると元に戻るため、安心して試すことができます。

よくあるミス1: ファイルを .txt で保存してしまう

Windowsのメモ帳などでHTMLを書いた場合、保存時に拡張子が自動的に『.txt』になることがあります。『.txt』ファイルはブラウザでソースコードとして表示されるだけで、HTMLとして解釈されません。保存時にファイル名を『index.html』のように拡張子まで含めて指定し、ファイルの種類を『すべてのファイル』にする必要があります。

NG: 拡張子が .txt になっている例

<!-- ファイル名: index.html.txt （NG） -->
<!-- ブラウザはHTMLとして解釈せず、ソースをそのまま表示する -->
<!DOCTYPE html>
<html lang="ja">
<body>
  <h1>Hello, Ayanami Rei!</h1>
</body>
</html>

OK: 拡張子が .html になっている例

<!-- ファイル名: index.html （OK） -->
<!DOCTYPE html>
<html lang="ja">
<body>
  <h1>Hello, Ayanami Rei!</h1>
</body>
</html>

よくあるミス2: 文字コードをUTF-8以外で保存して文字化けする

HTMLファイルで『<meta charset="UTF-8">』を指定していても、ファイル自体の保存時の文字コードがShift_JISやEUC-JPなどになっていると、日本語が文字化けします。テキストエディタでファイルを保存する際は、文字コードを『UTF-8』（BOMなし）に設定する必要があります。

NG: ファイルをShift_JISで保存してUTF-8と宣言している例

<!-- NG: metaでUTF-8を指定しているが、ファイル自体はShift_JIS -->
<meta charset="UTF-8">
<p>綾波レイ</p>
<!-- → ブラウザはUTF-8として解釈しようとするため文字化けする -->

OK: ファイルもUTF-8で保存している例

<!-- OK: metaの宣言とファイルの文字コードが一致している -->
<meta charset="UTF-8">
<p>綾波レイ</p>
<!-- → ブラウザがUTF-8として正しく解釈し、日本語が表示される -->

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典