AI先生のロボットキャラクター
第1章 - セクション2

【環境構築】HTMLを書く準備をしよう

エディターとブラウザーを使って、実際にHTMLファイルを作成・表示する環境を整える

環境構築 エディター ブラウザー 基礎
女子生徒のアイコン

前回HTMLについて教えてもらったけど、実際にHTMLを書くには何が必要なの？特別なソフトとかいるのかな？

AI先生のアイコン

HTMLを書くのに特別高価なソフトは必要ないよ。実は、君のコンピューターにあるメモ帳でもHTMLは書けるんだ。でも、もっと書きやすくするためにテキストエディターとWebブラウザーを準備しよう！

男子生徒のアイコン

僕のパソコンにはChrome が入ってるけど、それでいいの？

AI先生のアイコン

Chromeは素晴らしい選択だよ！HTMLファイルを開くには、普段Webサイトを見ているブラウザーがあれば十分なんだ。

必要なものを整理しよう

HTMLを学習するために必要なのは、たった2つだけです：

1. Webブラウザー（HTMLファイルを表示する）

ブラウザー開発元特徴おすすめ度
ChromeGoogleデベロッパーツールが優秀⭐⭐⭐
FirefoxMozillaプライバシー重視⭐⭐
SafariAppleMacに標準搭載⭐⭐
EdgeMicrosoftWindowsに標準搭載⭐⭐

2. テキストエディター（HTMLファイルを編集する）

エディター開発元特徴価格おすすめ度
VS CodeMicrosoft無料で高機能、拡張機能豊富無料⭐⭐⭐
CursorCursorAI機能搭載、コード提案無料/有料⭐⭐⭐
AtomGitHubカスタマイズ性が高い無料⭐⭐
Sublime TextSublime HQ軽量で高速動作有料⭐⭐
メモ帳Microsoft最低限の機能のみ無料⭐

おすすめブラウザーのインストール

AI先生のアイコン

HTMLを学習するならChromeが一番おすすめかな。理由は「デベロッパーツール」という、HTML の構造を詳しく見ることができる機能が充実しているからなんだ。

Chromeのインストール手順

Google Chrome公式サイトのダウンロードページ
Chrome公式サイト
  1. Google Chrome公式サイトにアクセス
  2. 「Chromeをダウンロード」ボタンをクリック
  3. 自動的にお使いのOSに適したファイルがダウンロードされます

ダウンロード後のインストール手順

  • Mac
    1. .dmgファイルをダブルクリック
    2. ChromeアイコンをApplicationsフォルダーにドラッグ&ドロップ
  • Windows
    1. .exeファイルをダブルクリック
    2. 画面の指示に従ってインストール

インストール完了後、Chromeを起動してメイン画面が表示されれば成功です。

AI先生のアイコン

お使いのパソコン環境により画面表示は異なりますが、基本的な手順は同じです。分からないことがあれば、画面の指示に従って進めれば大丈夫ですよ。

女子生徒のアイコン

Chromeをインストールできた！次はテキストエディターを入れたいんだけど、どれがいいかな？

おすすめテキストエディターのインストール

AI先生のアイコン

テキストエディターはVS Codeを強くおすすめするよ。無料なのに、HTMLを書くのにとても便利な機能がたくさん入っているんだ。

VS Codeが初心者におすすめな理由

  • 完全無料 商用利用も無料
  • 見やすい色分け HTMLタグが色付きで表示される
  • 自動補完 タグ名を途中まで打つと候補が出る
  • エラー検出 間違ったHTMLを書くと教えてくれる
  • 拡張機能 便利な機能を後から追加できる

VS Codeのインストール手順

Visual Studio Code公式サイトのダウンロードページ
VS Code公式サイト
  1. VS Code公式サイトにアクセス
  2. 「Download for Mac/Windows」ボタンをクリック
  3. お使いのOSに適したファイルが自動的にダウンロードされます

ダウンロード後のインストール手順

  • Mac
    1. .zipファイルを解凍
    2. VS Codeアプリを「アプリケーション」フォルダーにドラッグ&ドロップ
  • Windows
    1. .exeファイルを実行
    2. セットアップウィザードに従ってインストール

インストール完了後、VS Codeを起動してメイン画面が表示されれば成功です。

男子生徒のアイコン

VS Code をインストールできた！でも英語で表示されてるから、ちょっと不安…。

AI先生のアイコン

大丈夫！VS Codeは日本語にも対応しているよ。簡単に日本語表示に変更できるから、一緒にやってみよう。

VS Codeを日本語化する（オプション）

