【WEBデザイン入門1】WEBサイトの基本的な仕組みを学ぼう

【WEBデザイン入門1】WEBサイトの基本的な仕組みを学ぼう

これからWEBデザインを学んでいく前に、インターネットやWEBについて少し学んでおきましょう。

1.インターネットとWEBの仕組み

インターネットとWEBの違いやその仕組みについて簡単に見ておきましょう。なんとなく理解できれば、その後の学習がスムーズです。

1-1.インターネットとは?

インターネットとは、世界中のコンピューター(パソコンやサーバーなど)を繋げる仕組みのことです。
今では当たり前ですが、ひと昔前は「世界中のコンピューターを繋げる」という仕組みは大発明でした。この大発明のおかげで私たちは、パソコンでインターネットに接続してWEBサイトを見たり、動画を見たり、チャットをすることができています。

1-2.WEBとは?

WEBとは、WWW(World Wide Web)の略で、インターネットを利用して、様々な情報(テキスト、音声、映像)をやり取りする仕組みです。
インターネットという仕組みの上に、WEBという仕組みが乗っかっているイメージです。インターネットにはWEBのほかにもメールやIP電話など、様々なサービスが乗っかっています。

1-3.WEBサイト・WEBページとは?

WEBページとは、テキストや画像などの情報をひとまとまりにしたページのことで、いくつかのWEBページを束ねたもののことをWEBサイトと呼びます。
あなたがネットサーフィンしてる時に見ているのがWEBサイトの中のWEBページにあたります。このサイトももちろんWEBサイトで、今見ているこのページがWEBページです。

 

2.WEBページが表示されるまでの仕組み

インターネットとWEBについてなんとなくわかったところで、WEBページがどうやってあなたのパソコンに表示されているのか、その仕組みを見ていきましょう。

2-1.URLとは?

URLはWEBサイトの住所のようなものです。現実世界に置き換えるとわかりやすいかもしれません。WEBサイトがマンションでWEBページがマンションの一室だとしたら、URLはマンションの住所のようなものです。
友達の家に遊びに行くには住所がわからないと辿りつきませんね。WEBの世界も同じで、住所(URL)がわからないと目的のWEBサイト(マンション)に辿りつくことはできません。

2-2.パソコンとサーバーのやり取りでWEBページが表示される

WEB上には無数のWEBサイトやWEBページがあり、その個数分URLが存在します。ではWEBサイトはどこにあるのでしょうか。実はWEBサイトはWEBサーバーと呼ばれるコンピューターに格納されています。
あるWEBサイトがあったとします。あなたのパソコンにそのWEBサイトのURLを入力すると、そのURLが紐づけられているサーバーに「情報をください!」と要求をだします。これをリクエストと呼びます。サーバーはリクエストに応答して、WEBページなどのなんらかの情報を返します。これをレスポンスと呼びます。そしてリクエストを送る側(つまりあなたのパソコンやスマートフォン)をWEBクライアントと呼び、レスポンスを返す側をWEBサーバーと呼びます。

WEBページが表示されるまでの仕組みは実は簡単で、「パソコンから要求(リクエスト)を送り、サーバーが応答(レスポンス)する。」これだけなのです。

2-3.WEBサイト・WEBページはブラウザで表示する

ブラウザとは?

ブラウザとは、InternetExplorerやGoogleChrome、firefoxやSafariなどのことです。ほとんどのパソコンに標準でインストールされていますね。
このブラウザにURLを打ち込んでサーバーへリクエストを送り、レスポンスで返したWEBページを閲覧します。基本的にWEBページはこのブラウザを通して閲覧します。

なんでわざわざブラウザで表示させる?

サーバーから返される情報はコンピューター言語(コードで書かれたプログラム)です。私たちが見ても、アルファベットと数字の羅列です。解読することも可能ですが、WEBサイトにアクセスするたびにそんなことをしていたらきりがありません。ブラウザはこのコンピューター言語を人間が閲覧できる形に変換して表示してくれます。あなたが無料で何気なく使っているブラウザは、実はとても画期的で凄いものなのです。

3.WEBサイトを作成し、公開するまでのおおまかな流れ

インターネット、WEB、WEBサイト、WEBページ、ブラウザと、WEBデザインを学ぶための基礎知識に少しだけ触れてきました。では実際にWEBサイトを作成してインターネット上に公開するまでの大まかな流れを見ていきましょう。

3-1.ページの内容を書きだし、HTMLでマークアップする

WEBページに掲載したい文章や画像をHTMLという言語で書いていきます。HTMLとはハイパーテキストマークアップランゲージの略で、「これがこのページのタイトルです」「これがこの記事の見出しです」のように、文章の意味合いをコンピューターに伝えるための言語です。HTMLでWEBページの骨格をつくっていきます。

テキストエディタで書きます。おすすめのテキストエディタは後ほどご紹介します。

3-2.CSSでページに色やデザインをつけていく

HTMLを書いていくのと同時に、CSSで装飾をつけていきます。CSSとはカスケーディングスタイルシートの略です。HTMLで書いた文章の文字色を変えたり、背景色を変えたり、文章の配置を調整したり、他にもいろいろなことがこのCSSで可能です。どんなにオシャレなWEBページも、HTMLとCSSは必ずといっていいほど使用されています。

CSSもHTMLと同様にテキストエディタで書きます。

3-3.サーバーを用意する

HTMLとCSSで作成したWEBページが出来上がったら、そのWEBぺージをサーバーにアップロードして皆が見れる状態にする必要があります。サーバーは自前で用意することもできますが、サーバー業者さんからレンタルサーバーを借りたほうが、安全で管理も簡単ですしなにより安くすみます。

月額500円~たくさんの種類があります。モダンコードではおすすめのレンタルサーバー業者さんについても解説します。

3-4.ドメインを取得する

ドメインとは、現実世界でいう住所のことです。ドメイン管理業者を通して好きなものを取得できます。すでに他の方に取得されているドメインは取得できません。ドメインを取得する時と、更新する時に料金がかかりますが、安いものは年間で数百円~。高いものでも数千円程度です。

日本語のドメインも取得することができます。このあたりも後ほど詳しく解説します。

3-5.サーバーとドメインを紐づける

用意したサーバーとドメインを紐づける作業が必要です。この紐づける作業を行うことで、取得したドメインにアクセスすると紐づけたサーバーの情報が閲覧できる状態になります。

3-6.サーバーにWEBサイトの情報をアップロードする

HTMLとCSSで作成したWEBページの情報をサーバーへアップロードします。アップロードするにはファイル転送ツールを使用します。ファイルを転送するツールを業界では「FTPソフト」と呼んでいます。

これで、ブラウザに取得したURLを入力すれば、あなたが紐づけたサーバーにアクセスし、サーバーにアップロードしたWEBページを閲覧できる状態になります。

WEBデザインカテゴリの最新記事