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



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

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

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

目次
  1. Web担当者が知っておくべきWeb&HTMLの基礎知識
  2. Webの仕組
  3. Webサイトの構造
  4. Web ページの基本的構造
  5. HTMLについて
  6. CSSについて
  7. JavaScriptについて
  8. まとめ

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

Webの仕組

webページが出るまで

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

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

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

web ページの読み込み時間

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

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

(例)著者のWebサイトのサーバー情報サーバー負荷率

Webサイトの構造

web サイトの構造例Webサイトの構造例

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

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

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

Web ページの基本的構造

codecamp-html-2

今画面に表示されているこのページもそうですが、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の基本構造"]

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

[/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 に携わらなったとしても、扱えるようになっておきたいスキルですよね。

未経験でも、現役エンジニアの手厚い指導が受けられるCodeCampのレッスン【無料体験】とは?

CodeCamp紹介動画

【CodeCampの無料体験】で知ることができる内容

  • 自分にあったプログラミング言語とは?
  • 初心者のための挫折しない学習の進め方

  • 独学よりも速く、確実にプログラミングを習得する方法

  • 満足度94.2%、現役エンジニアのマンツーマンレッスンとは?

  • CodeCampがプログラミング初心者から選ばれる理由

  • 未経験からエンジニア転職・フリーランスとして活躍するステップ

開催時間:毎日9時〜22時迄(所要時間40分)

PCとインターネットがあれば、日本全国どこからでも受講できます

CodeCampで学習できる言語・技術

HTML5, CSS3, JavaScript, JQuery, Photoshop, Illustrator, Bootstrap, PHP, MySQL, Ruby, Ruby on Rails, Swift, Android, Python, WordPress, Unity

HTML5, CSS3, JavaScript, JQuery, Photoshop, Illustrator, Bootstrap, PHP, MySQL, Ruby, Ruby on Rails, Swift, Android, Python, WordPress, Unity

CodeCampを無料で体験してみる
オシママサラ
この記事を書いた人
オシママサラ
\無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp