ブラウザとは?HTMLとは?非エンジニアでもできるWebプログラミングの第一歩

木下雄策


ブラウザとは?HTMLとは?非エンジニアでもできるWebプログラミングの第一歩

はじめまして、「teratail」というエンジニア特化型Q&AサイトのDevRelを担当している、外部ライターの木下です。エンジニア向けのサービスの運営をしていますが、僕自身はエンジニアではありません。趣味でプログラミングをやっている、週末エンジニアです。大学時代は刈り上げ・ヒゲ・アフロで路上で踊ってました。

本題に入ります。

この連載では、「エンジニアではないけど、Webプログラミングやってみたい!」「何かつくってみたい! でも……なんか難しそうだし、何やってるかよく分かんないな……」なんて思っている方が、「ちょっとだけコードが書けて何か作れるようになったよ!」ってなることを目標に書いています。この連載を通じて、一人でもプログラミングする人が増えればうれしいです。

なお、この記事を書いている木下はプロのエンジニアではないので、技術について雰囲気や感覚で理解しているところも多々あります。ですので技術に関する説明が一部ニュアンスが違ったり、厳密には表現や解釈が正しくなかったりするかもしれません。

その代わり非エンジニアの視点からでも理解できるよう丁寧に細かく書いていこうと思いますので、お付き合いいただけると幸いです。また、体系的に学ぶことよりも「作ること」に重点を置いています。もし体系的にWebプログラミングの知識を身につけたいなら、下記記事に紹介されているサイトが参考になると思います。

今回のゴール

0-6111

今回は、本当にWebプログラミングのはじめの、はじめの、はじめの一歩です。

まずは上にある画像のように、ブラウザに日本語を表示させるってところをやってみて、「ブラウザって何やってるんだろう?」というところを理解する、「HTMLのはじめのはじめの一歩」を体験していただければと思います。

ブラウザって何をしているの??

ブラウザといえば、Google ChromeやSafari、 Firefox、InternetExplorerなどいろいろありますが、そもそも「ブラウザ」って何なんでしょうね? 何ができるんでしょう?

検索ができる?

ん〜なんか違います……。分かるようでよく分からないので、ひとまず手を動かしてその感覚つかんでみましょう。

ブラウザの役割を探っていこう:ブラウザに文字を表示させてみる

まず、Windowsの人は「メモ帳」を、Macの人はアプリケーションフォルダにある「テキストエディット」から作業ができます。ただ、本当はメモ帳よりも、テキストエディタ「Sublime Text」がオススメです。下記ページよりダウンロードができます。

http://www.sublimetext.com/

Sublime Textについての詳細はこちらにあります。

 

メモ帳やSublime Textを開いたら、下記のようにアルファベットで「Who am I !?」と書いてみましょう。

Who am I !?

そして、ファイル名を「profile.html」にして保存しましょう。保存先はどこでも問題ないので、今回はひとまずデスクトップに保存します。

0-1DandD-

そしてブラウザを開き、今つくった「profile.html」をドラッグ&ドロップしてみてください。

 

0-111

すると、上のようにブラウザに「Who am I !?」と表示されたはずです。

このようにブラウザは 「『●●.html』というファイルに書いてある文字を読んで、画面に表示する」というのがもっとも基本的な役割なのです。こう考えるとなんかブラウザの印象変わってきますよね?

ブラウザの役割を探っていこう:HTMLタグを使ってみる

ブラウザがファイルにある文字を読み表示してくれることは分かりましたが、ブラウザが単純に文字を読み込むのも限界があります。もう少し、ブラウザの役割を探っていきましょう。

ということで、「profile.html」を書き換えてみます。下記のように「Who am I !?」のあとに改行を入れて、ご自身の名前とニックネームを入れてみてください。ただし、日本語ではなくアルファベットのみにしておいてください。

Who am I !?

Name
Kinoshita Yusaku

Nickname
afroscript

