プログラマーの入口

今から10分ではじめるHTMLの勉強（スマホ可）第5回

2023年3月14日

ゴーク

スタートアップにいたことも大手にいたこともありますがずっとITです。 仲間=クリエーターを増やして一緒にものづくりしたいです！

「HTMLの勉強を始めたいけどなかなか始められない」

「できれば独学でHTMLを学びたいけど、まずはどうすればいい？」

よし、では、今この瞬間から10分だけやってみましょう！
ということで第5回目、最終回です。
個人開発歴20年、大手のウェブ企業で部長を務め、学生時代には情報の教員免許も取得していた僕がわかりやすくお伝えします。
わかりにくいところがあればぜひコメント欄で教えてください！

HTMLはこれから学ぶのにコスパの良い言語です。
こちらの記事も確認してみてください。

あわせて読みたい
目次
  1. 前回のふりかえり
  2. HTMLの総ざらい
  3. まとめ

前回のふりかえり

前回は主にJavaScriptについて学びました。
JavaScriptもCSSと同じく、ある程度イメージをつけたらやりたいことを調べながら進める方針です。
前回やってみたのはボタンを押すと数字がカウントアップされるコードでした。

やってみる

ここにコード
プレビュー（実際の見え方）

HTMLの総ざらい

「今から10分ではじめる」の最終回である今回は、HTMLの総ざらいをしたいと思います。
通常、HTMLを勉強すると最初に習う部分です。
HTMLを知る上ではどうでもいいところなのですが、しっかりやる上では大事な部分なのでこのシリーズではあえて最後に持ってきました。
今回抑えたいポイントは下記の2つです。

  • HTMLのお作法
  • 上手に作るコツは作らないこと

では早速1つ目からみていきましょう！

HTMLのお作法

第4回までは「やってみる」を使いならが最低限必要なコードで進めてきました。
それだけでも目的は果たせるのですが、HTMLにはここまで紹介してこなかったお作法があります。
それは、

ポイント

HTMLを書くならこんな風に書いておいてね。そうすれば認識しやすくなるよ。

という決まり事のことです。
「そうすれば認識しやすくなるよ」という部分がちょっと引っかかりますね。
この辺りはおいおい明かしていくとして、具体的には次のような決まり事があります。

まずはじめに、HTMLに通常必要なタグのセットを紹介します。

HTMLに通常必要なタグのセット

<html>
<head></head>
<body></body>
</html>

「通常必要な」というのは、特別な理由がなければ必ず含めておくべきものと読み替えていただいても差し支えありません。

ボディタグ

これまでは

ポイント

<input type="text" id="moji">

のように書いていたHTMLの部品となり、閲覧者に表示したい部分は

ポイント

<body></body>

で囲むこと、というのがHTMLのお作法です。
body（ボディ）はボディタグと呼ばれており、日本語に直訳すると「本文」のことです。

ここまでのまとめ

  • HTMLの本文にあたる部分は「ボディタグ」内に書く

ではもしボディタグの外に書いたり、ボディタグ自体を設置しなかったらどうなるのか？
というと、ここまで「やってみる」で動作を確認してきたように表示自体はされます。
じゃあ何のためにボディタグの中に書くのかというと、
そこで登場するのが冒頭で出てきた「認識しやすくなる」という部分です。

誰にとって認識しやすくなるのかというと、ページを表示するウェブブラウザーやページを読み取るボットにとってです。

ウェブブラウザーというのは、今この記事を開いているアプリのことです。
具体的には下記のようなウェブブラウザーがあります。

  • パソコンでよく使うウェブブラウザー
    • Edge
    • Safari
    • Chrome
    • Firefox
  • スマホでよく使うウェブブラウザー
    • Safari
    • Chrome

ちなみにLINEやメールアプリで何かのリンクを開くとアプリ内でページが表示されることがありますが、これは上記のいずれでもなく「アプリ内ブラウザー」と呼ばれたりします。
また、「ウェブブラウザー」と呼ばずに単に「ブラウザー」と呼ぶこともあります。

ちょっと話が長くなりましたが、HTMLタグを解釈して人に見えやすいように表示してくれるのがウェブブラウザーの役割です。
そのウェブブラウザーに対して

ここから本文が始まるからね

と親切に教えてあげるのがボディタグの役割です。

そのほかにも「ボット」に対して本文の位置を教えてあげるのもボディタグの役割です。
ボットとはロボットのことです。
具体的にはGoogleのボットなどがあります。

僕たちがインターネットに公開したウェブページは、インターネットを常に徘徊しているGoogleのボットが見つけ出してGoogleの検索に乗っかるようにしてくれます。
その作業の際に、ボットに対して本文の位置を教えてあげるのもボディタグの役割です。

