[Home] [Top] [Back] [Next] CSSで見ためをデザインする
1. HTMLで世界を創造する
1-1. HTMLを書こう
1-2. とにかく読んでみる
1-3. いったい何が起きているのか
1-4. ブラウザの仕組み

1. HTMLで世界を創造する

1-1. HTML を書こう

HTMLって何だろうと考ずに HTML を書いてみることにしましょう。
考えないということが大事です。
何も考えず、テキストエディターを開き、まずは以下を書き写して下さい。
意味はあとで説明します、
そしてこの HTML 文書を web_01.html というファイル名でデスクトップに保存します。ですが、、、おそらく 次のステップから最初の挫折ポイントになるはずです、、、、
ファイル名に 01 をつけて web_01.html としているのは "第一章" のプログラムだからです。こうすればデスクトップに保存したとき、他の章で書くファイルと名前がかぶることがなくなりますね。
一つ目はファイルを *.txt ではなく、*.html という拡張子で保存することです。
まあ、こちらは大丈夫でしょう。
難しいのは ファイルを utf8 という保存形式で保存する ことでしょう。
え？
ファイルの保存形式？
そうです。"ファイルの保存形式" です。
新しいことをやると知らないことがたくさん出てきます。
知らなくて全然いいのです。初めてなんですから。
ではファイルを utf-8 で保存してみましょう。
そう言ってもやり方がわかりませんね。ここで私が説明してもいいのですが問題があります。あなたの使っているパソコンが Mac なのか Windows なのか私には分からない し、それに あなたがどんなエディターを使っているのか私には想像がつきません。
だから突き放すようで胸が痛むのですがこれは ググる しかありません。
冗談みたいに聞こえますが、これは "冗談" なんかじゃありません。
社会人一年生としてプログラムの現場に出るとします。初めて問題に遭遇したときに、先輩に質問します。すると先輩から一言、あなたはこのように言われます。
ググれ と。
実はこれはとても適切な一言です。なぜならプログラミングとは、まさにこれに尽きるからです。先輩はこのことをよく知っているのです。数年して仕事に慣れてくると、当然、もう先輩はいません。そうすると自分で自分のことが出来なきゃいけません。これは IT 業界だけじゃないでしょう。社会に出て仕事をするとは、そういうことです。
とは言え、ある程度の方向性は書いておきましょう。
まず 「ファイル名を付けてファイルを保存」 することはできますか？ このとき 「ファイル名」 を指定するあたりに 「ファイルの保存形式」 というのがあるはずなのです。使用するパソコンやテキストエディターによって違うと思いますが、「ファイルの保存形式」 を指定できる場所は必ずあるはずです。そこで utf-8 を選び、ファイルを保存します。
言えることはこれくらいが精一杯です、、、
あとはやっぱりググるしかないです、、、
ちょっと待ちますね。
できましたか？
(早すぎだって、、)
ところで、どうしてファイルを utf-8 で保存したのでしょう？
まず一つは
あなたに最初の躓きポイントを与えるため
です。
これから 「もうダメだ・・・」 という状況に何度も遭遇します。
冒頭に書きましたが、プログラミングは 「これが８割」 なのです。
最初のうちは 「たまたま自分のパソコンと相性が悪かったから、、、」 と "たまたま" のせいにします。でも数年が経つと "たまたま" なんて幻想だったと気づきます。"たまたま" じゃなくて "いつも" なのです。トラブルが８割とは、そういうことです。
"慣れ" なきゃいけません。これから何度も、何度も、何度も、何度も、出会うことになるのですから。そっちが "普通" なんだと知れば、挫折が少なくなるはずです。
さて utf-8 で保存する理由、、、これには技術的な理由があります。現在、インターネット上の文書の文字コードは統一されておらず、バラバラです。utf-8 はそのための規格なのですが、それでもまだ浸透していません。だから utf-8 で保存するもう一つの理由は 「プログラマの多くは utf8 を愛している」 からです。プログラマたちは 「世界中の文書の全てが utf8 になればいいのに」 と思っています。だから多くのプログラマたちはファイルを utf-8 で保存します。
ちなみに 「拡張子」 のほうで躓いた人はいますか？ デスクトップに保存されたファイルの 「ファイル名」 が web_01.html ではなくて web_01 になっている人たちです。*.html という拡張子が表示されていない状態です。ファイルの拡張子を表示する必要があるのですが、これもパソコンによってやり方は違います。なので残念ながらこれも "ググる" しかありません。こちれはググると出てきますので、そんなに難しくないはずです。ぜひ拡張子を表示するように変更して下さい。
さて、本題に戻りましょう。
まずはブラウザを開きます (ブラウザの新しいタブを開くなり、新規のウィンドウを開くなり)。そして先ほど保存したweb_01.htmlをドラッグし、ブラウザに持っていってドロップしてみます。
こんな感じになりましたか？
Hello shown in the browser
Sources Available
ソースコードはこちらからダウンロードできます
web_01.html
 

