前回の講座から続くかたちで、今回はホームページが表示される仕組みについて説明しています。今後学ぶことの理解の助けになるような札幌Geezerの経験も交えてお伝えしています。
IB-2：超入門ホームページが表示される仕組み
はじめに
前回の講座（こちら）で、インターネットとはどのようなものなのかのイメージがつかめたと思います。今回はその続編として、もう少し踏み込んで、ホームページがどのような仕組みで表示されているのかを説明します。
尚、ホームページという言葉は、いろいろな意味で使われているためやや曖昧です（詳細はこちら）。なのでここでは、ブラウザーで表示されるページひとつひとつのことは、ウェブページと呼ぶことにします。
◆ 検索の仕組みが無かった頃のウェブの姿から学ぶこと
ウェブの仕組みが世の中に登場した当時、まだ Google（グーグル）のような検索はありませんでした。
検索がないのに、どうやってウェブを見て歩いたかというと、リンクをたどって他のホームページに飛んで行くしかありませんでした。
なので当時のホームページには、リンク集のページがつきもので、その内容がそれぞれのホームページの個性にもなっていました。
このような状況でしたので、インターネット専門の雑誌にもさまざまなホームページが紹介されていて、それをスタート地点として、ホームページから別のホームページへと飛び歩く「ネットサーフィン」が当時のウェブの楽しみ方だったのです。
つまり、検索がない時期のウェブは、「リンクでつながったホームページが集まったもの」だったのです。これ、イメージできますでしょうか？
で、現在は検索があるとはいえ、ウェブそのものの仕組みは変わっていないということが重要な点です。これからホームページを作成する場合は、「検索で表示されなければ存在しないのと同じ」となるような作り方をするのではなく、「リンクの網の目の一部」となるようなイメージで作成しましょう。
自然な形でリンク「して」、「される」ことは、そう難しいことではありません。この点については、別の記事で説明します。
◇ リンクの仕組みを理解しておこう
さて、ホームページから別のホームページへと渡り歩くことを可能にしている「リンク」ですが、これはURL（ユーアールエル）を使っているだけの簡単なものです。
・ URLとは？
URL（Universal Resource Locator）は、その情報がウェブ上のどこにあるかを示すもので、世界共通の約束事で成り立っています。パソコンでウェブページを表示しているときは、ブラウザー画面の左上にそのURLが表示されています。
例えば、今あなたがご覧になっているこのページであれば、
https://sapporogeezer.com/ib-2/と表示されているはずです。
これがURLです（https:// の部分は隠れているかも知れません）。
たったこれだけで、このページで表示されている情報が、世界中のウェブサーバーのどれに保存されいて、そのサーバーの中のどこにあるのかが、わかるようになっています。
URLについてもう一点知っておきたいことは、ウェブ上で公開されているページや画像、音声、動画などには、そのひとつひとつ全てにURLが割り振られている、ということです。YouTube動画、ツイッターのつぶやきや画像などなど、ウェブで表示されるファイルのひとつひとつ全てに、です。
逆にURLがないと、そのデータがウェブ上のどこにあるのかわかりませんので、手元のパソコンやスマホに表示することはできません。
・ リンクを作成するには？
リンクは選んだテキスト（文字列）にURLを被せるイメージです。
例えばワードプレスの場合には、本文中のリンクは編集画面内で簡単に作成することができますし、メニューのリンクであれば、リンク先のページを選ぶだけでOK。昔のように html タグ（後述）を知らなければ、できないなんてことはありません。
余談になりますが、リンクを設定した文字列は、hyper text （ハイパーテキスト）とも呼ばれています。それがURLの最初の部分、http （hyper text transfer protocol）のことで、この部分は「ハイパーテキストを転送するための約束事に従って通信しています」ということを意味しています。
以上がリンクの仕組みです。
◆ ブラウザーの役割と html ファイル
前回の講座（こちら）でブラウザーとは何かを説明しましたので、ここではその役割をもう一歩踏み込んで説明しておきましょう。
まず、ウェブサーバーから手元のパソコンやスマホに送られてくるデータですが、実はその内容は文字だけなのです。
試しに、今ご覧になっているパソコン画面の適当な場所で右クリックしてみてください。すると選択メニューが表示されますが、その中に「ページのソースを表示」という項目がありますので、それをクリック。
すると別の画面が開いて、ぎっしりと文字が詰まった画面が表示されます。これが、ウェブサーバーから送られてきたデータです。
これには驚かれる方が多いと思います。
ウェブサーバーから送られてくるデータは、見ているものと同じイメージのものだと思いますよね？それが実は、全く違うのです。
まず、画像はどこへ行ったか？
ページのソースは文字だけで画像が見当たりません。実は画像そのものではなくて、画像のURLがソースに含まれています。ブラウザーは、そのURLをもとにソースの文字情報とは別に画像データを受け取って表示するようになっています。
次に、意味不明に見えるアルファベットの文字情報について。
このページは、ワードプレスを使って作成したものですから、この意味不明の文字列は、全てワードプレスが自動的に生成したもので、これらの文字列によって、ブラウザーでの見え方を指定しているのです。
見え方というのは、例えば「画像は左寄せにして、文章を回り込ませて表示する」とか、文字の大きさや配置などなどです。そうしたデザイン的なことは、ワードプレスの編集画面の中で視覚的に指定できるようになっているのですが、そこで指定したことがこのような文字列になって、送られてくるワケです。
というわけで、ブラウザーソフト（アプリ）は、受け取ったソースに含まれている命令に従ってそのページを画面に表示していることがお分かりいただけたと思います。
◇ html（エイチティーエムエル）とは？
さて、ソースに含まれている命令文のような文字情報ですが、”<” と “>”でくくられている部分が html と呼ばれているコード（プログラムのようなもの）です。
html を学ぶと、ブラウザーで表示可能なファイルを自分で作成することができるようになります。ただし、きちんとした見栄えのするページを作成しようとすると、css（シーエスエス）という別のコードを学ぶことが必要です。
白紙の状態から自分の手で、自由なレイアウトでページを作成してみたいとお考えであれば、両方を並行して学ぶ良書がたくさんあるのですが、これからワードプレスを学び始めて最新のもの（ブロックテーマ）を使うということであれば、どちらも必要ありません。
◇ html や css の知識が必要なのはプロだけ
ワードプレスでホームページの作成を請け負うプロになるなら別ですが、発信目的で使うのであれば html や css の知識は必要ありません（キッパリ）。
ワードプレスで文章や画像を投稿する際には、上記のようなコードを目にすることはありませんので、どうぞご安心を。
特に最新のブロックテーマ（別の講座で説明します）を使う場合には、かなり細かなところまで自分好みにデザインすることができますので、それに慣れてしまうと css の知識は忘れてしまいます（経験者は語るｗ）。
◇ ソースが公開情報だということは、コピペで同じページができるのか？
余談になりますが、札幌Geezer は、テキストエディター（プログラマー用の編集ツール）にコツコツと html を打ち込んで、ホームページを作成していたことがあります。記憶が正しければ、Windows98 が出たあたりの頃だったと思います。
ホームページが当時のようにシンプルなものであれば、確かにコピー＆ペーストで同じページが出来てしまいます。というよりも、私の場合はこのソースを見ることで、html を学んだ記憶があります。実は、このこともインターネットのオープンさの一面です。
私たちの感覚では、「え、コピーできるってどういうこと？」と思いますよね。
前回の講座で、1,119万台のウェブサーバーのことを説明しましたが、そのOS（パソコンで言えばWindows）の多くは Linux というOSで、そのソースコードは公開されています。「個人でもウェブサーバーを作ることができる」と書きましたが、そういうワケなんです。
ワードプレスも同じで、ソースコードが公開されています。このあたりのことを書き始めると長くなりますので、『ワードプレスに惚れ込んでしまったワケ』をご参照下さい。
で、コピペでウェブページができるかという話ですが、現在のウェブページは参照している外部ファイルが存在しますので、コピペしただけで同じものが出来上がるワケではありません。でも、どのような技術（仕組み）を使っているかは、見る人が見ればわかるようになっています。
◆ このページの要点
- ウェブは、リンクによって網の目につながった情報のかたまりであること。
- リンクは、文字にURLを被せるように作成するものであること。
- URLは、ウェブ上のページや写真、動画など全てに与えられていて、それによってウェブ上で見ることができるようになっていること。
- ウェブサーバーから送られてくるデータは文字情報で目に見えるようになっていること。
- ブラウザーは受け取った文字情報を解釈して、画面に表示していること。
- ワードプレスを使う場合は、html と css は知らなくてもOK。
◆ ご質問・ご要望について
疑問に思うことや説明が至らないことがありましたら、遠慮なく下のコメント欄またはお問い合わせフォームからご連絡いただければ幸いです。今後の更新作業の参考にさせていただきます。
◆ 課題
１．自分の言葉でまとめておこう
この講座で、得た学びを自分の言葉にしておきましょう。箇条書きが良いと思いますが、自分のスタイルでOKです。紙のノートでもパソコンやスマホのアプリでも構いませんが、脳内に留めずにその外側に一旦はアウトプットすることが重要です。オススメは紙のノートです。いつでもパラパラと眺めることができ、記憶に残りやすいからです。
２．発信しよう
「これは参考になった」あるいは何かの「インスピレーションを得た」ようなことがあれば、同じように感じる方が、あなたの周りにもいるかも知れません。学んだことをあなたの言葉で（←ここが重要）人に伝えようとすることで、それが自分のものになることを体験しましょう。
◆ もう少し詳しく知りたい方向けの参考ブログ記事
- 『ワードプレスと、サーバーとブラウザーの関係』（こちら）