HTML学習の準備とエディター設定

HTMLの学習を始める準備ですね！コードを書く前にエディターを整えることは、効率的かつ快適に学習を進める上で非常に重要です。

HTMLの準備とエディターのセットアップ

HTMLのコードを書き始める前に、以下の準備をすることをおすすめします。

1. エディターの選定とインストール

HTMLを書くためのエディターは、メモ帳のようなシンプルなものから、多機能なものまで様々です。最初は、コードの入力補助や色分け表示（シンタックスハイライト）機能があるものがおすすめです。

Visual Studio Code (VS Code): 最もおすすめです。無料で高機能、拡張機能が豊富で、HTMLだけでなくCSSやJavaScriptなど、Web開発全般で幅広く使われています。Windows、macOS、Linuxに対応しています。
Sublime Text: 軽量で高速なエディターです。有料ですが、試用期間は機能制限なく使えます。シンプルなデザインが好みの方におすすめです。
Atom: GitHubが開発したエディターで、カスタマイズ性が高いのが特徴です。VS Codeと同様に多くの拡張機能があります。

VS Codeのインストール手順の概要:

VS Codeの公式サイトにアクセスします。
お使いのOSに合ったインストーラーをダウンロードします。
ダウンロードしたファイルを実行し、指示に従ってインストールを進めます。

2. VS Codeの初期設定と拡張機能（VS Codeの場合）

VS Codeをインストールしたら、より快適にHTMLを記述するためにいくつかの設定や拡張機能を追加しましょう。

日本語化 (任意)

VS Codeを開き、左側のアクティビティバーにある「Extensions」（拡張機能）アイコンをクリックします。
検索バーに「Japanese Language Pack for Visual Studio Code」と入力し、インストールします。
インストール後、VS Codeを再起動すると日本語化されます。

必須の拡張機能

Prettier - Code formatter: コードを自動で整形してくれるツールです。インデントのズレや余分な空白などを修正し、常にきれいなコードを保てます。設定で「保存時にフォーマット」を有効にするのがおすすめです。
Live Server: これをインストールすると、HTMLファイルをブラウザでリアルタイムにプレビューできます。ファイルを保存するたびにブラウザを手動で更新する手間が省け、開発効率が格段に上がります。
- HTMLファイルを開いた状態で、右クリックして「Open with Live Server」を選択するか、VS Code右下の「Go Live」ボタンをクリックするとブラウザで表示されます。

その他の便利な拡張機能（慣れてきたら検討）

Auto Rename Tag: HTMLの開始タグを変更すると、対応する終了タグも自動的に変更してくれます。
indent-rainbow: インデント（字下げ）のレベルを色分けして表示してくれるため、構造の把握に役立ちます。

3. 作業用フォルダの準備

HTMLファイルを保存するための専用のフォルダを作成しておきましょう。デスクトップでもドキュメントでも構いませんが、整理しやすい場所に置くのが良いです。

例: C:\Users\YourName\Documents\web_projects\html_practice

このフォルダをVS Codeで開いて作業すると、ファイルの管理がしやすくなります。

VS Codeで「ファイル」>「フォルダーを開く」から作成したフォルダを選択します。

4. HTMLの基本構造の理解（少しだけ）

コードを書き始める前に、HTMLファイルの基本的な構造を頭に入れておくとスムーズです。

<!DOCTYPE html>  <!-- これがHTML5の文書であることを宣言 -->
<html lang="ja"> <!-- 言語設定（日本語） -->
<head>           <!-- ブラウザには表示されない情報（ページのタイトル、文字コードなど） -->
    <meta charset="UTF-8"> <!-- 文字コードをUTF-8に設定（文字化け防止） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- レスポンシブ対応 -->
    <title>私の初めてのHTMLページ</title> <!-- ブラウザのタブに表示されるタイトル -->
</head>
<body>           <!-- ブラウザに表示される内容 -->
    <h1>こんにちは、世界！</h1>
    <p>これは私の最初のHTMLページです。</p>
</body>
</html>

<!DOCTYPE html>: HTMLのバージョンを宣言します（HTML5）。
<html>: HTML文書全体のルート要素です。
<head>: ページのメタ情報（タイトル、文字コード、CSSの読み込みなど）を記述します。ブラウザには表示されません。
<body>: 実際にブラウザに表示されるコンテンツ（テキスト、画像、リンクなど）を記述します。

これらの準備が整えば、あとは実際にコードを書いてみて、Live Serverで表示を確認しながら試行錯誤するだけです。まずはシンプルな「Hello World」ページから始めてみましょう！

何か詰まったら、いつでも質問してくださいね。