【HTMLとCSSだけじゃない!?】Webページを構成する３つの要素

Webページは大きく分けて３つの要素で構成されています

ここでは、基本的な位置付けや組み合わせを紹介していきます

Webを構築する３要素

HTML（マークアップ言語）

HTMLはHyper Text Markup Languageの略でWebページを作成するために開発された言語です。ハイパーテキストとはハイパーリンクを埋め込むことができる高機能なテキストです。ハイパーリンクとは、Webページで下線のついたテキストなどをクリックすると別ページへ移動するリンクのことです。つまり Webページから別のWebページにリンクを貼ったり、Webページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。

CSS（スタイルシート言語）

CSSはCascading Style Sheetsの略でWebページのスタイルを指定するための言語です。スタイルシートとは、構造化文書などにおける表示形式を制御する仕組みで、見栄えと構造を分離すると言う目的で提唱されました。

JavaScript（プログラミング言語）

ユーザー側のWebブラウザと、WebサイトまたはWebサービスの相互間のやりとりを、円滑にするために使われます。

それぞれの構成要素の位置付け

HTMLは構造化を決定する

文章を解析し『ここは見出し、ここは本文、そしてここに写真を貼り付け』といった構造化をするのがHTMLの役割です。

CSSは装飾を担当する

HTML（生原稿）を見て、内容を読み取りやすいものにしていこうかと考えるのがCSSの仕事です。HTMLが刺身だといった素材でCSSが醤油といいた調味料みたいなもので、生で刺身を食べることができることだが醤油をつけた方が美味しい、しかし醤油単体で飲む人はいないですから、CSSでは単独では成立しません

JavaScriptは一度出来上がったページを変化させる

HTMLの上で動くプログラム環境だったりブラウザから飛び出したWindowsの上で直接動いたりします。塗り絵で考えてみるとHTMLというのは買ってきたばかりの塗り絵帳で、何かのアニメのキャラクターが線だけで描かれています。ここに色を塗ってくのがCSSによる指定です。髪の毛を黄色で塗り、服を赤く塗って、主人公のロボットを青と赤と白で塗るわけです。JavaScriptは、一度黄色く塗った髪の毛を黒く塗り直したり、場合によっては、味方のロボットを消して、敵のロボットを描き出したりする。その敵ロボットを色鉛筆を先でつつくと派手な音を出して爆発するかもしれません

HTMLとCSSとJavaScriptの組み合わせ

HTML

生のHTMLは、何の装飾もないただ構造だけ決定したものになる

HTML＋CSS

デザインされたWebページで世界に存在する半分以上のWebページがこの状態になる

HTML＋JavaScript

HTMLの内容を操作の対象として動作します

HTML＋CSS＋JavaScrip

JacaScriptはCSSを操作の対象として動作します。例えば、一般紙向けに見出しは大きな文字で黒文字に白抜き文字と指定してきたものmp、スポーツ新聞に青バックに巨大な文字、しかも赤枠のついた黄色のフォントに帰るといったことができます。ページの背景の色を変える、フォントのサイズを帰るといったCSSで指定捨要素を動的に変化させることができます