【初心者ノート】WEBデザイン HTML CSS php JavaScript の関係

htmlのアイキャッチ ウェブデザイン

WEBページを作る(WEBデザイン)ためには、HTMLCSSphpJavaScriptの知識が必要です。

私はハローワークの職業訓練と少しの独学を通じてこれらについて学びましたので、初心者、入門者にもわかりやすいように図を使ってまとめることにしました。

スポンサーリンク

WEBサーバとブラウザ(クライアント)

ブラウザからWEBサーバに対してWEBページの情報を要求すると、WEBサーバはブラウザに必要な情報(ファイル)を返します。

ブラウザとWEBサーバのやり取りのイメージアニメーション

このときWEBサーバからブラウザに渡されるのがHTMLCSSです。
また必要に応じてJavaScriptも渡されます。

 

HTML、CSS、php、JavaScript

HTMLCSSphpJavaScriptはWEBデザインの用語として必ず出てきますが、はじめての人にはそれぞれの違い、役割がわからないと思います

ここではそれぞれの役割について、イメージをまとめます。

文書

WEBページの前に、まずは文書httpについて整理しておきましょう。

私たちの周りには、本や新聞、インターネット上のWEBページなど、たくさんの「文書」があります。
それぞれの文書は独立したものですが、その中には参考文献出典などの形で別の文書をひも付けることがあります。

文書のネットワークを説明するアニメーション

このひも付けのしくみをインターネット(のコンピュータ)上の文書に持たせようと考えられたのがWEBであり、http(Hyper Text Transfer Protocol)という取り決め(プロトコル、ルール)でひも付けされたHTML文書をやり取りします。

HTML

パソコンのメモ帳などで作った文書は、人が見るとどの部分が見出しでどの部分が段落なのかは判別(推測)できますが、コンピュータ(ブラウザ)は判別することができません。

HTMLWEBページに載せる文書文字(見出し、文章)や、画像(写真、イラスト、動画)などの格納場所を示した情報を記述します。

ブラウザの画面に文書を表示するための指示書設計書のようなものですね。

htmlとブラウザの表示をイメージした図

CSS

HTMLを与えると、ブラウザはどの部分が見出しなのか、段落なのか、画像なのかを判断することができます。
これによって、見出しは見出しらしく少し大きめの文字で目立つようにしたり、段落の間に空白を入れて見やすくすることができます。

しかし、ブラウザはどの程度の大きさの文字にすればいいのか、文字のはどうすればいいのか、写真の大きさはどの程度で右に配置するのか左に配置するのかといった細かいことはわかりません。
指示がなければブラウザの判断(既定の基準)で飾り付けをします。

そこでこのような細かいこと指示するための情報としてスタイルシート(CSS)を与えます。

HTMLとCSSの動きを表したアニメーション

php

HTMLCSSはインターネット上の文書(の関連を含めて)をまとめたり、見栄えを整えるのにとても便利です。

HTMLCSSだけで作られたWEBページ静的なページ(文書)と言われ、サーバに配置されると、どのブラウザがいつ、どこからアクセスしようとも同じ内容が表示されます。
本などは一度発行すると基本的に内容が変わらないので、これも静的な文書と言えるでしょう。

 

静的な文書でも修正する必要が出てくることもあります。
たとえば誤字があったり、情報が古くなり更新が必要になることもあります。
などの場合は、改版して新しいものを販売することになります。
HTML文書改版(更新)してWEBサーバ上のファイルを置き換えれば、最新の情報を発信することができます。

静的HTMLの説明アニメ

ところが、HTML文書の中に今日の日付を表示させたいとか、ショッピングサイトで販売を管理(在庫数の管理/表示、注文の受付/決済)するような場合、その都度人間がHTML文書更新するのは非現実的です。

そこで最新HTML文書をコンピュータに作らせるためにphpというプログラムWEBサーバ上に置くようになりました。

ブラウザから要求があれば、WEBサーバその都度phpプログラムHTML文書(場合によってはcssも)を作ってブラウザに渡します。

phpがhtmlを作るイメージのアニメ

このようにして作られたHTML文書(WEBページ)は動的なページ(文書)といいます。

現実世界では、電車の切符などはお客さんの要求があったときに都度作るので動的な文書といえますね。(例えに少々無理がありますが…)

静的文書と動的文書を説明するイラスト

JavaScript

WEBサーバphpプログラムを処理することにより、動的HTML文書を配信することができるようになりました。
phpWEBサーバ側で動的なHTML文書を作るのに対し、JavaScriptブラウザ側では動的に細かくHTML文書を書き換えたり、動きのある表示をすることができます。

たとえばマウスがWEBページ上のあるボタンを押したときにポップアップを表示させるといったことは、ブラウザJavaScriptプログラムを処理することで実現します。
ほかにもGoogleマップで地図を移動させたり拡大・縮小したりするといったこともJavaScriptで処理します。

JavaScriptの処理の様子のアニメ

これは、ちょっとしたポップアップを表示させるためにWEBサーバがWEBページ全体を作り直したり、人が行う地図の微妙な移動・拡大縮小をWEBサーバ側で処理することが非効率であったり困難であったりするためです。

まとめ

もう一度おさらいします。

  • HTMLCSSはWEBサーバからブラウザに送られ、ブラウザが画面上にHTML文書の内容をCSSで指示されたように飾り付けます。
  • 随時更新が必要なHTML文書は、WEBサーバがphpプログラムによって自動的に作成します。
  • JavaScriptはWEBサーバからブラウザに送られ、ブラウザがJavaScriptプログラムを動作させてWEBサーバではできない細かな表現をします。

いかでしょうか。
イメージをつかんでいただけましたか?

 

 

 

 

 

コメント

タイトルとURLをコピーしました