超初心者向けのHTML入門

2019年3月18日公開・2019年3月18日更新
この記事は最終更新から4年以上経過しています。内容が古くなっているかもしれません。。

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ファイルを開いてみましょう。
ダブルクリックするとインターネットの画面が開くはずです。

■もし開かない場合は

・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>

表示してみよう

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

さらに文字を書き加えてみよう

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

<!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ファイルそのものの題名を表します。
実はよく見ると先ほどの画面にも表示されていました。

説明文

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

HTMLファイルの概要を表します。本で例えるとあらすじのことです。

見出し1

<h1>ここは外</h1>

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

段落

<p>ここは外</p>

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

この他にもまだまだたくさんのタグがあります。でも実際に使うのはごく限られたものだけです。

まとめ

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

次回へ続く（かも）

この記事はお役に立てましたか？

はい

ブログランキング・にほんブログ村へ

いいえ

ヤフーに戻ります
カテゴリー
豆知識

コメントを残す