そしてまたブラウザにドラッグ&ドロップしてみてください。

0-211

するとブラウザの表示は上のようになったかと思います。
なんと……! 改行していたはずのところが、ブラウザで表示する際には認識されず「スペース」になっています

というのも、ブラウザは「『●●.html』というファイルに書いてある文字を読んで、画面に表示する」ですが、「改行などは(そのままでは)理解してくれない」ものなんです。では、ブラウザが「改行」として読み取ってくれるために、ここでHTMLタグが出てきます。
HTMLタグというのは、<h1></h1>や<p></p>などの2個セットのものがあったり、<br>や<HR>など1個で使えるものがあったりします。いちいちタグの種類を覚えるよりひとまず使って体験してみましょう。

改行を表すHTMLタグは<br>です。<br>と書いたところは、ブラウザが「改行しなきゃ!」と認識してくれます。(<br>は「Line Break(改行)」の”Break”の略です)

ということで、ひとまず書いてみましょう。profile.htmlを下記のように書き換えてこれまで同様、ブラウザにドラッグ&ドロップしてください。

Who am I !?<br>
<br>
Name<br>
Kinoshita Yusaku<br>
<br>
Nickname<br>
afroscript<br>

0-311

これで<br>があるところはきちんと改行されたはずです。

もう少し改造してみましょう。ページのタイトルである「Who am I !?」の文字を「大見出し」として大きく表示してします。大見出しにしたい文字を<h1></h1>で囲むことで実現できます。

hは「heading(見出し)」の略で、<h1><h2>……<h6>と6種類あります。<h1>が1番大きな見出し、<h2>が2番目に大きな見出し、といった具合に数字の順番に応じて見出しの大きさが決まります。(表示される文字の大きさも<h1>が一番大きく、<h6>が一番小さいです)

また、

Name<br>
Kinoshita Yusaku<br>

NIckname<br>
afroscript<br>

などは、セットなのでひとかたまりにしてみましょう。これはパラグラフを表す<p></p>で囲みます。下記のようにprofile.htmlを書き換えてみてください。

<h1>Who am I !?</h1>
<p>
Name<br>
Kinoshita Yusaku
</p>
<p>
Nickname<br>
afroscript
</p>

<br>がいくつかなくなっているのは気にせず、ひとまず書き換えて表示を確認しましょう。

0-411

すると上のように表示されたと思います。
このようにHTMLタグは、ブラウザがファイル(profile.html)内の文字を読み取って表示する際に、大見出しをつくったり、段落(パラグラフ)をつくったりする指示を出してくれるのです。

ちなみにいくつか<br>は削除したのは、<p></p>タグの前後ではブラウザが勝手に1行空けてくれるからです。

ブラウザの役割を探っていこう:日本語を表示する

 
もちろん、HTMLは他にも役割があります。さっきからアルファベットしか書いていませんが、そろそろ日本語使いたいですよね? まずは単純に、profile.htmlを下記のように一部日本語に書き換えてください。

<h1>Who am I !?</h1>
<p>
名前<br>
木下雄策
</p>
<p>
ニックネーム<br>
afroscript
</p>

0-511

すると、上のように見たことのない漢字が出てきたかと思います。
びっくりしますよね。これはブラウザがデフォルトでは日本語を理解しないようになっているからなんです。<meta charset="utf-8">という1行を頭につけ加えてください。

<meta charset="utf-8"> <!--  ここに追加  -->
<h1>Who am I !?</h1>
<p>
名前<br>
木下雄策
</p>
<p>
ニックネーム<br>
afroscript
</p>

そしてまたドラッグ&ドロップすると、

0-6111

これでちゃんと日本語が表示されましたね。
※日本語表示がうまくいかない場合は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デバイスを触ってみることにも挑戦していく予定です。

ゆっくりゆっくり進みますが、次回もよろしくお願いします!

木下雄策
この記事を書いた人
木下雄策

外部ライター 東京

関連記事