ヘッドタグ

続いて

<head></head>

で囲まれている「ヘッドタグ」について確認したいと思います。
ボティが「本文」だったのに対してヘッドは的確な日本語が当てはまらないのですが、意味合いとしては本文の説明をするための領域です。
プログラミングをしていると「ヘッド」とか「ヘッダー」という言葉がたまに登場するのですが、それらも同じように本文を説明するための部分のことです。

ヘッドタグの中には閲覧者には直接表示せず、ブラウザーやボットに伝えたい内容を記載します。
例えば下記のようなものがあります。

  • ページのタイトル
  • ページの説明文
  • ページをSNSなどでシェアするときに添付する画像など

ページのタイトルや説明文はGoogleで検索したときに表示される下図の部分です。

googleでの検索結果とheadタグ
googleでの検索結果とheadタグ

また、ページをSNSなどでシェアするときに添付する画像などとは、TwitterやFacebookでURLを共有しようとすると表示される画像などの情報です。

TwitterでURLをシェアするときに表示される情報とheadタグ
TwitterでURLをシェアするときに表示される情報とheadタグ

このように、headタグにはそのページがどんなページなのかを説明してあげるための情報（メタ情報と言います）を記載します。
また、headタグ内にはほかにも下記のような情報も記載します。

  • スクリプト
  • CSS
  • 読み込む外部ファイル

「スクリプト」とはJavaScriptのことです。
JavaScriptは閲覧者に見せる部分ではないので、ヘッドタグ内に書くことが多いです。（処理の内容によってはボディタグ内に書くこともあります）
また、CSSの記載もヘッドタグ内に書くのが通例です。

あれ？CSSってstyle=""って書いてた部分だよね？

と思った方、はいその通りです。
ここまでCSSは

<span style="color:red">こんにちは</span>

のようにHTMLタグ内に記載していました。
実はほかにもCSSをHTMLタグに適用する方法があります。
例えば下記のような場合、

<span style="color:red;font-size:30px;">こんにちは１</span>
<span style="color:red;font-size:30px;">こんにちは２</span>
<span style="color:red;font-size:30px;">こんにちは３</span>

表示したい文字はすべて赤の30pxに設定しているので、それぞれのspanにいちいちstyleを書いていくのは面倒です。
そこで、こんな風に書くことができます。

<style>
.red-30{
color:red;
font-size:30;
}
</style>

<span class="red-30">こんにちは１</span>
<span class="red-30">こんにちは２</span>
<span class="red-30">こんにちは３</span>

<style></style>は「スタイルタグ」です。
スタイルタグの中でCSSを書いて、それをHTMLタグに適用する方法です。
スタイルタグの中で

.red-30

のように「red-30」と命名された装飾のルールが、HTMLタグの方で

class="red-30"

と指定されているわけです。
スタイルタグの中の「.（ドット）」はHTMLタグにおける「class」を表しています。

では、ここまでの整理を踏まえて前回のコードを書き換えてみましょう。

<html>
   <head>
      <title>カウントアップツール</title>
      <meta name="description" content="ボタンを押すとカウントアップされるツールです">
      <script>
         function count_up(){
         document.getElementById("count").innerText = Number(document.getElementById("count").innerText) + 1;
         }
      </script>
   </head>
   <body>
      <span id="count">0</span>
      <button onclick="count_up()">カウントアップ</button>
   </body>
</html>

何となくそれっぽくなりました。

さて、最後の項目です。

読み込む外部ファイル

これは、CSSやJavaScriptを外部から読み込む場合です。
CSSやJavaScriptはヘッドタグ内にそのまま書いてもいいのですが、それぞれを固有のファイルに保存して読み込むことも可能です。
また、誰かが作ったJavaScriptのコードをそのまま丸っともらってきて読み込むようなこともよくあります。

ここまでのまとめ

  • ヘッドタグにはそのページの説明などを記載する
  • ページの装飾や処理に関するコードやファイルの読み込みを行う

まとめ

5回に渡って「今すぐ10分ではじめる」と銘打ってHTMLの勉強をしてきました。
お伝えすべきところはお伝えした上で、ここさえわかればあとは自分で何とかできそう！
というラインを狙ってまとめてみましたがいかがだったでしょうか？

この5回はHTMLの入り口の部分ということでスマホでもできるような内容でしたが、改めてしっかり「ウェブサービス」を作ってみるシリーズをお届けしたいと考えているので、ぜひまたお会いできれば幸いです！

  • この記事を書いた人

ゴーク

スタートアップにいたことも大手にいたこともありますがずっとITです。 仲間=クリエーターを増やして一緒にものづくりしたいです！

-プログラマーの入口