HTML / CSS の学習を始める前に
更新日：2026-09-26
HTML / CSS の学習では、まず index.html というファイルを作るところから始めます。
最初から難しい環境構築は必要ありません。
まずは index.html だけを作り、ブラウザで表示できることを確認してみましょう。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
└── index.html
まずは index.html だけでOK
HTML は、Webページの土台になるファイルです。
最初は、以下のような index.html を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>ブラウザに表示されました。</p>
</body>
</html>
index.html を作成する
まずは、デスクトップなどわかりやすい場所にフォルダを作成しましょう。
例えば、
html-practice
というフォルダを作ります。
その中に、
index.html
という名前のファイルを作成してください。
ファイル名に注意
Windows の場合、拡張子が見えない設定になっていることがあります。
その状態で index.html を作ったつもりでも、
index.html.txt
になってしまうことがあります。
この場合、HTMLファイルとして動きません。
ファイル名が正しく index.html になっていることを確認してください。
拡張子を表示する設定にしておくのがおすすめです。
Windows では、設定によって .html や .txt などの拡張子が非表示になっていることがあります。
そのため、
index.html.txt
というファイルを作ってしまっても、
index.html
に見えてしまうことがあります。
エラーや混乱を減らすためにも、拡張子は表示する設定にしておくのがおすすめです。
ブラウザで表示してみる
作成した index.html は、特別なサーバーを用意しなくても確認できます。
ファイルをそのままブラウザにドラッグ＆ドロップしてください。
例えば、
- Google Chrome
- Microsoft Edge
- Firefox
などのブラウザに index.html を入れるだけで、画面に表示されます。
最初に確認すること
ブラウザに以下のように表示されればOKです。
はじめてのHTML- ブラウザに表示されました。
この段階では、まだ CSS や JavaScript は使いません。
まずは、
- HTMLファイルを作る
- ブラウザで開く
- 書いた内容が画面に表示される
という流れを確認することが大切です。
HTML はブラウザが読むファイル
HTML は、ブラウザが読み取って画面に表示するためのファイルです。
そのため、index.html をブラウザで開くと、HTML の内容が解釈されて表示されます。
例えば、
<h1>は大きな見出し<p>は文章の段落<title>はブラウザのタブに表示されるタイトル
として扱われます。
ソースコードを見ることもできる
HTML はブラウザ側で動く技術です。
そのため、ブラウザでは「ページの元になっているHTML」を見ることもできます。
ブラウザ上で右クリックして、
ページのソースを表示
のようなメニューを押すと、HTMLを見ることができます。
これは Web 開発の大きな特徴のひとつです。
まだ完璧に理解しなくてOK
最初からすべてのタグの意味を覚える必要はありません。
まずは、
「HTMLを書いたら、ブラウザに表示される」
という感覚をつかむことが大切です。
次のページから、少しずつタグの意味や CSS の使い方を学んでいきます。