【現在3000名】無料のフリーランスコミュニティ『東フリサロン』はこちらからどうぞ!

そもそもWebサイトって何?サイトが表示される仕組みを解説 – 図解で分かる!Webにまつわる基礎講座 vol.1

そもそもWebサイトって何?サイトが表示される仕組みを解説 – 図解で分かる!Webにまつわる基礎講座 vol.1
アルパカ
こんにちは、エンジニアブロガーのアルパカ(@engineeraru)です

まず簡単に自己紹介しておくと、ITコンサル企業でエンジニアとして5年働いた後に独立してフリーランスになりました。
趣味で始めたエンタメ系ブログ「アルパカタログ」はブログ開設から9ヶ月目で月間100万PVを達成し、今は主にブログ収入&受託仕事で生活しています。

初心者の方や未経験の方向けの分かりやすい解説が得意です!
30DAYSトライアルの解説記事で見てくださった方もいらっしゃるかもしれませんね↓

【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】解説まとめ #30DAYSトライアル

この連載では、駆け出しコーダーが実務優先で後回しにしがちなWebにまつわる基礎』を、初心者にも分かりやすい図解を使って解説していきます👍

連載初回のこの記事では、

  • そもそもWebサイトとは何か
  • Webページが表示されるまでの流れ
  • Webサイト制作に必要な道具

など基本的な事柄をお伝えします。

 

アルパカ
完全未経験の方や初学者の方は是非見てみてください

そもそもWebサイトって何?

アルパカ図解1

そもそもWebサイトとは何か?

簡単に言うと「Webページ」が集まったものです。

 

Webページとは

  • 今見ているこのページ
  • Googleの検索ページ
  • Amazonの商品ページ

など、普段ネットサーフィンをしていて見る画面のことです。

例えば、東京フリーランスのWebサイトは、各記事(Webページ)が集まって作られています。

 

この「Webページ」は

  1. HTMLファイル
  2. CSSファイル

という2つのテキストファイルから構成されています。

アルパカ
Webサイトを作るために「Webページ」について学んでいきましょう!

 

Webページを構成するHTMLファイルとCSSファイルの説明

アルパカ図解(HTML&CSS)

Webページを構成するのはHTMLファイルCSSファイル

それぞれ、書かれている中身や目的が異なります。

 

HTMLファイルとは?

HTMLファイルに書かれている内容は「Webページの文章と構造」です。

現在見ているこの記事の文章も、HTMLファイルに書かれています。

 

このHTMLファイルの目的は2つあります。

  1. ページを読んだ人に「文章」を伝える
  2. Webブラウザに「ページの構造」を伝える

簡単に言うと、Webページの骨組み(骨格)みたいなものだと考えればOKです。

アルパカ
このHTMLファイルがなきゃWebページは成り立ちません!

 

CSSファイルとは?

CSSファイルに書かれている内容は「Webページの見た目を変える情報」です。

例えば、文字を大きくしたり、文字色を変えたりする時に使われます。

CSSファイルを使うことでWebページのデザインを設定することができます。

「人に見やすいWebページ」を作るためには必須です。

 

まとめると、

  • Webページの文章を書く「HTMLファイル」
  • Webページの見た目を設定する「CSSファイル」

という2つのファイルが一緒になって、Webページが作られています。

 

Webページが表示されるまでの流れ

次に、Webページが表示されるまでの流れを説明します。

Webページを表示するためには「Webブラウザ」を使って「サーバ」から「データ」を持ってくる必要があります。

アルパカ図解(WEBページ表示までの流れ1)

WebブラウザとはWebページを見るためのソフトウェアです。

Webブラウザは複数の種類があり、Google Chrome、Safari、Internet Explorerなどが使われることが多いです。

 

Webページを見たい人(ユーザ)は、WebブラウザにWebページの「URL」(ネット上の住所)を入力します。

すると、Webブラウザは「サーバ」と呼ばれる他の人のコンピュータに情報を取りに行きます。

 