1-2. とにかく読んでみる

さーて、、、
とにかく 不親切きわまりない感じ で連載が始まりました、、、
この不親切には慣れていただくしかありません、、、それが一番の "近道" なのですから、、、
というわけで、どうでしたか？
上手くファイルが保存され、ページがちゃんと表示されましたか？
もう一度、中身を見てみましょう。
一つひとつ解説していきますね。
長いですけど辛抱して下さい。
<!DOCTYPE html>
これは一種の "おまじない" です。いったい何のファイルを開いているのか、ブラウザに教えてあげるためのものです。「HTML ですよ」 ということを宣言しています。
<html lang="en">
全ての HTML 文書は、中身すべてを <html></html> で囲ってあげるという決まりになっています。こんなふうに <タグ>その中身</タグ> の形式になっているものを 「タグ」 といいます。<html> の中に、さらに大量の "タグ" が入ります。
さらに lang="en" という記述がありますね。これは "タグ" に対して 「属性」 といいます。つまり <タグ 属性="値"></タグ> というふうになります。lang="en" という属性はこの文書が 「英語 (en)」 で書かれていることを意味します。
<head></head>
<head></head> は、その HTML 文書を説明する様々な情報である 「メタ情報」 を入れるためのタグです。通常、このタグが囲っている領域はそんなに広くありません。普通はコンテンツ量の方が、メタ情報よりも多いからです。
<meta charset="utf-8" />
これは <head></head> の中に入るメタ情報の一つです。メタ情報の大半は <meta> で始まります。こういうのを 「メタタグ」 といいます。このメタタグには charset="utf-8" という "属性" が指定されていますね。この HTML 文書は utf-8 で書かれていますよ、ということをブラウザに教えています。
余談になりますが (メタタグとは関係ありません)、<head> は </head> で閉じているし、<body> も </body> で閉じています。でも <meta> は </meta> で閉じていません。その代わり <meta /> というふうに自己完結しています。対応するタグで閉じない、このようなタグたちを、これからよく見かけることになります。理由は単純で、それらタグには実質的なコンテンツがなく、"属性" しかないからです。これがないとブラウザは懸命になって閉じるタグを探してします。だから 「このタグはそれ自体で完結しているよ」 と、ブラウザに教えてあげるのです。
<title>Test</title>
HTML 文書に付ける 「タイトル」 です。
<meta> で始まってはいませんが、これもメタ情報の一種です。ただし最後は / で完結しません。<title> タグを閉じるために、それに対応する </title> タグがちゃんと存在しています。
ここではタイトルとして Test を指定しています。これはブラウザで確認することができます。ブラウザに戻って、ブラウザのタブの部分を確認してみましょう。Test になっているのが分かるはずです。
<body></body>
<head></head> は "メタ情報" を入れるものでした。 <body></body> は 「コンテンツ」 を入れるためのタグです。
<div>Hello</div>
<body></body> の中にいれるコンテンツとして Hello を入れてみることにしました。<div> は division の略 です。日本語だと "区切り" ですね。中には好きなものを何でも入れてよいです。ページ内に複数の <div> があるとき、それら一つ一つが "区切り" です。そして一つ一つが別物であることを表します。
style="font-size:100px;
さて、今やった <div>Hello</div> を見ると、実際は style="font-size:100px;" という "属性" が指定されているようです。これは何でしょう？
これは実は HTML のルールではありません。これは 「スタイル」 と呼ばれ、CSS という規格に属します。CSS はコンテンツの "見ため" を決めるもので、あとで学ぶことになるのですが、こんなふうに 「HTML の中に CSS を直接書く」 こともできるのです。
font-size:100px; という記述から想像できると思いますが、これは 超デカいフォントを適用してくれ という命令です。
px は 「pixel (ピクセル)」 といってブラウザに表示される要素のサイズの単位なのですが、通常は 16px ぐらいなので 100px というのがどれだけ大きいか推測できるはずです。
はい。これで解説は終わりです。
 

