ブラウザの役割を探っていこう：HTMLタグを使ってみる
ブラウザがファイルにある文字を読み表示してくれることは分かりましたが、ブラウザが単純に文字を読み込むのも限界があります。もう少し、ブラウザの役割を探っていきましょう。
ということで、「profile.html」を書き換えてみます。下記のように「Who am I !?」のあとに改行を入れて、ご自身の名前とニックネームを入れてみてください。ただし、日本語ではなくアルファベットのみにしておいてください。
Who am I !?
Name
Kinoshita Yusaku
Nickname
afroscriptそしてまたブラウザにドラッグ&ドロップしてみてください。
するとブラウザの表示は上のようになったかと思います。
なんと……！ 改行していたはずのところが、ブラウザで表示する際には認識されず「スペース」になっています。
というのも、ブラウザは「『●●.html』というファイルに書いてある文字を読んで、画面に表示する」ですが、「改行などは（そのままでは）理解してくれない」ものなんです。では、ブラウザが「改行」として読み取ってくれるために、ここでHTMLタグが出てきます。
HTMLタグというのは、<h1></h1>や<p></p>などの2個セットのものがあったり、<br>や<HR>など1個で使えるものがあったりします。いちいちタグの種類を覚えるよりひとまず使って体験してみましょう。
改行を表すHTMLタグは<br>です。<br>と書いたところは、ブラウザが「改行しなきゃ！」と認識してくれます。（<br>は「Line Break（改行）」の”Break”の略です）
ということで、ひとまず書いてみましょう。profile.htmlを下記のように書き換えてこれまで同様、ブラウザにドラッグ&ドロップしてください。
Who am I !?<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
Name<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
Kinoshita Yusaku<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
Nickname<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
afroscript<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
これで<br>があるところはきちんと改行されたはずです。
もう少し改造してみましょう。ページのタイトルである「Who am I !?」の文字を「大見出し」として大きく表示してします。大見出しにしたい文字を<h1>と</h1>で囲むことで実現できます。
hは「heading（見出し）」の略で、<h1><h2>……<h6>と6種類あります。<h1>が1番大きな見出し、<h2>が2番目に大きな見出し、といった具合に数字の順番に応じて見出しの大きさが決まります。（表示される文字の大きさも<h1>が一番大きく、<h6>が一番小さいです）
また、
Name<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
Kinoshita Yusaku<span class="hljs-tag"><<span class="hljs-title">br</span>></span>や
NIckname<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
afroscript<span class="hljs-tag"><<span class="hljs-title">br</span>></span>などは、セットなのでひとかたまりにしてみましょう。これはパラグラフを表す<p>と</p>で囲みます。下記のようにprofile.htmlを書き換えてみてください。
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Who am I !?<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>
Name<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
Kinoshita Yusaku
<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>
Nickname<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
afroscript
<span class="hljs-tag"></<span class="hljs-title">p</span>></span><br>がいくつかなくなっているのは気にせず、ひとまず書き換えて表示を確認しましょう。
すると上のように表示されたと思います。
このようにHTMLタグは、ブラウザがファイル（profile.html）内の文字を読み取って表示する際に、大見出しをつくったり、段落（パラグラフ）をつくったりする指示を出してくれるのです。
ちなみにいくつか<br>は削除したのは、<p></p>タグの前後ではブラウザが勝手に1行空けてくれるからです。
ブラウザの役割を探っていこう：日本語を表示する
もちろん、HTMLは他にも役割があります。さっきからアルファベットしか書いていませんが、そろそろ日本語使いたいですよね？ まずは単純に、profile.htmlを下記のように一部日本語に書き換えてください。
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Who am I !?<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>
名前<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
木下雄策
<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>
ニックネーム<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
afroscript
<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
すると、上のように見たことのない漢字が出てきたかと思います。
びっくりしますよね。これはブラウザがデフォルトでは日本語を理解しないようになっているからなんです。<meta charset="utf-8">という1行を頭につけ加えてください。
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span> <span class="hljs-comment"><!-- ここに追加 --></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Who am I !?<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>
名前<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
木下雄策
<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>
ニックネーム<span class="hljs-tag"><<span class="hljs-title">br</span>></span>
afroscript
<span class="hljs-tag"></<span class="hljs-title">p</span>></span>そしてまたドラッグ&ドロップすると、
これでちゃんと日本語が表示されましたね。
※日本語表示がうまくいかない場合はmetaとcharsetの間のスペースが全角になってたり、つづりが違ったりしているかもしれません。
<meta charset="utf-8">は、「このページで使う文字コードをUTF-8ってやつにしますよ」という宣言です。UTF-8なら日本語も表示できるようサポートしているので、日本語も読み取ってくれます。
このようにHTMLタグは、ページに関する簡単な設定前提条件を宣言したりする役割もあるんです。ちなみに上記の中に出てきた<!-- -->は、「その中身は表示しません」という意味です。この中に何を書いたとしても、ブラウザの表示には一切影響がありません。なので、よくHTMLのコード内に注意書きやコメントを書いたりするときに使われます。
HTMLタグに関しては、あとはひたすら覚えるだけなので、困ったときは下記サイトなどを調べるといいかと思います。
・HTMLクイックリファレンス
http://www.htmq.com/
まとめ
今回は下記についてを学びました。
- ブラウザは、「●●.html」というファイルの中に書いてあることを読み込んで、画面に表示する
- ブラウザは文字を表示してくれるが、改行などは認識してくれない
- HTMLタグは、ブラウザがファイル内の文字を読み取って表示する際に、大見出しをつくったり、段落（パラグラフ）をつくったりするよう指示を出してくれる
- HTMLタグは、ページに関する簡単な設定前提条件を宣言したりする役割もある
次回は、自己紹介サイト用のコンテンツを準備したあと、HTMLをもう少しだけ使いつつ、CSSにも挑戦します！ その後は、自己紹介ページを作成しながら、HTML/CSS/JavaScriptの超基礎的なところを一通り体験し、さらにゆくゆくは、JavaScriptを使ってIoTデバイスを触ってみることにも挑戦していく予定です。
ゆっくりゆっくり進みますが、次回もよろしくお願いします！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