アルパカ図解(WEBページ表示までの流れ2)

サーバは、指定されたURLのデータ(HTMLファイルやCSSファイルの中身)をWebブラウザに渡します。

このデータはWebブラウザ用です。人間が見ても、どんな見た目になるのかわかりません。

そこでWebブラウザは、サーバからもらったデータを元に、人間に見える形(Webページの形)に変換して、画面に表示します。

 

以上のようにWebページが表示されるまでには

  1. Webブラウザは、サーバにデータを依頼する
  2. サーバは、Webページを表示するためのデータをWebブラウザに渡す
  3. Webブラウザは、もらったデータを人間に見えるように変換する

という処理が裏側では行われています。

 

Webサイト制作に必要な道具は2つ

アルパカ図解(WEB作成に必要な道具)

Webサイト(Webページ)を作るのに最低限必要な道具は2つだけです。

  1. テキストエディタ
  2. Webブラウザ

両方“無料”なので、初期費用0円でWebページを作り始めることが出来ます。

アルパカ
それぞれどんな道具か簡単に解説します

 

テキストエディタとは?

テキストエディタはWebページを「作る」のに使う道具です。

以下のような特徴を持っています

  • 文章を書くことに特化した
  • HTMLやCSSファイルの編集に使える
  • 開発を効率化するための機能がたくさんある

Webサイト制作時は、パソコンに元々入っている「メモ帳」ではなく、VisualStudioCode (通称:VSCode)、Sublime Text Editor、Atomなどのテキストエディタを使うことが多いです。

アルパカ
30DAYSトライアル1stでは、VSCodeを使うことをオススメしていますね!

 

Webブラウザとは?

WebブラウザはWebページを「見る」のに使う道具です。

以下のような特徴を持っています

  • Webページを表示する
  • HTMLやCSS等のデータを裏側で処理して人間に見える状態に変換する
  • Webページの修正を手助けする機能がある(一部のブラウザ)

主に、テキストエディタで作ったHTMLファイルやCSSファイルが「意図通りに表示されているか?」を確認するために使います。

 

有名なソフトウェアとしては、Google Chrome、Safari、Internet Explorer、Firefoxなどがあります。

Webサイト制作をする時には、修正の便利さから「Google Chrome」がよく使われています。

 

Webページ作成の流れ

アルパカ図解(WEBページ作成までの流れ)

Webページ作成の流れは以下の通りです。

  1. テキストエディタを使ってコーディングする
  2. WebブラウザでWebページを表示する
  3. 確認して修正する

 

まず、VSCodeなどのテキストエディタを使って、HTMLファイルとCSSファイルを編集します。

※ファイルを編集して、ソースコードを書くことを「コーディング」と言います

Webページの内容(文字)を書くためにHTMLファイルを編集し、見た目(デザイン)を作り込むためにCSSファイルを編集します。

 

次に、作成したHTMLファイルとCSSファイルを、Webブラウザを使ってパソコンの画面に表示します。

この時行うことは、Webページが意図通りに表示されているかの確認です。

 

Webブラウザで確認した後は、テキストエディタを使い、意図と異なる部分の修正を行います。

 

以上のように「修正→確認→修正→確認→…」という流れを繰り返し、修正するところがなくなったらWebページが完成です。

 

まとめ:Webサイト制作仕事の基本情報

Webサイト制作仕事の基本的な情報についてお伝えしました。

ポイントは以下の通りです

  • Webサイトは複数のWebページが集まってできている
  • WebページはHTMLファイルとCSSファイルで構成されている
  • Webページを作るのに必要な道具はテキストエディタとWebブラウザ
アルパカ
次回は、もう少し技術的なことを図解していきます。お楽しみに!

LINE@にて限定情報公開中!

CTA-IMAGE 『転職したい!』 『理想的なライフスタイルを実現したい!』 『フリーランスになりたい!』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE@限定「最短でプログラマーになるための転職ロードマップ」も確認できます!

効率の良い勉強法カテゴリの最新記事