HTMLを書いてみよう・前編

ホームページを作るときにはHTMLとCSSの2つが欠かせません。
今回の記事では、HTMLの基本的な書き方について解説します。

基本の形

<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

見慣れない文字や記号がたくさん出てきました。
この時点ですでに拒否反応を起こしている方もいるかもしれません。

<と>の記号を消してみる

!doctype html
head
meta charset="utf-8"
title /title
meta name="description" content=""
/head
body
h1 /h1
p /p
/body
/html

意味は分からないままですが、さっきよりはシンプルになりました。
よく見るとほとんどの場合「/」とペアになっています。

日本語に訳してみる

!文書の種類 html
頭
情報を加える 文字コードの種類 = "utf-8"
題名 /題名
情報を加える 名前 = "説明文" 内容 = ""
/頭
体
見出し1 /見出し1
段落 /段落
/体
/html

英語の部分をできる限り日本語にしてみました。
何となく意味が分かってきたような気もします(気のせい?)

見た目を整えてみる

!文書の種類 html
頭
  情報を加える 文字コードの種類 = "utf-8"
  題名 /題名
  情報を加える 名前 = "説明文" 内容 = ""
/頭

体
  見出し1 /見出し1
  段落 /段落
/体
/html

ここで改めて最初のものと見比べてみます。

<!doctype html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>

<body>
  <h1></h1>
  <p></p>
</body>
</html>

ここまでの気付きとしては、

  • 全て「<」で始まり「>」で終わっている
  • <>はたいていペアになっている
  • 後ろの<>内は「/」から始まっている
  • 頭と体に分けられている(headとbodyのこと)

といったところでしょうか。

実際に書いてみよう

書くときはメモ帳を使います。

いよいよ実践

まずは、これから書く文書の種類はHTMLですよとパソコンに伝えます。

<!doctype html>

次に、頭の部分を書きます。

<head>

次に頭の中身を入れます。
必須ではありませんが、最初に半角スペースを2回入れると読みやすくなります。

<meta charset="utf-8">
<title></title>
<meta name="description" content="">

そして、頭の部分はここまでですよと伝えます。

</head>

ここまでをまとめると、

<!doctype html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>

次に体を加えます。

<body>

そして体の部位です。

<h1></h1>
<p></p>

体はここまでですよと伝えます。

</body>

ここまでをまとめると、

<!doctype html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>
<body>
  <h1></h1>
  <p></p>
</body>

最後に、HTMLはここまでですよと伝えます。

</html>

完成形

<!doctype html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>

<body>
  <h1></h1>
  <p></p>
</body>
</html>

名前を付けて保存する

index.htmlという名前でデスクトップに保存しましょう。

・デスクトップを選ぶ
・ファイル名をindex.htmlと入力
・ファイルの種類をすべてのファイルに変更
・文字コードをUTF-8に変更
・保存をクリック

名前を付けるときは必ず半角英数字 + .htmlとします。記号はハイフンとアンダーバーのみ使用できます(注:-と_)

良い例

  • index.html
  • toppage_2.html
  • mihon-desu.html

悪い例

  • インデックス.html(理由:日本語が含まれている)
  • toppage_2.html(理由:.htmlの部分が全角になっている)
  • 見本〜です。.html(理由:日本語&使えない記号が含まれている)

実際に表示してみよう

それでは早速デスクトップに保存したHTMLファイルを開いてみましょう。
ダブルクリックするとインターネットの画面が開くはずです。

■もし開かない場合は

・index.htmlの上で右クリック
・プログラムから開くをクリック
・インターネットエクスプローラーまたはエッジをクリック

が、開いたものの全く何も表示されていません。
予想ではこのようになるはずでした。

これは一体どうしてなのでしょう?

HTMLは影に隠れている

実は、HTMLは滅多に姿を表すことがありません。
それは目隠し機能によるものです。目隠し機能がオンになるのは、「<」と「>」で挟まれた時です。ちなみに、この「<」と「>」で挟まれた部分のことをタグといいます。

ここで改めて先ほど書いたHTMLを見てみましょう。

