メニュー 閉じる

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 の知識は必要ありません。

 もちろん学べば学んだだけ、デザイン的な自由度は上がります。参考までに札幌Geezerは、html に関してはかなり昔の知識が残っている程度、css に関しては初心者程度です(css は意外と奥が深いです)。

◇ ソースが公開情報だということは、コピペで同じページができるのか?

 確かにそういうことになりそうですよね?

 でもそれは今は昔の話。html だけのシンプルなつくりのページであれば、確かにコピペできてしまうのですが、今はソースのページが参照している外部ファイルが存在しますので、コピペしただけでは上手くいきません。

◆ このページの要点

  • ウェブは、リンクによって網の目につながった情報のかたまりであること。
  • リンクは、文字にURLを被せるように作成するものであること。
  • URLは、ウェブ上のページや写真、動画など全てに与えられていて、それによってウェブ上で見ることができるようになっていること。
  • ウェブサーバーから送られてくるデータは文字情報で目に見えるようになっていること。
  • ブラウザーは受け取った文字情報を解釈して、画面に表示していること。
  • html と css を学ぶと、ウェブで表示するページを手作業で作成することができるようになること。
  • ワードプレスを使う場合は、html と css は知らなくてもOK。但し学ぶとデザインの自由度があがること。

 またまた余談ですが、実は、札幌Geezer は、html をテキストエディター(プログラマー用の編集ツール)を使って、コツコツと html を打ち込んでホームページを作成していたことがあります。記憶が正しければ、Windows98 が出たあたりの頃だったと思います。

 もちろんリンク集も掲載していました。小さなリンク用のアイコンを作成し相手のサイトに連絡して、相互リンクしていたものです。今は手間をかけてそんなことをする人はあまりいないと思いますが、「つながりを広げる」という選択肢を与えてくれたのが、インターネットだと今でもそう考えています。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください