1. はじめに
突然ですが、もしあなたがマイホームを建てるとしたら、どんな空間をつくりたいですか？
書斎や趣味の部屋、コレクションを並べるギャラリースペースなんかも素敵ですよね。
お風呂を3つ付ける、なんていうちょっとした贅沢も夢があります。
ちなみに私は、ミニシアターとちょっとしたバーのような空間が欲しいです。
……という話はさておき。
Webサイトも「ホームページ」と呼ばれるだけあって、家を建てることと少し似ています。
骨組みがあり、空間があり、そこに暮らしに必要なもの、つまりコンテンツを配置していきます。
建築技術を持っていない素人が、いきなり理想のマイホームを自力で建てるのは不可能なのと同じで、Webサイトもいきなり本格的なものを作ることはできません。
まず作れるのは、家というより“最低限の小屋”といったところではないでしょうか。
早くマイホームを建てたい気持ちもわかりますが、最低限の小屋の建て方すら知らない人に豪華なマイホームは建てられません。
なので、焦らず着実に進めていくのが大事です。
無人島に必要最小限のシェルターを建てるような感覚で、基本から始めていきましょう。
この記事では、小屋の骨組みに壁などを設置して「空間」を作り、その空間が何のためにあるのかを示す「室内ルール」などの書類をまとめる箱も設置していきます。
「HTMLってそもそも何？」
「その“骨組み”ってどうやって作るの？」
という方は、先に以下の記事をご覧いただくのがおすすめです。（どちらも無料ご覧いただけます）
2. HTMLの中身を書いていこう
2-1. 作ったHTMLファイルの開き方
前回の記事「Webサイトの基礎② HTMLを書いてみよう」では、
まず<!DOCTYPE html>を記述し、
続いて<html>タグでWebページの「外枠（骨組み）」を作り、
そしてそのHTMLファイルを「index.html」として保存するところまでをご紹介しました。
今回は、その続きから中身を追加していくために、まず前回保存したHTMLファイルを再びテキストエディタで開く方法を見ていきましょう。
前回、「index.html」という名前で、デスクトップやドキュメント、ダウンロードフォルダなど、わかりやすい場所に保存しているかと思います。
まずはそのファイルの場所を探してみてください。
■Windows（メモ帳）で開く方法：
1. エクスプローラーで index.html を保存した場所を開く
2. 該当ファイルを右クリック
3. 「プログラムから開く」→「メモ帳」を選択
※一覧にない場合は「別のアプリを選択」→「メモ帳」
⚠️ダブルクリックするとブラウザで開いてしまうので注意！
編集したいときは必ず「右クリック → メモ帳」で開きましょう。
■Mac（テキストエディット）で開く方法：
1. Finder で index.html を保存した場所を開く
2. 該当ファイルを右クリック（または control + クリック）
3. 「このアプリケーションで開く」→「テキストエディット」を選択
⚠️うまく表示されない場合は、テキストエディットの設定がリッチテキストモードになっているかもしれません。
テキストエディットがリッチテキストになっているときは以下の方法を試してみてください。
(1)テキストエディットメニューの「設定」→「新規書類」タブ→「標準テキスト」を選択
(2)一度設定を直したあとで、改めてファイルを開く
これで無事に、前回作成したHTMLファイルが再び編集できる状態になりました。
このあとからは、いよいよ中身を追加していくステップに進んでいきます！
2-2. <html> </html>の中に最初に追加するもの
開いたファイルには、以下の2行のコードが記述されているはずです。
<!DOCTYPE html>
<html></html>
この <html> タグは、Webページ全体を包む一番外側の箱──いわば“小屋の骨組み”のようなものでした。
今回は、この骨組みを「空間」にしていきましょう。
まずは空間そのものを作る前に、その空間で使う室内ルールや設計情報をまとめておくための「書類入れ」を用意します。
今はまだ骨組みがむき出しの状態なので、「まずは壁から作りたい！」という気持ちになるかもしれませんが……
そこはちょっと我慢して、まずは <html> </html>で作った骨組みに <head> </head>という「書類用の空箱」を設置しましょう。
コードで書くとこんな感じになります。
<!DOCTYPE html>
<html><head></head></html>
今後、この中に色々な情報を記載した書類を入れていくことになります。
書類の準備は大変なのでまた後日ということで、一旦空箱のまま置いておきましょう。
では、いよいよ骨組みの中に「空間」を作っていきます。
空間づくりには<body>タグを使用します。
先ほどと同じ要領で、<html> </html>の中に<body> </body>も置いてみましょう。
<!DOCTYPE html>
<html><head></head><body></body></html>
タグが多くなって少しややこしくなってきましたね。
でも、構造としてはとてもシンプルです。
ここで一度、家のたとえ話は頭の片隅に置いておいて、「開きタグは箱のフタ」、「閉じタグは箱の底」という話を思い出してみてください。
これをもとに、先程のHTMLタグの構造を「箱の入れ子」としてイメージしてみましょう。
<html><head></head><body></body></html>
<html> </html>という大きな箱の中に、
<head> </head> と
<body> </body> という2つの小さな箱が並んで入っている状態がこのコードです。
意外と難しくないでしょう？
……でもやっぱりこのコード、正直ちょっと見づらい気がします。
どれが開始タグで、どれが閉じタグなのかが分かりづらいですし、
どの箱の中に何が入っているのかもパッと見では判断しにくい感じがします。
なので、コードをもう少し見やすく整えてあげましょう。
2-3. 「改行」と「インデント」でコードを見やすくする
コードをもっと見やすくするために使えるのが、改行とインデント（字下げ）です。
たとえば、先ほどのコードをこんなふうに書き替えてみるとどうでしょうか？
<!DOCTYPE html>
<html><head></head><body></body></html>
↓
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
1行目に DOCTYPE 宣言があり、
2行目には <html> という「箱のフタ」が。
3行目と4行目に <head></head> と <body></body> の箱が並び、
最後に </html> という「箱の底」がある──
そんな構造が、目で見てわかりやすくなりましたよね。
こんな風に、マトリョーシカのように入れ子になった構造に合わせて改行し、スペース（インデント）を入れた書き方を用いることで、コードはぐっと見やすくなります。
実は、改行やインデントがあってもなくても、HTMLの表示結果にはまったく影響しません。
でも、インデントがあることでコードが見やすくなり、開始タグや閉じタグの付け忘れといったケアレスミスを減らすことができるのです。
これからHTMLを書くうえで、インデントはとても大事な“習慣”になりますので、今のうちからぜひ意識してみてくださいね。
ちなみに、インデントを入れるときは、行の先頭に「半角スペース2〜4個」または「Tabキー」で字下げするのが一般的です。
誤って全角スペースを入れてしまうと、上手く動かない原因になるため、必ず「半角スペース2〜4個」または「Tabキー」を使うように注意しましょう！
2-4. <head>タグの役割
では、コードも見やすく整ったところで、追加した <head> タグと <body> タグの話に戻りましょう。
まずは <head> タグの役割についてより詳しく見ていきます。
<head> タグは、家でたとえると、室内ルールや設計情報をまとめておくための「書類入れ」のようなものと説明しました。
実際のWebページにおいては、具体的にこんな情報が入っています。
・ページのタイトル（ブラウザのタブに表示されるもの）
・文字コード（文字化けを防ぐための設定）
・CSSファイルの読み込み
・SNSや検索エンジン（GoogleやYahoo!など）に向けた情報
などなど、「このページをどう扱えばいいか？」を、ブラウザに教えてあげるための内容です。
たとえば、Googleで「HTML」と検索したとき、以下のような情報が表示されます。
Google検索結果のスクリーンショット (c)Google
ページタイトル：「HyperText Markup Language」
説明文：「HTMLまたはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つで……」
このタイトルと説明文は、どちらも <head> タグの中に書かれている情報です。
実際にWebページ内に何かが表示されるわけではないけれど、Webページを正しく、便利に扱うためのとても大切な役割を担っているのが <head> タグというわけです。
2-5. <body>タグの役割
では続いて、<body>タグの役割について見ていきましょう。
<body>タグは、先述したとおり「家の空間」にあたる部分です。
<html>タグだけでは、骨組みだけがある“むき出し”の状態。
そこに<body>タグを追加することで、ようやく「空間」として成り立ちます。
そしてこの空間があるからこそ、さまざまな“中身”、つまりコンテンツを設置できるのです。
たとえば、Webサイトでよく見かける以下のようなコンテンツは、すべて<body>の中に記述されています。
・ページの見出しや文章
・画像
・ボタンやリンク
・表やリスト
・動画や地図 など
言い換えれば、Webページとして「目に見える内容」はすべてこの<body>タグの中にある、ということです。
2-6. ここまでの内容を上書き保存しよう
今回はこの辺で一区切りにしましょう。
ここまで記述した内容を忘れずに保存しておきましょう。
保存の方法は、前回の記事でもご紹介しましたが、
すでにファイル名や保存先を設定済みであれば、今回はもっと簡単に保存できます。
エディタソフト（メモ帳やテキストエディット）を開いた状態で、キーボードの以下のキーを押してみてください。
■Windows：Ctrl + S
■Mac：Command（⌘）+ S
このショートカットを押すだけで、現在開いているファイルに上書き保存されます。
コードを編集したあとには、こまめにこの操作をしておくと安心ですよ！
3. まとめ
今回の記事では、HTMLの基本構造を少しずつ組み立てながら、次のようなポイントを学びました。
・<html> はWebページ全体を包む「家の骨組み」
・<head> は「室内ルールや設計情報をまとめておくための書類入れ」
・<body> は「家の空間」＝中身を入れる場所
・改行とインデント（字下げ）を使うと、コードの構造が目で見てわかりやすくなる（ミス防止と読みやすさに効果的）
・書いた内容は必ず上書き保存（Ctrl+S または Command⌘+S）しておく
HTMLの「家」としての基本的な構造が、少しずつ形になってきましたね！
次回は、今回設置した <head>タグの中身の作り方をより詳しく見ていきます。
今回も最後までお読みいただき、ありがとうございました！
次回も、あなたのペースでゆっくり取り組んでみてください。
