画像、CSS、JavaScript、Flash、など。HTMLに協力してウェブページを構成するファイルたち。

ウェブサイトの構造。HTMLってなに？の続きです。

ウェブサイト・ウェブページを構成するベースとなるのが、HTMLと呼ばれる文書ファイルであることを話しました。
が、実際ほとんどのウェブサイトは文章だけで構成されているわけではありませんね。

どのサイトを見ても、そこには図版や写真などの画像ファイル、アニメーションや動画、場合によっては音声やゲームなどもありますね。
このブログなど、ほとんどテキストで構成されていますが、それでもfacebookのいいねボタンなど、全くゼロでもありません。

これらはさすがにHTMLのタグだけでは表現しきれません。
別に作ったファイルをHTMLの上に読み込むことで表現されています。

JPG、GIF、PNG。画像ファイル。

HTML以外に最も多用されるのは、やはり画像ファイルでしょう。画像ファイルはJPG、GIF、PNGの3形式が主流で、ウェブ上に存在する画像データはほとんどこのどれかでしょう。
それぞれに特徴、長所短所があるので、その画像で表現したい内容によって3形式を使い分けます。それぞれの特徴については別のエントリーで改めて説明したいと思います。

これらの画像をただ作っただけでは、ページの本体であるHTMLとの関連が分かりません。
画像は本文の内容を図で示したものだったり、商品の写真だったり、それぞれページの内容に関係したものであるので、特定の画像が特定の位置に表示されなければ意味がありません。

そこで登場するのが<img>タグです。
たとえば、HTML本文中にこんなことを書きます。

<p><img class="alignnone size-thumbnail wp-image-171" alt="247911_173186606076590_6207970_n" src="http://arigaria.com/wp/wp-content/uploads/2013/05/247911_173186606076590_6207970_n-150x150.jpg" width="150" height="150" /></p>
<p>Campagnolo Super Record</p>

これにより、<img>タグを書いた位置に、指定した画像が表示されるわけです。
「<img」の後に何やらたくさん文字が書き込まれていますが、これはどの画像を表示するのか、縦横どんなサイズで表示するのか、といった情報が書き込まれています。

実際の表示はこんな感じ。

Campagnolo Super Record

 FLASH、動画。

ファイルを呼び出すHTMLのタグが異なりますが、動画や音声、FLASHなどのファイルも、基本的な考え方は画像の場合と同じで、読み込ませたいファイルの名前と位置、サイズなどの情報をHTMLで記述します。

これをやることによってHTML自体に何か変化があるわけではありませんが、そのページをブラウザで見ると、指定した形にHTMLと画像、動画などが配置されて一つのページとして閲覧できます。

ちなみにFLASHというのは、もともとウェブ上でアニメーションを表現するために開発された技術ですが、次第に役割を増やしていって、単なるアニメーションではなく、ユーザのクリックやドラッグなどのアクションに対してリアクションを起こすような、インタラクティブ（双方向的）なことができるようになっています。FLASHのゲームなどがありますが、あんな感じですね。
ただし、HTMLの最新バージョン、HTML5においてはFLASHは規定されていませんし、iPhoneやiPadでは利用できなくなっています。
いずれは別の技術に代替されてなくなっていくと思われます。

CSS、JavaScript

そのほかにHTMLと関連してページを構成する重要なファイルとしては、CSSとJavaScriptがあります。

CSSというのはCascading Style Sheetsの略。
HTMLは文章そのものと、その文章構造をデータにしたものですが、それに対してCSSはブラウザで見た場合の「見た目」をどう表示するのか、といったことを書いておくファイルです。
HTMLの<h1>タグは「一番大きい見出し」という意味なので、CSSで特に見た目を指定しなければ<h1>に書いた文はやたら大きい文字で表示されます。
確かにこれでも十分ここが大見出しであることは伝わるからいいのですが、味も素っ気もありませんね。
大見出しはブルーの文字で、左にマークが入って、グレーの太い下線を付けたい、とか、見た目をいじりたいですね。
これらのデザイン指定はCSSの方に書いておくわけです。
Style Sheets、の意味はこれで理解できますね。文書構造はHTMLに任せて、そのスタイルを書いたシート、というわけです。

じゃあCascadingとはなんなのか。
辞書的な意味で調べると「（連鎖的につながったタイプの）滝みたいな」といった意味しか出てこないので理解できないわけですが、これはCSSのルールに、上位の取り決めは、細かい部分に特に指定がなければ細かいところにも適用される、という法則があるからです。上流の水がどんどん下の滝に流れていくイメージが言いたいんでしょう。

諸々の具体例はCSSの話をするところでいずれ。

JavaScriptというのは、ブラウザ上で動くプログラムです。HTMLが文書構造、CSSが見た目、そこに載っている画像や動画がJPG、GIF、PNG、FLASHなどという役割分担で、JavaScriptが担当するのはざっくり言うと「画面の動き」です。
例えばGoogle Calendarなど、予定をドラッグして時間や日付を変えたりできますが、こういう動きはJavaScriptでコントロールされています（それだけじゃないけど）。

それぞれについてはもう少し細かくいずれ書きますが、今日のところは、自分が見ているウェブページ一つとっても、実はいろいろなファイルが関わって構成されているんだな、とご理解いただけたら結構です。