HTML・CSS・Javascript・PHPの違いとは?まずは大まかに捉えてスッキリさせよう

refresh calendar 2019-11-14

はい、今日はWordPressを始めるための手順と気をつけるべきポイントまとめの続きです。

WordPressを使ってWEBサイトを作ろうとするときに、一番最初に困惑するのが、必要な言語の多さだと思います。 HTMLから始まり、CSS・PHP と続き、さらにはJavascriptなる言語まで出てくる。 厳密にはHTMLとCSSはプログラミング言語には入らないと思うのですが、そんなことは初学者にとってはどうでもいい話で、学ぶべき対象が4つもあることには変わりません。

そしておそらくですが、はじめは何が何だか分からず、ものすごく混乱すると思います。 今日はそれがスッキリわかるように、どの言語がどういった役目をもっているのかについてまとめてみました。

WordPressでサイトを作成するにあたっての、大まかな流れをまとめてみました。 このページではあくまで大まかな流れについて触れ、必要ある場合には詳細に関するページのリンクを貼…
home kanau.page

HTML - 骨組みをつくる

サイトの骨組みをつくるのがHTMLの主な仕事です。

こういったことはHTMLにしかできない仕事なんですね。 ただHTMLで対応できるのは骨組みだけで、使えるサイトにするにはCSSでデザインを施さなければなりません。 片方だけでは想像したサイトにはならない、というのがこのWEB製作におけるデザインの難しいところかもしれません。

たとえとして、極々標準的な構成の骨組み部分を書いてみるとこんな感じになります。

<html>
  <head> </head>
  <body>
    <header>ページ上部</header>
    <article>
      <section>左カラム</section>
      <section>右カラム</section>
    </article>
    <footer>ページ下部</footer>
  </body>
</html>

これをindex.htmlという名前でファイル保存すれば、実際にブラウザで見れるのですが、間違いなくガッカリすると思います。

何度も言うように、これはあくまで骨組みであって、「各要素の縦や横のサイズをどうするか?」とか、「色について」といったことについては、CSSを用いなければならないからです。 だからこれを表示させてみても、「ただ文字が並んでいるだけ」ということになります。

CSS - デザイン担当

CSSはHTMLの各要素に対して、デザインを施すことができます。

先程の例のページ上部にあたるheader要素を再度例にすると、縦の長さを指定したり、背景色をグラデーションにしてみたり、文字フォントを他とは別のものにしてみたり、などなど。 基本的に、デザインに関することはCSS側で操作するのです。

さらに最新のCSS3では、ちょっとしたアニメーションもできるようになっていて、CSSでできるデザインの幅が非常に増えました。

Javascript - みんなのブラウザ上で動く縁の下の力持ち

HTMLとCSSだけではできないことがあります。 一番分かりやすいのは動きのあるデザインです。 既にCSS3の登場でちょっとしたアニメーションが使えるようになったと言いましたが、逆に言えば、それまではJavascriptがなければアニメーションは使えなかったということです。

例えばGoogleMapのような「画面上でグリグリ動かせるもの」なんかは、Javascriptを使った例としてかなり分かりやすいです。 TwitterやYoutubeの埋め込みやリアルタイムで動くグラフ、ブラウザ上でできるゲームなどもそうです。 こういったシステマチックなものがJavascriptの領域になります。

僕の所見ですが、個人ブログレベルではJavascriptを書く必要性はほぼないと思います。 もし使う必要があったとしても、たいてい何らかの形(プラグインとか)で第三者が提供してくれているパターンが多いです。

基本的にはブラウザの中で活躍するのがJavascriptですが、最近ではnodejsという技術が台頭し、これまでPHPが担当していたサーバーの領域にも進出し始めています。

PHP - それはサーバーで動く

僕らが当たり前と思っている、ログインするシステムのWEBサイトはどうやって作ってると思いますか? すごく簡潔に書くと、各ユーザーが自分のログインIDとパスワードをサーバー側に送ると、それに応じて、各ユーザーに適切な画面を構築しては送信しています。

PHPというのは、まさにそうしたサーバー側の処理を担当する言語です。

ちなみにWordPressはPHPで作られています。 そのためWordPressで作られたブログは、一見すると動的な処理がなさそうであったとしても、アクセスするたびにWordPressはページを再構成して送信するようになっているのです。 (実際には毎回そうするのは無駄が多いので、それを効率的に回す仕組みを用意するのがセオリーです。)

その構成の際には、ベースとなるHTMLに必要な情報を埋め込むパターンもあれば、アクセスする人の属性によって全く別のページが表示されるようにするなど、できることの範囲が広いのが特徴です。

ただし、Javascriptのようにユーザー側のブラウザ上でグリグリと動かせるプラグラムは領域外です。

まとめ

HTMLとCSSだけでもWEBページは作れます。 しかし、アクセスする人によって表示する情報を変えたりするにはPHPのようなサーバーサイドで動くプログラムがあった方がいいし、GoogleMapのようなブラウザ上でユーザーが自由に動かせるプログラムを提供するならJavascriptが必要なんだな、ということが理解できれば十分です。

あとは実際にWordPressを使っているうちに勝手に覚えていくと思いますし、その方が圧倒的に身につくのも早いです。

次回はプラグインについてです。

home kanau.page

以上、今日はこれにて!

Some images are made by Freepik's icons from www.flaticon.com