【環境構築】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, HTML!</h1>
  <p>HTMLの学習を始めましょう。</p>
</body>
</html>

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

基本テンプレートの解説

上記のコードはHTMLの基本テンプレートです。各行の意味を確認しましょう。

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

おすすめのテキストエディタ

HTML開発に便利なテキストエディタを紹介します。どれも無料で使えます。

エディタ	特徴
Visual Studio Code	最も人気のあるエディタです。コード補完・エラー表示・拡張機能が豊富で、初心者から上級者まで幅広く使われています。Windows / macOS / Linux 対応。
Sublime Text	軽量で動作が速いエディタです。シンプルな画面でコーディングに集中できます。
Cursor	AI機能を搭載した最新のエディタです。Visual Studio Code をベースに、コード補完がさらに強力になっています。

特にこだわりがなければ『Visual Studio Code』がおすすめです。公式サイト（code.visualstudio.com）から無料でダウンロードできます。

開発者ツールで確認する

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

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

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

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

トップページへ