更新日: 2017年3月14日
公開日: 2016年2月16日

HTML初心者必見！Webページの仕組みをわかりやすく説明！

国内のインターネット・ユーザーは1億18万人と言われ、公私ともにインターネットに関する知識が必要とされています。
また万国共通の HTML、CSS、JavaScript の技術習得は、英語と匹敵するぐらいのインパクトがあると言われていますので、今知識が必要な方もそうでない方も、Web & HTML の基本を押さえておきませんか？

こちらの記事も人気です！

Web担当者が知っておくべきWeb＆HTMLの基礎知識
Webの仕組
Webサイトの構造
Web ページの基本的構造
HTMLについて
CSSについて
JavaScriptについて
まとめ

Web担当者が知っておくべきWeb＆HTMLの基礎知識

Webの仕組

普段何気なく使っているインターネットのWebページが表示されるまでの基本的な流れを改めて確認しておきたいと思います。

パソコンやスマホでインターネットへ接続するブラウザ （Google クロームや Safari、Microsoft Edge など）を起動し、見たいページへアクセスします（URL の指定）。見たい Web ページのドメイン IP アドレスの取得作業がDNS サーバーを使って行われます。
DNSサーバーからIP アドレスが送られてきました。
ブラウザが自動で見たいWebページのサーバーへアクセスします。
サーバー内のIPアドレスと確認が取れれば接続完了です。
接続が完了されると見たいWebページのHTMLファイルを要求します。
要求されたHTMLファイルがサーバーから送られてきます。
HTMLファイルを受け取り、ブラウザ処理によってパソコンもしくはスマホ上に見たかったWebページが表示されます。

1枚のWebページを見るために、なんだか複雑な処理が行われているように思うかもしれませんが、①から⑦までにかかる時間はCode部の場合2.37秒となっています。PCで閲覧中の方は、ブラウザ上で右クリック→検証→Networkで確認してみてください。

WordPressなどで用いられているPHPやRuby、Node,jsなどのバックエンド・プログラムは、⑤と⑥の間でサーバー内でスクリプトが実行されて、⑥内のHTMLファイルに処理結果が記述されて送信されます。

実際にWebサイトを管理しないといけなくなった場合、DNS情報についてはドメイン管理画面から確認できます。サーバー情報についてはご契約先のレンタルサーバー・管理画面にアクセスすると、どれぐらい⑤の要求量があるか、どれぐらいデータを送信しているかなど確認することができます。この時、サーバーへの負荷率を見ておかないと「ページにアクセスしにくい」「表示までに時間がかかる」といった不具合の原因となります。

（例）著者のWebサイトのサーバー情報

Webサイトの構造

Webサイトの構造例

Webサイト及びWebページの作成・編集を行うときは、WebサイトとWebページのそれぞれの構造を理解しておくことが求められます。

Web サイト／Webページの集合体、サイトマップでWebサイトの全体像が把握できます
Web ページ／1つ1つのHTMLファイル、Webサイトの1部分

Webサイトについては、レンタルサーバーから各ディレクトリを確認できますし、サイトマップから各HTMLファイルを把握することができます。またWordPressのようなコンテンツ・マネジメント方式の場合は、データベースにアクセスして各ディレクトリをチェックします。
実務面ではどちらかというと Web ページに関する知識の方が必要と考えますので、少し掘り下げて Web ページの構造を見ていきたいと思います。

Web ページの基本的構造

今画面に表示されているこのページもそうですが、WebページはHTMLとCSS、JavaScriptによって作られています。HTMLはWebページの大元、中身を記述しています。
CSSはWebページのレイアウトをつかさどっております。
そしてJavaScript はサイトの動的な動きを扱っています。

HTMLについて

最近では Web ページの作成ツールが発達し、HTML を知らなくてもそれなりの Web ページが作成できるようになってきました。しかし、全部のWeb 作成ツールに便利な HTML タグすべてが用意されている訳ではありません。

HTMLタグについては、以下のブログに知っておくと便利なHTMLタグをまとめていますので、参考にしてみてください。 ☛　初心者ブロガーが知っておくと便利なHTMLタグ20選

HTMLは、他人のファッションを真似したり、レストランの料理を真似するよりも簡単で、ブラウザ上で右クリック（PC）ソースを表示とすると、見ているWebページのHTMLコードを確認することができます。
HTML コードを見るときは、以下のような HTML の基本構造を理解しておくと解読が速くなると思います。

[code title="HTMLの基本構造"]

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset=   "UTF-8"&gt;
&lt;title&gt;ブラウザタブに表示されます&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
文章の内容
&lt;/body&gt;
&lt;/html&gt;

[/code]

CSSについて

CSSの例

CSS（Cascading Style Sheets）を一言でいうと「装飾」で、CSS 次第で Web ページの印象は大きく変わる重要なポイントになります。CSS の基礎については過去のブログから学ぶとして、Web 担当者が知っておいた方がいいことは、Google デベロッパーツールの活用です。多くの場合、ゼロから CSS を構築するケースは少なく、既存の CSS を修正もしくは追加することによって Web ページの装飾を変更していきます。
参考／プログラミング初心者必見！Chrome デベロッパーツール便利機能まとめ

JavaScriptについて

JavaScriptのコード例

JavaScript を使うことによって、Web ページに動きを付けたり、アクセス解析することができます。当ブログ内のいいね! ボタンも JavaScript によってカウントされています。また JavaScript が理解できると突然襲ってくる Web ページ内の潜在的エラー（Console）を解明することができます。ただし、JavaScript はプログラミング言語になり、コード内にミスがあれば JavaScript は機能しなくなる、という特徴もあります。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

いかがでしたでしょうか？Webというのは、どうしても物理的にサーバーやWebページを目にすることがないので、CSSとかJavaScriptとか、サーバーとかイメージしにくいかもしれませんが、継続して作業する中で慣れてくるケースがほとんどです。
HTMLや CSS、JavaScript に関する知識・技術は世界中どこでも通用しますので、仕事で Web に携わらなったとしても、扱えるようになっておきたいスキルですよね。