「キミ、今日からWebの担当ね」

PCは苦手だけど、突然こんなことを言われてWebの担当者になってしまった……そんな方はいらっしゃいませんか？

「なんかいろいろ調べて本とかあるらしいけど、なんかわけのわからない言葉ばかり……勉強するにしてもどこから始めていいのか……」

そんな方のために、今回Webサイトの大まかな仕組みについて記事を書きたいと思います。

Webサイトを作る上でのごくごく基本的なところとして、学習をはじめる前の参考にしてみてください。

一般的なWebサイトに必要な技術は、大きく分けると以下の3つです。

1. Webサイトの内容を表示する
2. Webサイトの見た目を整える
3. Webサイトを「使う」ためのプログラム

それぞれ具体的になにが使われているのか、見てみましょう。

 

 

Webサイトの内容を表示する

HTML（エイチティーエムエル）を使います。
ご存知な方もいらっしゃるかもしれませんね。

この文章を見てください。

 

 

 

今日のセール情報

1個100円のりんごが今なら半額

 
「今日のセール情報」が見出しで、その内容が「1個100円のりんごが〜」という文章ですね。

「今日のセール情報」の方が大きいので、見出しだということはなんとなくわかると思います。

 

しかしコンピュータ（特に検索エンジン）は、どちらが見出しでどちらが内容なのかわかりません。

 

わからないので、Yahoo!やGoogleの検索結果にも正しく反映されにくくなってしまいます。

検索結果に正しく反映されないと、せっかくWebサイトを作っても意味がありませんよね。

そのため、コンピュータが理解できるように、文章の内容とは別に意味付けをする必要があります。

この「意味」をコンピュータに教えてあげる命令が、HTMLです。

 

先程の文章にHTMLを適用すると、こうなります。

 

<h1>今日のセール情報</h1>

<p>1個100円のりんごが今なら半額</p>

 

見出しを「<h1>」と「</h1>」で囲い、本文を「<p>」と「</p>」で囲っていますね。

この囲っているものを「タグ」と呼びます。

 

これでコンピュータは、どちらが見出しでどちらが本文なのか判別することができます。

 

Webサイトではこのようにして、伝えたい文章の意味付けをコンピュータ向けに記しているのです。

HTMLの見た目を整える

文章の意味をコンピュータに伝えるためにHTMLを書いたら、次は見た目を整える必要があります。

 

もちろんこの時点で人間もコンピュータも文章の意味を理解することはできますが、これだけでは味気ないですよね。

そこで人間から見た外見を整えるために、「CSS（カスケーティングスタイルシート）」というものを使います。

 

制作者は皆「スタイルシート」と呼んでいます。

 

HTMLのタグや、後述する「Javascript」でも同じようなことは可能ですが、一般的にはスタイルシートを使って見た目を整えています。

 

Webサイトを「使う」ためのプログラム

Webサイトの内容と見た目を記すだけでも情報を伝えることはできます。

しかしホテルの予約やメールフォームでの問い合わせなど、利用者が何らかの形で使うWebサイトでは、HTMLとCSSだけでは足りません。

Web上でプログラムを動かす必要があります。

 

これは大きく分けて2種類あります。

• ブラウザで動くプログラム
• サーバで動くプログラム

ブラウザで動くプログラム

CSSだけではできない、動きのある装飾をする時にもよく使われます。

Javascript（ジャバスクリプト）がよく使われています。

 

当社Webサイトの右上にあるロゴマークにも使われています。

ロゴマークにマウスポインタを乗せてみてください。

ちょっとだけ大きくなりましたね。

このようにちょっとした仕掛けからもっと大掛かりなものにいたるまで、Webサイト制作の現場ではjavascriptが活躍しています。

 

サーバで動くプログラム

ブラウザからの指令をサーバ側で受け取って処理するプログラムです。

こうした「サーバで動くプログラム」を使用することで、顧客管理や予約システム、日記投稿等をすることができるようになります。

Yahoo!メールやFacebook、Googleカレンダー、ホテルや旅館の予約システム等々インターネット上でのあらゆるWebサービスは、こうしたプログラムで動いています。

 

こうしたプログラムのメジャーどころでは、以下の4つが主に知られています。

• PHP（ピーエイチピー）
• Perl（パール）
• Ruby（ルビ）
• Python（パイソン）

これらサーバで動くプログラムを習得するには少しだけ手間がかかりますが、どれか一つでも使えるようになれば、高度な機能を持ったWebサイトや仕組みを作ることが可能になります。

 

おわりに

いかがでしたでしょうか？

 

ここで挙げた技術以外にも、顧客データなど大量のデータを貯めておくデータベースや、ブラウザに埋め込んで使う「Flash（フラッシュ）」などもよく使われています。

 

Webサイト制作の勉強を始める前に、まずWebサイトがどのような仕組みなのか、ごくごく基本的なところを書いていきました。

 

次回は「Webサイト制作で必ず必要なもの」と題し、Webサイトを作る上で今回挙げた技術の他にどのようなものが必要なのかということを書いていきます。