HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎2. WEBサイトの仕組み

      2017/07/11

この章について

この章では、WEBサイトの仕組みを簡単に解説していきます。
普段、見ているWEBサイトの裏側を知り制作に必要な知識と技術とは何かをみていきしょう。

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

まずはWEBサイトは、どのように表示されるのかを図を使って見ていきましょう。
Internt Explorerなどのブラウザは、アドレス(URL)を入力すると、WEBサイトを表示するために必要な情報をWEBサーバに要求(リクエスト)します。
するとWEBサーバは、そのページに必要なHTML,CSS,画像やプログラムのファイルデータをブラウザに転送します。
ブラウザは、それを受け取り、グラフィックとして描画(レンダリング)します。
ポイントは、WEBサイトは1枚絵で作られているのではなく、ブラウザがHTML,CSSファイルを受け取り、グラフィックに変換して表示している点です。
ブラウザとWEBサーバの関係図

WEBサーバとは

利用者のコンピュータに対し、ネットワークを通じて必要な情報や機能を提供するコンピュータまたはソフトウェアのことです。
WEBサイトの場合、Internet Explorerなどのブラウザの要求(リクエスト)に応じてWEBサイトに必要なhtmlやcss、画像などのファイルデータを転送します。
WEBサーバのOSは、WindowsやMac OSではなく、主にリナックス(Linux)と呼ばれるOSで動作しています。

ブラウザとは

ブラウザの役割

ブラウザは、HTML,CSS,画像データを解析し、グラフィック化して表示します。
グラフィック化することをレンダリングと言います。
HTMLデータは、開いているページを右クリック「ソースコードを表示」で見ることができます。
レンダリングの仕組み

主なブラウザ

日本では、Internt Explorerが有名ですが、他にもいろいろなブラウザがあります。
メーカーだけの違いだけでなく、レンダリングする機能(レンダリングエンジン)も異なり、これがWEBサイトの表示に違いがでる原因です。
制作においては、複数のブラウザで表示させて、できるだけ表示に大きな違いがでないように設計していきます。
まずは、下記の主なブラウザを覚えていきましょう。

  • Internt Explorer(インターネットエクスプローラー)…Microsoft(マイクロソフト)
  • Google Chrome(グーグル クローム)…Google(グーグル)
  • Safari(サファリ)…Apple(アップル)
  • Firefox(ファイヤーフォックス)…Mozilla(モジラ)

まとめ

  • WEBサイトは、ブラウザがHTML, CSS, 画像のデータをレンダリングしてビジュアル化している
  • ブラウザには、いろいろな種類があり、表示に違いがでてしまう場合がある

 - HTML・CSS