もくじ
HTMLの基本レイアウトは「家」のようなもの
HTMLの書き方には「基本の形」があります。
それは、まるで家の設計図のように、ちゃんとした順番や決まりがあります。
まず、基本のレイアウトはこのようになります：
<!DOCTYPE html>
<html>
<head>
<!-- ページの情報を書くところ -->
</head>
<body>
<!-- ページに表示される内容を書くところ -->
</body>
</html>
この中で特に大事なのが、<head>と<body>です。
<head>ってなに？
<head>タグは、ページの「頭（あたま）」にあたる部分で、
画面には直接表示されないけど、大事な情報を書く場所です。
たとえば、こんなことを指定できます：
- ページのタイトル（ブラウザのタブに出る名前）
- 文字コード（日本語が正しく表示されるための設定）
- CSS（デザインのファイル）やJavaScript（動きのプログラム）の読み込み
- 検索エンジン向けの説明（SEO）
例：
<head>
<meta charset="UTF-8">
<title>わたしのホームページ</title>
</head>
このように書くと、タブのところに「わたしのホームページ」と表示され、
日本語もきちんと読み込まれます。
具体的に書くとこのぐらいの量になります。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="format-detection" content="telephone=no">
<title>サイトタイトル</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/main.js"></script>
</head>1行ずつ見ていきましょう！
① <meta charset="utf-8">
- 意味：文字コードの指定（日本語などを正しく表示するため）
- “utf-8″は世界中の文字を表示できる形式
- これがないと、日本語が文字化けすることがあります
② <meta name="viewport" content="width=device-width, initial-scale=1">
- 意味：スマホやタブレットでも見やすくするための設定（レスポンシブ対応）
width=device-width：画面の幅に合わせて表示initial-scale=1：最初のズーム倍率を1（そのまま）に
③ <meta name="keywords" content="">
- 意味：検索エンジンにこのページの「キーワード」を伝える
content=""の中に、たとえば"営業代行, 営業支援, CRAFT SALES"などのキーワードをカンマで区切って書く- SEO（検索対策）に使われることがありますが、最近はあまり重要視されません
④ <meta name="description" content="">
- 意味：ページの説明文
- 検索結果に出る「このページはどんな内容？」という要約に使われることが多い
- 例：
<meta name="description" content="HTMLを解説するサイトです。">
⑤ <meta name="format-detection" content="telephone=no">
- 意味：スマホで電話番号が自動的にリンクになるのを防ぐ
- 電話番号をクリック可能にしたくないときに使う設定
⑥ <title>サイトタイトル</title>
- 意味：ページのタイトル（タブや検索結果に表示される）
- この例では「サイトタイトル」と表示されます
- ページごとにわかりやすいタイトルをつけるのが大切
⑦ <link rel="shortcut icon" href="favicon.ico">
- 意味：ブラウザのタブに表示される小さなアイコン（ファビコン）を設定
"favicon.ico"はルートフォルダにあるアイコンファイルの名前
⑧<link rel="stylesheet" href="style.css">
- 意味：CSS（デザインのルール）ファイルを読み込む
style.cssというファイルを使って、ページの見た目（色・レイアウトなど）を整える
⑨ <script src="..."></script>
- 意味：JavaScriptファイルを読み込む
- JavaScriptは、ページに動きをつけたり、ユーザーの操作に反応したりするプログラムです
- この例では：
jquery-3.3.1.js：jQueryという便利なライブラリmain.js：このページ専用のJavaScriptコード
書き方を覚えるのではなく、だいたいの意味を把握するのが大事です。
他の書き方がありましたら意味だけでも知っておいてくださいね。
<body>ってなに？
― ホームページに表示される「見える部分」のすべて ―
HTMLでWebページを作るときに、絶対に出てくるのがこのタグ：
<body>
<!-- ここにいろいろ書きます -->
</body>
この<body>タグは、ホームページの「体（からだ）」にあたる部分です。
ここに書いた内容が、実際にパソコンやスマホの画面に表示される部分になります。
▼ headとbodyのちがいをカンタンに言うと…
<head>：ページの設定や見えない情報（ページの名前、検索対策、読み込むファイルなど）を書く場所<body>：ページに表示したいもの（見出し、文字、画像、リンクなど）を書く場所
▼ bodyの中に書く主なタグの例：
<body>
<h1>こんにちは！</h1> <!-- 見出し -->
<p>これは初めて作るHTMLページです。</p> <!-- 文章 -->
<img src="neko.jpg" alt="猫の写真"> <!-- 画像 -->
<a href="https://example.com">リンクはこちら</a> <!-- リンク -->
</body>
これらの内容は、実際にブラウザに表示されます。
つまり、<body>の中身が、私たちが画面で見る「ホームページの中身」そのものなんです。
▼ なぜ<body>が大切なの？
- 見てもらう情報はぜんぶここに書く
お知らせ、商品紹介、ブログの文章など、すべて<body>の中に書きます。 - 見た目のデザイン（CSS）や動き（JavaScript）は
bodyの中の要素に反映される
たとえば「この文字だけ赤くする」とか「ボタンを押したら画像が出る」なども、<body>内にある内容が対象になります。 - Webページのメイン部分として、HTMLの中で最も目立つパートです。
「ホームページを作る」とは、ほとんどの場合この<body>に情報を書いていくことなんです。
▼ <body>の注意ポイント：
<body>の中に「構造」を意識して書くと見やすくなります
→ 例：<header>、<main>、<footer>などでページのエリアを分ける
<body>タグの外に見えるコンテンツを直接書いてはいけません
→ 正しく表示されない原因になります
まとめ：headとbodyの役割をおさらい！
<head>：ページの情報を書く場所（見えないけど大切）<body>：画面に表示される内容を書く場所（ユーザーが見る部分）
この2つは、HTMLを書くうえでセットで必ず使うものなので、最初にしっかり覚えておきましょう！
