知っているようで知らないWebサイトを閲覧するブラウザ⁈

Learn HTML by yourself

ここでは私達が普段当たり前のように利用しているWebサイトを閲覧する仕組みについて解説していきます。Webサイトは、さまざまな技術が活用されWebページを表示しています。

知っているようで知らないWebサイトを閲覧するブラウザ⁈

ブラウザとは、コンピュータやスマホに搭載されているインターネットを閲覧するためのソフトウェアのことです。みなさんがよく利用しているのは、WindowsにはMicrosoft EdgeInternet explorerが標準で搭載されています。MacやiPhoneではsafariが利用されています。androidではGoogle chromeが標準で搭載されています。標準以外にも、FirefoxOperaなどブラウザの会社が開発したものが多数あります。

Webサイトを閲覧するには、どのブラウザを利用しても大きな違いはありませんが、コンピュータの操作に慣れているユーザは、自分の使いやすい環境のブラウザをインストールして利用することもあります。

Webサイトのデータを配信するのはサーバーの役割

サーバーとは、オンライン上にデータを置いておくための大きなコンピュータのことです。

  • データサーバー
  • メールサーバー
  • DNSサーバー

いろいろ種類があり、インターネット上にホームページを公開するには「Webサーバー」が使われています。Webサイトは、HTMLCSSのようなプログラム言語で書かれたファイルで成り立ちますが、これらのファイルはパソコンで作成することが一般的であり、そのパソコンの中にデータを置いておくだけではホームページは公開されることはありません。

ホームページを公開するためには、閲覧できるオンライン上にデータをアップロードする必要があります。

そのオンライン上がWebサーバーです。

ドメインはホームページのアドレス(住所)

インターネットでホームページをみていると、ホームページのアドレスが「〇〇〇.com」や「●●●.ne.jp」で表示されているのをお気づきでしょうか。これらの文字列をドメインと呼び、同じものが存在することはありません。

 

アドレスが数字だけではわかりにくい⁈

本来のインターネットのアドレス(住所)とは、数字を「.」ピリオドで区切る4つの数字で構成されています。

例)192.121.134.31

この数字をIPアドレスと呼び、コンピュータやサーバーに振り分けられている番号です。

webサイトを閲覧するには、このIPアドレスでは何のホームページなのかを覚えることが難しいため、ドメインを利用してホームページが表示されています。

ドメインとIPアドレスを紐づけている役割を持つのが、DNSサーバーです。

webサイトが表示される仕組み

webサイトがブラウザに表示されるまでには、サーバーとの間でデータが送受信されています。

  1. ドメインを入力
  2. DNSサーバーに問合せされる
  3. DNSサーバーが閲覧するIPアドレスを取得しコンピュータに返される

アクセスされたWebサーバーは、URLに掲載されている情報(画像やテキスト、CSSファイルなど)をもとにコンピュータに返します。こういった流れから、私達が使っているコンピュータの画面には、そのデータがwebページとして映し出されているのです。

Webサイトをつくるためのキーワード

Webは、新しいデザインや技術が取り入れられものすごいスピードで進化しています。時代の進化と伴いWeb制作にも変化があるのです。その技術について解説していきます。

インターネットの多様化

最近はインターネットをする理由には、Webサイトを閲覧するだけではありません。例えば、オンラインゲームなどのゲーム機を使ってネット対戦をするだったり、テレビでインターネットをするだったりと多様化してきました。そのためWebデザイナーは、形にとらわれない様々なデバイスを通じて情報を快適に取得できるようにデザインや設計をしていかなければなりません。

モバイルファースト

モバイルファーストとは、インターネット検索をするのはパソコンよりも気軽に使えるモバイル(スマホ)が増加傾向にあるということから、この言葉で表現しているようです。インターネットは近年身近な存在となっています。

 

 

インターネット=パソコン

という時代はもう減ってきているということです。

ほとんどの人が、スマホを持ち、場所を選ばす、思い立ったら検索することができる環境が整ってきているのです。

