Webページが表示される仕組み

 

Webページが表示までの仕組みを

理解されているでしょうか?

 

ここは大変初心者向けですが、

理解していないと

大変なことになります。

 

社会人になったら

すぐに返せるという

 

なんの根拠もなく

奨学金を借りたとします。

 

f:id:koushi_web:20200518232011j:plain

 

そして、無事大学を卒業し、

中小企業に就職。

 

奨学金

20年間かけて返済する

生活が始まります。

 

給料は月収15

 

お金が全くたまらない。

 

f:id:koushi_web:20200525163701j:plain

 

家賃5万円に食費、

光熱費、スマホ代を入れると

 

生活がギリギリ……

 

毎月たった2万円の返済が

 

厳しすぎる

 

f:id:koushi_web:20200729005544j:plain

 

そんなある日、

 

断れずに会社の同僚と飲みに行ったため

 

奨学金を初めて滞納してしまう

 

f:id:koushi_web:20200729005845j:plain

 

日本学生支援機構から

電話がかかってきて

 

滞納分を来月に

支払うよう要求される。

 

f:id:koushi_web:20200525182032j:plain

 

もちろん払えるはずもなく

 

副業するしかないと思い、

 

深夜にコンビニのバイトを始める。

 

f:id:koushi_web:20200729010052j:plain

 

きついスケジュールで

体が悲鳴を上げ、

 

5ヶ月後に仕事を退職。

 

f:id:koushi_web:20200729010238j:plain

 

バイトをしても生活費しか稼げず

 

払いたくても払えない……

 

f:id:koushi_web:20200525172246j:plain

 

弁護士に相談すると、

自己破産するしかない

と言われ、

 

連帯保証人である親にまで

迷惑をかけ、

 

家族もろとも

破産へと追い込んでいきます。

 

f:id:koushi_web:20200518231201j:plain

 

そうならないためにも、

 

スキルをつけることで、

 

将来、お金に困らないために

勉強していかないといけません。

 

f:id:koushi_web:20200525162951j:plain

 

お金に余裕を持って

 

生きていけるようになり、

 

誰もが思い浮かぶ充実した生活が

できるようになります。

 

f:id:koushi_web:20200729011113j:plain

 

それではやっていきましょう!

 

 

  1 Webブラウザについて

 

Webブラウザとは、

Webサイトを閲覧するための

アプリケーションです。

 

例えば、

 

Internet Explorer

Safari

Google Chrome

Firefox

 

などは聞いたことが

あると思います。

 

これらが

Webブラウザ

です。

 

f:id:koushi_web:20200729011339j:plain

 

どのWebブラウザも、

Webサイトを閲覧することが

最も重要な機能

なっています。

 

より高速なWebページ表示や、

独自機能などを

開発することによって

 

他のアプリケーションと

覇権を争ってます。

 

f:id:koushi_web:20200729011513j:plain

 

それでは、

ブラウザが表示している

Webページについて

説明していきます。

 

 

  2 Webページの構成

 

Webページは、

リソースによって

構成されます。

 

リソースとは

 

HTML

CSS

JavaScript

その他リソースファイル(画像など)

 

4つのことを指します。

 

f:id:koushi_web:20200707220334j:plain

 

HTML

Webページにおける

文書を担当します。

 

Webページを表示する際、

HTMLが中心となって

構成されてます。

 

CSSJavaScript

リソースファイルも

HTMLによって

繋がっています。

 

f:id:koushi_web:20200729011830j:plain

 

CSS

Webページにおける

デザイン

担当します。

 

デザインとは

Webページのレイアウトや

色、背景、フォントの

ことです。

 

HTMLだけだと

普通の箇条書きになりますが、

 

CSSを適用させると

見た目がキレイに

デザインされます。

 

f:id:koushi_web:20200622171600j:plain

 

JavaScriptは、

ブラウザ上で使用できる

唯一のプログラミング言語です。

 

JavaScriptを使用すると、

HTMLCSS

動的に操作できる

ようになります。

 

マウスのクリックなどの

イベントに反応して、

 

ある情報を表示させたり

非表示にしたりといった

制御できることが

できます。

 

f:id:koushi_web:20200622163650j:plain

 

なお、HTMLCSSは、

プログラミング言語ではなく、

文書やデザインを

記載するための言語です。

 

その他のリソースファイルとして

代表的なものは、

画像ファイルです。

 

他にも、

動画ファイル、

フォントファイル、

Flashファイル

などがあります。

 

リソースファイルは

HTML内に埋め込むことで、

Webページの一部として

表示できます。

 

f:id:koushi_web:20200622163844j:plain

 

 

  3 Webページの表示

 

Webブラウザは

特定のWebページを表示する際、

下記のような流れで動作します。

 

指定のURLへアクセスし、

リソース

HTML, CSS,

JavaScript, 画像、動画など)

を取得します。

 

取得したHTML, CSS,

リソースを解析をします。

 

f:id:koushi_web:20200525170200j:plain

 

解析結果を基に、

 

文字や画像を適切に配置、

あるいは文字の大きさを

調整したり、

色をつけるなどして

 

Webページとして統合し、

表示します。

 

f:id:koushi_web:20200729012537j:plain

 

Chromeでは

Webページを表示した際、

 

右クリックで

「検証」

を選択すると、

f:id:koushi_web:20200729012839p:plain

 

表示しているWebページの

HTMLコードが表示されます。

 

ぜひ見てみてください。

 

Webページの本来の姿が見られます。

 

P.S.

 

プログラミングを

学びたいが

 

何をすればいいのか

わからない方や、

 

独学で勉強している方

に向けて、

 

Webサービスを作れる

までに必要だと思う

プログラミングの知識を、

 

LINE@で発信し

始めました!!

 

f:id:koushi_web:20200525173442j:plain

 

無料で登録できますので、

 

これから

プログラミングのスキルを

本気で

身に着けたい人、

 

大歓迎です!!

 

ぜひ、この機会に

登録してみてください!!

⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩

 

友だち追加

 

ここでやるかやらないかで、

将来後悔するかが決まります! 

 

f:id:koushi_web:20200525173854j:plain