1-3. いったい何が起きているのか

さて、、、、
いったい HTML って何なのでしょう？
HTML を書き、それをブラウザにドラッグ＆ドロップすると、いったい何が起きるのでしょうか。ブラウザは何をやっているのか、またはそもそもブラウザとは何なのでしょうか。
プログラミングを学んでいると頭の中が ? でいっぱいになります。
ちょっと違うことを考えてみましょう。
皆さんが 「料理」 をするとき、包丁を使って材料を刻み、鍋をコンロにかけて野菜や肉を煮込みます。塩やハーブで味付けをし、美味しい料理を作ります。このとき、「包丁がどうやって作られているのか」 とか 「鍋はどうやって作られているのか」 とか 「コンロはどうやって作られれているのか」 とか 「塩はどうやって作られているのか」 とか、そういったことは私たちにとって重要でしょうか？凝った料理を作るのであればそれらを知っているべきかも知れません。でも料理で使う道具や調味料の製造過程を知らなくても、大概は、美味しい料理が作れます。
料理を作るとき、包丁やコンロ、鍋などは
どこかのすごい人が作ったのだ
と考えればよいのです。
How tools are made is irrelevant.
ブラウザや HTML なども同じです。
それらは
どこかのすごい人が作った
のです。
なので、さきほどの ? への解答は
考えなくてよい
です。
ここで HTML を取り上げるのは、HTML が "ウェブプログラミング" の基本だからです。そして当たり前ですが、プログラミングは、ウェブプログラミングだけじゃありません。ウェブプログラミング以外にもあらゆる分野のプログラミングがあります。
で、ウェブプログラミングを専門にやっている人たちが、それ以外の分野のプログラミングを知っている必要があるかというと、そんなことはありません。それ以外の分野を知らなくてもプログラムが書けます。ウェブプログラマーに限らず、ある分野のプログラマーが別の分野のプログラミングを知っていることは稀 なのです。
「包丁」 にはスペシャリストがいるし、「コンロ」 もそれに特化したメーカーの専門知識があるでしょう。でも料理をするのに 「包丁」 や 「コンロ」 のことを知らなくてもいいように、パソコンやブラウザ、HTML などは、
どこかのすごい人が作った
と考えておけば、それで全然いいのです。
そしてこれは実際にこれから自分で体験して気づくことになるはずですが、実はそのほうが近道 なのです。HTML というものが何なのかを "考えず" に書き写したのは、簡単にいえば "習うより慣れろ" のためです。
 

1-4. ブラウザの仕組み

しかし必要最低限のこと、つまり 「ブラウザ」 と 「HTML」 の関係は明確にしておきましょう。
まずプログラマーが書いたコードがあります。HTML という規格に従って書いたコードです。そしてその対極に、忘れてはならない、パソコンの 画面 というのがあります。そしてその真ん中に ブラウザ という何だか
得体の知れないもの
がいるのです。
覚えておいて下さい。
「ブラウザとは得たいの知れないものである」
これだけです。
Browser is a rendering engine.
実際は、例えば Chrome ブラウザであれば、ブラウザの背後に V8 エンジンと呼ばれるものがいます。そういうのを "レンダリング・エンジン" といいます。
しかし美味しい料理を作るために包丁や鍋の作り方を知らなくてもいいように、大抵のプログラムを書くにはその特性だけ知っていればそれでよいはずです。
「どこかのすごい人が作ったもの」 を 素直に受け取る こと。
「どこかのすごい人が作ったもの」 を使うたびに、いちいち仕組みを考えていたら身が持ちません。
この発想はプログラムを書いていく上で "ものすごく" 重要です。覚えておいて下さい。