HTML の準備をしよう

HTML を書くためには、まず「道具」を準備する必要があります。ここでは、HTML を書くために必要なエディタの準備と、実際にファイルを作ってブラウザで表示するまでの手順を説明します。

1. エディタを用意しよう

HTML を書くためには、テキストエディタが必要です。テキストエディタとは、その名の通り、テキスト（文字）を編集するためのソフトウェアのことです。

Windows に標準で入っている「メモ帳」でも HTML を書くことはできますが、プログラミング専用のエディタを使うことを強くおすすめします。なぜなら、プログラミング専用のエディタには、コーディングを効率化するための便利な機能がたくさん備わっているからです。

例えば、以下のような機能があります：

シンタックスハイライト：タグや属性などを色分けして表示し、コードを読みやすくしてくれる機能。
入力補完：タグや属性を途中まで入力すると、候補を表示してくれて、タイピングの手間を省いてくれる機能。
エラーチェック：コードの間違いを指摘してくれる機能。

これらの機能は、特に初心者のうちはとても役立ちます。コードの書き間違いによるエラーを減らし、効率よく学習を進めることができるからです。

エディタの設定（好みでOK！）

エディタをインストールしたら、まず最初にいくつかの設定をしておくと、より快適にコーディングができるようになります。

例えば、以下のような設定がおすすめです：

文字の大きさやフォント：自分が見やすいように調整しましょう。
タブのサイズ：インデント（字下げ）に使うスペースの数を設定します。スペース2つ、またはスペース4つが一般的です。
自動保存：ファイルを自動的に保存してくれる機能を有効にしておくと、万が一のときにも安心です。

これらの設定は、エディタの「設定」や「環境設定」メニューから変更できます。

2. ファイルを作ってみよう

エディタの準備ができたら、さっそく HTML ファイルを作ってみましょう。

まずは `index.html` から！

エディタを開き、「新規作成」や「New File」から新しいファイルを作成します。
ファイルに index.html という名前を付けて保存します。「名前を付けて保存」や「Save As」から保存できます。html の部分は拡張子と呼ばれ、そのファイルが HTML ファイルであることを示します。
この index.html が、あなたのウェブサイトのトップページになります。

フォルダ構成も意識しよう

ウェブサイトが大きくなってくると、ファイルやフォルダの数も増えてきます。そのため、最初からファイルを整理しておくことが重要です。

例えば、以下のようなフォルダ構成が一般的です：

my-website/  <-- ウェブサイトのルートフォルダ
├── index.html  <-- トップページ
├── css/  <-- CSS ファイルを格納するフォルダ
│   └── style.css  <-- スタイルシート
├── images/  <-- 画像ファイルを格納するフォルダ
│   ├── logo.png
│   └── hero.jpg
└── js/  <-- JavaScript ファイルを格納するフォルダ
    └── script.js

このように、関連するファイルをフォルダごとにまとめて管理することで、後でファイルを探したり、修正したりするのが楽になります。

3. ブラウザで確認してみよう！

HTML ファイルを作ったら、ブラウザで表示を確認してみましょう。

作ったファイルをブラウザで開く

index.html を保存したフォルダを開きます。
index.html ファイルをダブルクリック、または右クリックして「プログラムから開く」で、普段使っているウェブブラウザ（Chrome や Firefox など）を選択します。
ブラウザに何も表示されていない白い画面が表示されれば成功です！

開発者ツールって何？

ブラウザには、**開発者ツール（デベロッパーツール）**と呼ばれる、ウェブ開発に役立つ機能が備わっています。開発者ツールを使うと、HTML の構造を確認したり、CSS のスタイルを変更したり、エラーの原因を調べたりすることができます。

開発者ツールは、以下の方法で開くことができます：

Windows：F12 キー、または Ctrl + Shift + I キー
macOS：Command + Option + I キー
右クリック→「検証」または「要素を調査」

開発者ツールは、ウェブ開発には欠かせないツールです。今のうちに使い方に慣れておきましょう。