VS Codeの日本語拡張機能インストール画面
VS Codeの別の日本語拡張機能画面
  1. 左サイドバーの「Extensions」（四角いアイコン）をクリック
  2. 検索欄に「Japanese」と入力
  3. 「Japanese Language Pack for Visual Studio Code」を選択
  4. 「Install」ボタンをクリック
  5. 「Restart Now」をクリックして再起動

これでVS Codeが日本語表示になります。

💡 ポイント
  • 日本語化は必須ではありませんが、より使いやすくなります
  • 拡張機能インストール後は再起動が必要です

HTMLファイルを作ってみよう！

AI先生のアイコン

環境が整ったところで、早速最初のHTMLファイルを作ってみよう！「Hello, World!」というシンプルなページを作成して、ブラウザーで表示してみるよ。

ステップ1: VS Codeでフォルダーを開く

VS Codeでフォルダーを開く画面

VS Codeを起動したら、まず作業用フォルダーを開きます。

  1. 左サイドバーの「エクスプローラー」アイコンをクリックします。
  2. 「エクスプローラー」にある「フォルダーを開く」ボタンをクリックします

ステップ2: フォルダの作成

フォルダー作成ダイアログ画面

フォルダー選択ダイアログが開いたら、新しいフォルダーを作成します。

  1. ダイアログ内で「新規フォルダ」ボタンをクリックします
  2. 新規フォルダー作成ダイアログが表示されます

ステップ3: フォルダー名を入力

フォルダー名入力画面
フォルダー名入力画面

作業用フォルダーの名前を入力します。

  1. フォルダー名として「html-practice」と入力します
  2. 「作成」ボタンをクリックしてフォルダーを作成します
  3. 作成したフォルダーを選択して「開く」をクリックします

ステップ4: 作成者を信頼する

作成者を信頼する確認画面

フォルダーを開く際に、セキュリティ確認ダイアログが表示されます。

  1. 「はい、作成者を信頼します」ボタンをクリックします
  2. これで安全にフォルダーを開くことができます

ステップ5: 新しいファイルを作成

VS Codeで新しいファイル作成画面
ファイル名入力画面

フォルダーが開けたら、いよいよHTMLファイルを作成しましょう。

  1. 左サイドバーのエクスプローラーに表示されている「HTML-PRACTICE」のエリアにマウスを移動します。
  2. アイコンがいくつか表示されるので赤枠の「新しいファイル」を選択します
  3. ファイル名を「index.html」と入力してEnterキーを押します
  4. これで最初のHTMLファイルが作成されました
💡 ポイント
  • ファイル名は「index.html」として保存します
  • HTMLファイルは拡張子が「.html」である必要があります
女子生徒のアイコン

「index.html」っていうファイル名、なんでそんな名前なの？

AI先生のアイコン

「index.html」という名前にすることで、フォルダ内で一番最初に表示されるHTMLファイルとして認識されるんだ。

これにより、URLにフォルダーのアドレス（例: 「ドメイン」/html-practice/）を指定しただけで自動的にこの「index.html」が表示されるようになるんだよ。覚えておこう！

ステップ6: HTMLコードを書いてみる

VS Codeで「index.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>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>これは私が作った最初のHTMLページです。</p>
    <p>HTMLを学ぶのって楽しいですね！</p>
</body>
</html>
VS CodeでHTMLコードを編集している画面

上記のコードを画像のようにindex.htmlにそのままコピー&ペーストするか手入力してください。

VS Codeでは、HTMLタグが色分けされて表示されるので、間違いを見つけやすくなります。

💡 ポイント
  • コードは正確に入力してください。タグの開始と終了を忘れずに
  • VS Codeの自動補完機能を活用すると入力が楽になります
男子生徒のアイコン

なんだか複雑なコードがたくさんあるね。でも、<h1>や<p>は前回習ったタグだ！

AI先生のアイコン

その通り！今は全部理解しなくて大丈夫。大切なのは実際にファイルを作って、ブラウザーで表示することだからね。詳しい説明は次のレッスンで行うよ。

ステップ7: ファイルを保存する

VS Codeでファイルを保存する画面

エクスプローラーでindex.htmlを選択し、右クリックで「保存」を選ぶか、以下の方法で保存します。

  • Ctrl+S（Windows）またはCmd+S（Mac）を押す
  • 「File」→「Save」をクリック

VS Codeの画面で、ファイル名の横の白い丸（未保存マーク）が消えれば保存完了です。

VS Codeの自動保存設定画面

自動保存の設定（オプション）

「ファイル」→「自動保存」を選択すると、ファイルを編集した時点で自動的に保存されます。

