ウェブサイト制作の基本

Pocket

ウェブサイトの作り方について初心者向けに解説します。

ウェブサイトを作るには、次の3つを用意する必要があります。

1、ウェブサイト用のファイル(HTML、CSSなど)
2、サーバー
3、ドメイン

まずは、1のウェブサイト用のファイル(HTML、CSSなど)について解説します。

 

<HTML, CSSについて>

まず、最初にウェブサイト用のファイルですが、これはウェブサイト(ホームページ)にのせたい内容を書いたファイルです。基本的には、HTMLとCSSという形式で書かれています。HTMLというのは、おおざっぱにいうと、どこで改行するのかとか、ここでリンクを張るとか、ここは見出し用として大きな文字にするとかの形式を記述します。みなさんの書きたい文章にこのHTMLを組み合わせて、ウェブサイトでよく見られる文章が出来上がるのですね。

一方、CSSは、ウェブサイトのデザインに特化した部分を記述します。例えば、タイトルの部分を赤色にするとか、2段組にするとかです。

通常は、構造を決めるHTMLとデザインを決めるCSSを分離して、2つのファイルを用意するが多いです。

HTML;サイトの構造を記述する。

CSS:サイトのデザインを記述する。

なぜこのように構造とデザインを記述する部分を分離するかというと、あとで改良したり、変更したりすることが楽だからです。

もし、サイトの構造部分(HTML)とデザイン部分(CSS)を分離しないと次のようなトラブルに見舞われます。例えば、たくさんページを作ってから、そのあとでデザインを変更しようとすると、もし分離していなければ、1ページ1ページすべてのページでデザインを変更しなければいけなくなります。

ところが、構造(HTML)とデザイン(CSS)を分離しておくと、たった1枚のCSSを書き換えるだけで、すべてのページのデザインを変更できます。大変に便利ですね(^^)

 

<クライアント側の言語(Javascript)> 

実は、HTMLとCSSだけだと、スライドショーなど動的な動きのあるウェブサイトが作れません。HTMLとCSSで作ることのできるのは、静的なウェブサイトだけなのです。また、ECサイト(アマゾンなどのショッピング)サイトでは、会員登録などの機能があります。これには、会員情報を登録しておくデータベースが必要になります。これも、HTMLとCSSだけではできません。

 

では、これらのスライドショーを扱ったり、会員情報を取り扱ったりするにはどうしたらよいでしょうか?

このためには、通常は次の手段が取られます。一つ目はJavascriptというプログラミング言語を使います。このJavascriptという言語は、クライアント側で動く言語で、サイトに動的な動きをつけることができます。

Javascriptはクライアント側といいましたが、これはどうゆう意味でしょうか?

ウェブサイトを見るとき、通常2つのコンピューターが関係してきます。つまり、ウェブサイトを提供している側(アマゾンや楽天などのホームページ)と、そのウェブサイトを見ている側(アマゾンや楽天のホームページをみて何かを買おうとしている人)です。ウェブサイトを提供している側のコンピューターを「サーバー」または「サーバーサイド(サーバー側)」といい、アマゾンや楽天の会社の中にあるウェブサイトのファイルが置いてあるコンピューター指します。

一方、ウェブサイトを見ている側(たとえば、アマゾンや楽天のホームページを見ている人)が使っている、端末(スマホやパソコンやタブレット)を「クライアント」「クライアントサイド(クライアント側)」といいます。

JavaScriptは、クライアント側で動く言語なのですね。(つまりホームページを見ている側のパソコンで動く言語)

<サーバー側の言語とクライアント側の言語の違い>

実は、WEB系の言語には、クライアント側でプログラミング言語と、サーバー側で動くプログラミング言語があります。

サーバー側で動く言語として有名なのはPHPです。通常はこのPHPにデータベース言語であるSQLを組み合わせることが多いです。まとめると、以下のようになります。

クライアント側の言語:JavaScript

サーバー側の言語:PHP, SQL(データベース)

では、クライアント側の言語とサーバー側の言語にはどのような違いがあるでしょうか?

まず、大きな違いは、当然ながらプログラムが動くコンピューターが違うということ出す。(クライアント側かサーバー側か)これはかなり大きな違いです。

 

まず、クライアント側の言語(JavaScript)の場合、良いのはプログラム自身がクライアント側で動くので、サーバーに負荷がかからないということです。これは、たくさんの人がウェブサイトに訪れたときに聞いてきます。クライアント側の言語であれば、たくさんの人が訪れても、プログラム自身はクライアント側で動くので、サーバーに負荷がかかりすぎてダウンするなどの危機的な事態を避けることができます。

 

ただ、クライアント側の言語(Javascript)の弱点としては、プログラムがクライアント側で動くので、ウェブサイトの訪問者に、プログラムの中身が丸見えであるということです。なので、会員登録や、データベースなどを扱ったりすることは基本的には難しいのです。一長一短ですね(^^)

 

一方、サーバー側の言語(PHPやSQL)などは、ちょうどこの逆になります。つまり、プログラムがサーバー側で動くので、たくさんの人が見に来ると、サーバーに負荷がかかります。ただ、プログラム自身が訪問者から隠されているので、データベースなどを用いて会員登録などのサービスを提供するには良いのです。データベースを扱う部分のプログラムがサイト訪問者に見られるのは、良くないですものね(^^;)

 

まとめると、クライアント側とサーバー側のプログラムがありますが、用途によって使い分けをする必要があるわけです。大抵は、ウェブサイトには、両方のクライアント側、サーバー側の言語が共存していることが多いです。

 

 

 

 

 

 

コメントは停止中です。