<!doctype html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>

<body>
  <h1></h1>
  <p></p>
</body>
</html>

では目隠しされている部分(タグ)に色を付けてみます。

<!doctype html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>

<body>
  <h1></h1>
  <p></p>
</body>
</html>

つまり、先ほど書いたものは全て目隠しされていたというわけです。

逆に言えば、「<」と「>」の外側に書いたものは目隠しされないということです。
では外側だと思われる部分に全て「●●」という目印を付けてみます。

●●<!doctype html>●●
●●<head>●●
  ●●<meta charset="utf-8">●●
  ●●<title>●●</title>●●
  ●●<meta name="description" content="">●●
●●</head>●●

●●<body>●●
  ●●<h1>●●</h1>●●
  ●●<p>●●</p>●●
●●</body>●●
●●</html>●●

どこに書いてもいいの?

ふとこんな疑問が浮かんだ方もいるかもしれません。
実は、HTMLではあらかじめ書いてもいい場所が決められています。

書いてもいい場所

  • <>内の「””」の中
  • <>と</>の間

これを当てはめると次のようになります。

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>●●</title>
  <meta name="description" content="●●">
</head>

<body>
  <h1>●●</h1>
  <p>●●</p>
</body>
</html>

たった4ヶ所に絞られました。これなら迷わずに書けそうです。

外側に文字を追加してみよう

では実際に●●部分に文字を書き加えてみます。
index.htmlをメモ帳で開きましょう。

以下の赤文字の部分を書き加えてから上書き保存します。
メモ帳はこのあとも使うので最小化にしておきます。

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>ここは外</title>
  <meta name="description" content="ここは外">
</head>

<body>
  <h1></h1>
  <p></p>
</body>
</html>

表示してみよう

改めてインターネットエクスプローラー(またはエッジ)で開いてみます。
まだ白紙のままです。

頭(head)の中は目に見えない

これは人間の場合でも同じです。
では顔や手などの体の部位(body)はどうでしょうか?
こちらは見ることができます。

文字を書き加えてみよう

再度メモ帳の画面を開きます。
赤文字の部分を書き加えて上書き保存します。

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>ここは外</title>
  <meta name="description" content="ここは外">
</head>

<body>
  <h1>ここは外</h1>
  <p>ここは外</p>
</body>
</html>

改めて表示してみよう

上書き保存したindex.htmlをインターネットエクスプローラー(またはエッジ)で表示してみます。

今度はちゃんと表示されました。
でもなぜか1つ目の「ここは外」は大きく表示されています。

タグにはそれぞれ意味がある

先ほど書き加えた箇所は次の4つでした。

<title>ここは外</title>
<meta name="description" content="ここは外">
<h1>ここは外</h1>
<p>ここは外</p>

一つずつ順に見ていきます。

題名

<title>ここは外</title>

HTMLファイルそのものの題名を表します。
実はよく見てみると画面にも表示されています。目安は30文字程度です。

説明文

<meta name="description" content="ここは外">

HTMLファイルの概要を表します。本でいえばあらすじのことです。目安は70文字程度です。

SEO対策の基本
題名と説明文はグーグルの検索結果にも表示されます。この2つを丁寧に書くことがSEO対策の基本となります。

見出し1

<h1>ここは外</h1>

hはheadingの略で、1は一番重要という意味です。
つまりこれは一番重要な見出しを表しています。重要なものほど太く大きくなります。
h1〜h6までの6種類あります。

段落

<p>ここは外</p>

pはparagraphの略です。段落を変えるごとに新しくpタグを追加します。

この他にもまだまだたくさんのタグがあります。
次の機会に改めてご紹介したいと思います。

まとめ

  • HTMLを保存するときは必ず半角英数字+.htmlという名前にする
  • HTMLを表示するときはブラウザを使う
  • <と>内のことをタグと呼ぶ
  • <と>で挟まれると目隠し機能がオンになる
  • <と>外に書くと目隠しされないが、書ける場所は限られている
  • タグにはそれぞれ意味がある
  • この記事もHTMLで書かれている

コメントを残す