WordPressでのブログ作成やウェブコンテンツに触れたことがあるならきっと耳にしたことがある4つの要素。
- HTML
- CSS
- PHP
- サーバー
「聞いたことはあるけど、具体的にそれぞれが何をしてるかは知らない」
「なんか大切なプログラム…でしょ？」
…とあまりこの手の話題に明るく無い方もきっといますよね。
そんな方のために当記事ではHTML、CSS、PHP、サーバーの4つの構成要素について初心者向けに解説していきます。
これからウェブに強くなりたい！という方でもわかりやすい内容になっていますので、是非とも読み進めて知識を付けてみてください。
はじめに：HTML・CSS・PHP・サーバーは「家」に置き換えて考える
それでは早速各要素について解説…といきたいところですが、いきなりシステムがどうこう言ってしまうと取っつきにくいですよね。
なのでまずは皆さんもよく知っている身近な「あるもの」に頭の中で置き換えてもらおうと思います。
そのあるものとは…
「家」です。ごく一般的な一軒家を思い浮かべてもらえばOK。
何故家に例えるかというと、各要素が以下のようにマッチするからです。
| webコンテンツの構成要素 | 家に置き換えた場合 |
|---|---|
| HTML | 壁、屋根 |
| CSS | 装飾、色 |
| PHP | 柱、骨組み |
| サーバー | 土地 |
サイト作りは建築作業だった…？
その通り！大雑把な考え方は建築です。
つまりは「土地（サーバー）」が無ければ「柱（PHP）」は建たない、柱が無ければ「壁（HTML）」が建たない、壁が無ければ「色（CSS）」は塗れない…という感じ。
ここまでは大まかなイメージを掴むことが大切なのでだいたいの想像ができれば大丈夫です！
この後本題の構成要素の詳細を順番に述べていきます。
HTMLとは？
HTML（HyperText Markup Language）とは、人間が文字を読みやすくするために用いられるマークアップ言語です。
今あなたが目にしているこの文章をスラスラ読めているのはHTMLが機能しているからなんです。
現存する世界中のサイトのほとんどに使用されている言語であり、サイトを作る上では外せない存在となっています。
家に当てはめてみると例えば「あれが僕の家だよ！」と言われて壁や屋根が無い家を紹介されたら「いやあれ家じゃないだろ…」と大半の方が思いますよね。
それと同様に人間がサイトとして認識できる最低限の条件として「文字が読める」要素を提供しているのがHTMLということになります。
しかし世の中には文字だけではなくオシャレな装飾が施されたサイトがたくさんありますよね。
続いてはそんなオシャレ要素を提供している「CSS」について説明していきます。
CSSとは？
CSS（Cascading Style Sheets）とは、サイト全体のレイアウトや文字の見た目を整えるために用いられる言語です。
一般的にはそのままCSS（シーエスエス）やスタイルシートと呼ばれることが多いです。
先に紹介したHTMLはあくまでただ文字を表示するだけに留まるため、HTML単体では文字のみで非常に地味なサイトが出来上がってしまいます。
そこにお洒落な装飾や枠線、綺麗なレイアウトを提供するのがCSSということになります。
他のサイトと差分を出したり個性を生み出せるのもCSSの強みです。家の話に戻るとさっきまで武骨だった外壁に色を付けたり花を飾ったりして彩った状態ですね。
大手サイトや一般的に使われているブログテーマにはほぼ必ずと言っていいほどCSSが導入されています。
またCSSは単体で使われません。必ず「HTML＋CSS」というセットで使われていることも覚えておきましょう。
PHPとは？
PHP（PHP: Hypertext Preprocessor）とは、動的なウェブページの生成、ブラウザとサーバ間のリクエストとレスポンスを行うプログラミング言語です。
4つの要素の中では最も理解が難しいので、2つの項目毎に分けて説明致します。
①「静的」と「動的」のウェブページの違い
まずはウェブサイトにおける「静的」「動的」について理解しましょう。
ウェブページは必ず「静的ページ」「動的ページ」のどちらかに分類されます。
それぞれの特徴は以下のようになっています。
- 静的ページ
誰がどのタイミングでアクセスしても必ず同じ内容が表示されるウェブページ。
HTMLに記述された内容をそのまま表示させているため、内部の処理はシンプル。
企業サイトの業務紹介ページなど見る人によって変化させる必要が無いページに用いられることが多い。
- 動的ページ
アクセスした人、タイミングによって表示される内容が変化するウェブページ。
動的ページを生成するためのプログラム（PHP）を介してウェブサーバーにあるデータベースを参照し、対象ページにアクセスされる度にその都度HTMLを作り出している。
主にネットショッピングサイトのマイページ、掲示板サイト、ブログなどのページに用いられている。
ネットショッピングのマイページなんかは人によってログイン情報や買い物カゴの中身等が違いますよね。
あの時まさにPHPが裏で動いてる状況で、対象者の情報をデータベースから探し出し即座に専用ページをHTMLにより作成した後ユーザーに表示…という手順を踏んでいます。
以上が静的、動的の説明ですがここまででまだ理解しにくいな…という方は
「いつ見ても同じ内容が表示されるのが静的ページ」
「見る度に違う内容が表示されるのが動的ページ」
と覚えて貰えばとりあえずはOKです！
②リクエストとレスポンスを行うプログラム
リンクをクリックすると当然対象のページが表示される…その際に行われているのが「リクエスト（要求）」と「レスポンス（応答）」。
そしてそのやりとりを行っているのがまさにPHPというプログラム。
これは人間に質問をしたら答えが返ってくるイメージです。
しかしコンピュータの世界では人間のように融通が利きません。
そのため専用のプログラムを用いてユーザー側からの要求に応えてもらう必要があるんです。
なのでPHPが無いとクリックしても何も反応してくれないし何も表示されず、ウェブコンテンツとして成り立ちません。
家でいう「柱」に該当すると言ったのはこのためです。
いくら壁、屋根、装飾が立派でも柱が無い家には住めない（住めるかもしれないけど家としてはまずい）…というわけです。
サーバーとは？
サーバーとは、サービスを提供する企業側のコンピュータのことを言います。
このサーバーは個人で所有することも可能ですが、稼働させるのに多大なコストがかかる、膨大な量のデータ管理…と維持が大変なので多くの場合は企業が所有しています。
WordPress等でブログを書いたことがある人なら「レンタルサーバー」という言葉を聞い事があるかと。
（以下は当サイトが契約するレンタルサーバー「エックスサーバー」）
レンタルサーバーとは、一般の方に対して企業側から貸し出すサーバーのことを言います。
レンタル代を支払い「サーバー契約」を結び、記事をアップロードしたりサイト情報を保存するのが目的です。
PHPで説明したリクエストとレスポンスを行うためにサーバーの確保は必須で、そもそもサーバーが無ければサイトの立ち上げは出来ません。
土地が無ければ家が建てられない…サーバーを「土地」と表現したのはこれが理由です。
まとめ：ウェブコンテンツの裏側を知ろう
以上がHTML、CSS、PHP、サーバーについての説明でした。
まとめとして各要素の特徴を再度載せておきます。
- HTML…人間が文字を読みやすくするためのマークアップ言語
- CSS…サイトを装飾する言語
- PHP…動的ウェブページを生成するプログラミング言語
- サーバー…ウェブコンテンツを保存するためのコンピュータ
ウェブコンテンツといっても幅が広いですが、ここで解説した4つの要素はあらゆるコンテンツで用いられているのは確かです。
この記事を機会に是非とも今後興味を持って頂けたら幸いです。
コメント