これまでは、パソコンで閲覧することが主体で考えられてきたWebサイトですが、スマホで快適に閲覧できるようなWebサイトが多く求められています。多くの人に自社のWebサイトを見てほしいわけですから、スマホで閲覧したらパソコン専用の画面で見づらいし扱いづらいと認識されてしまえば、そのWEBサイトからユーザは離れてしまいます。ですから、ユーザが求めるものは改善していく、これがモバイルファーストの観念です。

モバイルフレンドリー

モバイルフレンドリーは、Googleが2015年4月に全世界で実装したアルゴリズムです。WEBサイトのURLを入力するとそのWebサイトがスマホ対応のページかどうかの有無をチェックすることができます。

 

Webサイトに使われている言語

Webサイトの代表的なのが「HTML」言語です。HTMLで文書に構造を作成し、CSSでレイアウトを施します。はじめて聞く言語でイメージ的には「難しそう」、「重すぎる」と頭の中の思考をストップさせてしまいそうですが、誰もが一度は耳にしたことがあるのではないでしょうか。

HTML

HTMLは、「Hyper Text Markup Language」の略語です。

文章をWebページとして表示させるための言語です。また、Webデザイナーが初めて習得する基本的な言語ともいわれています。

HTMLは、いくつかのバージョンがあります。そのバージョンによって利用できる要素や属性などから、ルールが異なります。Webサイトを作成するには、このいくつかのバージョンを覚える必要があります。昔の作られたWebサイトを編集をすることもあるからです。

HTMLのルールは誰が決めるの?!

HTMLのバージョンや仕様は、Web技術の標準化団体であるworldwideWebConsortium(W3C)によって策定されています。

CSS

CSS(Cascading Style Sheets)は、WEBサイトの外観などの見た目についてスタイルを指定する言語の略語です。

HTMLだけではどうしても殺風景で物足りなさを感じてしまい、装飾して見た目をよくするのがこの言語です。見た目がよいと、ユーザとしては中もみたくなりますよね。CSSにもいくつかのバージョンがあります。数字が大きいほどnewバージョンです。

  • CSS1
  • CSS2
  • CSS3

今の主な言語は、CSS3です。

JavaScript

JavaScriptは、Webサイトのプレビューをクリックすると画像が切り替わりをする役割をもつ言語です。

 

作成するサイトに動的な機能を与え、複数枚の画像があるとスライドして切り替わったりする効果を与えます。サイトのデザインを豊かにし、使い心地を向上させることで利用されています。

jQuery

jQueryは、もともとJavaScriptで書かれていて、あらゆる処理の「スターターキット」のようなものです。プログラムの基礎としてjQueryを使うことで複雑なアニメーションや表示する範囲を簡単に切り替える(スライドする)ことができます。

多くのWebサイトにはjQueryが導入されています。

PHP

PHP(Hypertext Preprocessor)は、Webサイトに動きをだすための言語の略語です。

PHPはHTMLに埋め込むことができ、Webサイトをつくるのにはよく利用されています。JavaScriptがクライアント側で動作するのとは逆に、PHPはサーバーサイド(Webサーバー上)で動作します。なので、パソコン上でプログラムを記述しても実行するには、PHPが必要となります。

例えば、メールフォームは名前や住所などの項目はHTMLで作られ、PHPを使ってサーバーに送受信を処理します。

代表的な人気コンテンツシステムであるWordPressも、その基本システムがPHPでかかれています。

まとめ

Webサイトを自ら作成しようとはじめたプログラム言語ですが、インターネットはすでに生活の一部となっています。当たり前のように情報収集を簡単にスマホで集めることができるし、ゲームや音楽も楽しむことができます。

その当たり前となっているWebサイトに対して基本となる知識を習得できれば、もっと豊かなWebサイトを自ら作成することができるでしょう。

ゆっくりと時間をつくって集中すると、中々面白くてとまらなくなります。

まだまだ序章ですが、楽しみながら知識をふやしていこうと思います。

コメント