進くんと学ぶ！ Webサイト制作講座

第1章：HTMLの基本骨格と準備

猪狩進 猪狩進
お疲れ様！ここからは実際にテキストエディタを使ってコードを書いていくよ。
まずはHTMLの「基本テンプレート」を覚えて、Webページの枠組みを整えよう！

1. 開発環境の準備

Webサイト制作を始めるには、テキストエディタとブラウザが必要です。

⚠️ ファイル保存時の大事なルール
  • 必ず「半角英小文字」で入力： 大文字や全角文字（ｉｎｄｅｘ．ｈｔｍｌ）、スペースが入ると、Webページが正しく表示されない原因になります。
  • ファイルの「拡張子」を確認： パソコンの設定で「ファイル名拡張子」を表示する設定にしておきましょう。（index.html.txt のようになってしまうのを防ぐためです）

2. HTMLの基本骨格

どんなに複雑なWebサイトでも、すべての基礎はこの「基本骨格」から始まります。

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>
    <p>Webサイト制作を始めよう！</p>
</body>
</html>

3. 各タグの役割

タグ名 読み方 進くんのワンポイント解説
<!DOCTYPE html> ドックタイプ宣言 「このファイルは最新のHTMLルールで書くよ！」というブラウザへの宣言だよ。
<html lang="ja"> エイチティーエムエル 全体の枠組みだよ。「lang="ja"」で日本語のページだと教えているんだ。
<head> ヘッド 「設定部屋」だよ。ページのタイトルや文字コードなど、画面に直接見えない設定を書くんだ。
<meta charset="UTF-8"> メタ・文字コード 文字化けを防ぐための設定だよ！Webでは「UTF-8」を使うのが標準なんだ。
<meta name="viewport" ...> メタ・ビューポート スマホやタブレットで見たときに、画面サイズをピッタリ最適化するためのおまじないだよ！
<title> タイトル ブラウザのタブや、検索結果のタイトルとして表示される名前を設定するよ。
<body> ボディ メインになる部分だよ！実際に画面に表示したい文章や画像は全部ここに入れるんだ。
💡 保存時の注意点

ファイルを保存する際、文字コードを「UTF-8」に設定しないと、ブラウザで文字化けが発生する原因になります。保存時は文字コード設定を必ず確認しましょう。

猪狩進 猪狩進
コードは丸暗記しなくて大丈夫！エディタにテンプレートとして保存しておけばいつでも呼び出せるよ。
準備ができたら、次は「見出し」や「段落」を使って文章を組み立てていこう！

お疲れ様！準備ができたら次の練習に進もう！

🎮 第2章「文章に背番号をつけよう」のゲームに挑戦！