もうすっかりおなじみとなった「れーとーびーむの作り方」シリーズ！ 拍手！！！
え、なってない？
何はともあれ、今回もはっじまっるよー☆
……俺がWEBサイト「れーとーびーむ」（の新サイト）を作り始めてから、だいたい1年になる。
「れーとーびーむの作り方」では、この間の俺の経験と知識と努力の跡をみなさんにお届けしたいと思っている。
今回は初歩中の初歩、WEBページの根幹であるHTMLとゆかいな仲間たちについて説明するよ。
これらがなければWEBページじゃない、というよりWEBページとはこれらによって成り立っているのだ！
HTMLとCSSとJavaScript、なんとなく「WEBの三要素」とでも呼びたくなってくるなあ！
WEBページの仕組み
WEBページのアドレス（URL）は主に http:// で始まり、しばしば .html で終わるが、これは拡張子 .html のファイルにアクセスしているということ。
PCのフォルダにあるファイルを開くのと、仕組み的には同じだ。
この .html ファイルこそがHTMLであり、WEBページの正体だ。
HTMLはプレーンテキスト（単なる文字列）で記述され、「メモ帳」などのテキストエディタで編集できる。
HTMLはマークアップ言語であり、一定の文法で記述することで、本文の表示、画像などの読み込み、メタデータの設定などを担っている。
その中で、本文のスタイル（見た目）を司るCSS、WEBページの動作を制御するJavaScriptなども読み込んでいる。
つまり、まずHTMLがあり、そこに含まれたり呼び出されたりする形でCSSやJavaScriptが存在しているわけだ。
静的なページと動的なページ
HTMLは単なるテキストなので、それ単体ではプログラム的な動作をすることはできない。
しかし、ご存じのとおり世の中には、同じURLでもアクセスするたびに表示が変わるページがたくさんある。
たとえばTwitterもそうだし、このブログもそうだ。
そういうページはいちいち誰かが更新しているわけではもちろんない。
サーバー側のプログラムによってHTMLが生成され、アクセスした人に表示させているのだ。
このようにプログラムによって、HTMLファイルを用意せずに、もしくはHTMLファイルを改変して、生成されたページを「動的なページ」を呼ぶ。
一方、動的でないページを「静的なページ」と呼ぶ。
動的なページの生成方法は、このブログで使用しているPHP、メインサイトで使用しているSSI、掲示板などで使用されるCGI、サーバー側での対応が不要なクライアント側で動作するJavaScriptなどがある。
HTMLとは
HTMLはHyperText Markup Languageの略で、日本語では「ハイパーテキストマークアップ言語」……って、ほぼそのままじゃん！
ハイパーテキストとは、他の文書への言及・関連付け（ハイパーリンク、単にリンクとも）を設定できる文書のことだ。
マークアップとは、文書の構造や見栄えを明確に表現することを意味する。
もともとは、学術論文的なものを記述するためのフォーマットとして策定されたらしい。
< で始まり > で終わる「タグ」を使って文書構造を構成し、タグで囲まれた部分（要素）に意味を付けていくという様式になっている。
ハイパーリンクは単純に別のページに移動するためだけではなく、スタイルシートやスクリプトのような外部リソースを読み込んだり、前後や親のページを指定したりといった役割がある。
CSSの役割
CSSはCascading Style Sheetsの略で、日本語では……そのままだしやめよう……
カスケーディングとは、効果を重ね合わせることを指す。
スタイルシートとは、マークアップ言語の表示を制御する仕組みのことである。
現在の仕様では、純粋なHTMLのみで文書を記述すると、ただの文字や画像がびっしりと並んでいるだけで、WEBページとしての表現をなしえない。
文字に色を付けたり、文字の大きさを変えたり、要素をボックスに入れて配置したりといったことは、スタイルシートによって行う。
CSSは、そんなスタイルシートの一種だ。
CSSはHTML中に書かれたりHTMLから呼び出されるだけでなく、ブラウザに標準的なCSSが設定されているほか、ユーザー独自のCSSによってそれらを上書きすることもできる。
このブログに設定されているCSSを完全に無効にしてこのページを表示してみると、以下の画像のようになる（Windows版Firefoxを使用）。
画像を表示できないみたい。
ほら、CSSの重要性がわかるだろう。
また、使用するCSSを切り替えることで、ページを表示を全く異なったものにすることができる。
これは、HTML（構造）とCSS（表現）を分離することによって可能となった。
JavaScriptの役割
JavaScriptは、WEBサイトにおいてHTMLやCSSにはできない様々な処理・機能を実現するスクリプト言語だ。
このサイトにおいては、ページ右下の矢印ボタン（ページトップに戻る）の機能や、PC向け上部メニューの「動きのあるデザイン」の補助（基礎はCSSで実装）、スマホ向けのメニューボタンの機能などにJavaScriptを使用している。
ちなみに、JavaScriptはHTMLとともに読み込まれるが、実行されるのは基本的にHTMLの読み込み完了後である。
よって、JavaScriptによりHTMLを変更した場合でも、「ページのソース」には反映されない。
jQueryでJavaScriptを使ってみよう
JavaScriptはソフトウェアを作れるほどの高度な言語であるので、HTMLやCSSと比べるとかなり複雑で難解だったりもする。
そこで、WEBサイトで使用するJavaScriptを比較的簡単に記述できる便利なライブラリが提供されている。
このサイトで利用しているのは「jQuery」というライブラリだ。
jQueryはオープンソースのプロジェクトで、大手を始め多くのサイトで使われており、WordPressやIBM、Mozillaなどがスポンサーになっていたり、Googleがホスティングしていたりと、WEB界では有力なライブラリだ。
まあ詳しいところはググってもらおう。
jQuery自体はJavaScriptで記述されており、ファイルサイズは100キロバイト未満である（これが小さいか大きいかは各自判断するように）。
そしてWEB開発者は、jQueryの様式に沿って独自のJavaScriptを記述する。
独自のJavaScriptはjQueryを通して実行されるので、パフォーマンスは多少低下するが、さまざまな機能をより簡単な記述で実現できるようになる。
このようなライブラリを利用することで、JavaScriptを簡単に使えるようになるだけでなく、ブラウザ間で微妙に異なったりする実装の差異を埋めてくれるなどのメリットもある。
他にもいろいろなライブラリがあるので、好みに合ったものを導入すればいい。
俺がjQueryを選んだのは、利用者が多く情報も多いからだ。
そんなわけで俺はjQueryを利用してJavaScriptを書いているため、jQueryのことはある程度わかるけど、生JavaScriptは実はよくわからないよ！
まとめ
今回は、WEBページを構成する基本的な要素、HTMLとCSSとJavaScriptについて大雑把に説明してみた。
このブログにおいて、こんな基礎的な内容を説明する必要なんてあるのか？
こんなことくらい、ググればもっとわかりやすく書いてるサイトなんていっぱいあるんじゃないのか？
俺も最近はそういう感じがしてきたよ……
これからもっと応用的なこと、実用的なことを紹介していこうかな。
このサイトを作るにあたり、いろいろググったりしてやり方を学んだわけだけど、どこにも書いて無くて結局俺が自力でなんとかしたこともある。
そういうのはどこにもないオンリーワンの情報だから、誰かの役に立つかもしれない。
……需要がないかもしれないがｗｗｗｗｗ
このサイトのPC向けメニューのメニュー項目にマウスオーバーしたときに、ぬるっと現れてぬるっと移動する赤い下線とか、需要あるかね？
まあ興味あるって人は気長に待ってて！
もしくは「れいぶろぐのここが知りたいよー」って俺に催促すれば、記事を書く可能性が30倍くらいにアップするかも。
というわけで、次回をお楽しみに！
こめんと