これにより、手動で保存する手間が省けます。

ステップ8: VS CodeからFinderでファイルを表示する

VS CodeからFinderでファイルを表示する画面
Finderでindex.htmlファイルを選択している画面

HTMLファイルをブラウザーで開くために、まずファイルの場所をFinderで確認しましょう。

  1. VS Codeでindex.htmlファイルを右クリックします
  2. 「Finderで表示」をクリックします
  3. Finderでhtml-practiceフォルダーが開き、index.htmlファイルが表示されます
  4. Finderでindex.htmlファイルをクリックして選択します

ステップ9: ブラウザーで表示してみる

いよいよ作成したHTMLファイルをブラウザーで表示してみましょう！

ChromeブラウザーでHTMLファイルが表示された画面
  1. Finderで「index.html」ファイルをダブルクリック
  2. 自動的にブラウザーが開いて、ページが表示される

成功すると、画面のように「Hello, World!」というタイトルと説明文が表示されます。

💡 ポイント
  • ファイルがブラウザーで開かない場合は、右クリック→「このアプリケーションで開く」→「Chrome」を選択
  • 表示内容が更新されない場合は、F5キーでページを更新してください
女子生徒のアイコン

わあ！本当にWebページができた！「Hello, World!」って大きく表示されて、その下に文章も出てる！

AI先生のアイコン

素晴らしい！君は今、HTMLファイルの作成からブラウザー表示まで、Webページ制作の基本的な流れを完全にマスターしたんだ。これは本当に大きな一歩だよ！

HTMLに便利な拡張機能

おすすめ拡張機能

VS Codeの拡張機能を使うことで、HTML開発をより快適に進めることができます。

1. Live Preview

  • 機能: HTMLファイルをVS Code内でリアルタイムプレビュー
  • メリット:ブラウザーとの切り替えが不要、コードを変更すると即座に反映
  • リンク: Live Preview - Visual Studio Marketplace

2. Auto Rename Tag

3. Indent Rainbow

AI先生のアイコン

これらの拡張機能を使うと、HTMLを書くのがもっと楽しく、効率的になるよ。

リンクをクリックして「Install」をクリック、またはアクティビティバーの「拡張機能」アイコンをクリックして上記の名前で検索すると簡単にインストールできるから、ぜひ試してみてね。

ファイル管理のベストプラクティス

おすすめのフォルダー構成

HTMLプロジェクトを作る時は、以下のようなフォルダー構成がおすすめです：

my-folder/
├── index.html          # メインページ
├── about.html          # 自己紹介ページ
├── contact.html        # お問い合わせページ
├── images/             # 画像フォルダー
│   ├── logo.png
│   └── photo.jpg
├── css/               # CSSファイル（後で学習）
│   └── style.css
└── js/                # JavaScriptファイル（後で学習）
    └── script.js

ファイル名の付け方：

  • 良い例: index.html, about.html, contact-form.html
  • 避けるべき例: ページ1.html（日本語）, my page.html（スペース）, MyPage.HTML（大文字）

ファイル名は英語の小文字で、単語の区切りにはハイフン（-）を使うのがWeb制作の一般的なルールです。

まとめ

女子生徒のアイコン

これで私もHTMLが書ける環境ができた！実際にWebページが表示された時は、すごく感動したよ。

男子生徒のアイコン

僕も！自分でWebページを作れるなんて、なんだかプログラマーみたいな気分になったよ。

AI先生のアイコン

それはよかった！この環境さえあれば、これからどんどん素敵なWebページを作ることができるよ。次回は、今回書いたHTMLコードの意味を詳しく解説していくからね。

HTML環境構築のポイント
  • 必要なツール ChromeブラウザーとVS Codeエディターの2つだけ
  • ファイル作成 HTMLファイルは拡張子「.html」で保存する
  • 命名規則 英語の小文字とハイフンを使った分かりやすい名前
  • プレビュー方法 HTMLファイルをダブルクリックしてブラウザーで表示
  • 便利機能 VS Codeの拡張機能でより快適な開発環境に

次回は、今回作成したHTMLコードの構造と意味を詳しく学んでいきます。HTMLの基本的な文書構造を理解することで、より本格的なWebページ作成への第一歩を踏み出しましょう！

学習チェック

このレッスンを理解できたら「完了」をクリックしてください。
後で見直したい場合は「未完了に戻す」で進捗をリセットできます。

前のレッスン
1.1 HTMLって何？Webページの基本を知ろう
noteで応援
次のレッスン
1.3 HTML文書の構造

レッスン完了！🎉

お疲れさまでした！