「全力の静的サイトを作ってみた」の記事で、CSS、JavaScript、SVG、Canvas APIという言葉が出てきました。

今回はそのうちHTML、CSS、JavaScriptについての話です。普段見ているWebページは、裏側でこの3つが組み合わさって動いています。

HTML ― 文章の「意味」を決めるもの

一番の土台がHTMLです。日本語にすると「文書に目印をつける言語」。正式には「Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）」の略です。

HTMLは文章に「意味のラベル」を貼っています。実際のコードはこんな感じです。

<h1>今日の天気</h1>
<p>今日は晴れです。洗濯物が乾きそう。</p>
<a href="tenki.html">週間予報を見る</a>

<h1>で囲んだ部分は「これは見出しです」という意味になります。<p>は「段落」、<a>は「リンク」。文章そのものに、タグという目印を添えているだけです。

このコードをブラウザで開くと、こう表示されます。

見出しは大きく太字になり、リンクは青い下線つきの文字になる。これはブラウザの初期設定がそう決めているだけで、HTMLは「見出しです」「リンクです」と伝えただけです。色や大きさの指定は一切していません。

HTMLだけでもページは表示できます。文字は読めるし、リンクも押せる。ただ、それだけです。白い画面に黒い文字がずらっと並ぶ。文字の大きさも色もブラウザ任せ。

HTMLは「何が書いてあるか」だけを扱っています。「どう見せるか」は次のCSSの仕事です。

身近なところだと

メモ帳に文章を書いて保存すると、ただの文字の羅列です。HTMLはそこに「ここは見出し」「ここは段落」と仕切りを入れていくようなもの。仕切りが入ると、ブラウザは「見出しは大きく表示しよう」と判断できます。

CSS ― 「見た目」を決めるもの

日本語にすると「段階的にスタイルを指定する仕組み」。正式には「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。HTMLが貼った「意味のラベル」に対して、見た目の指定を加えています。

• 文字を大きくする、色を変える
• 背景に色をつける
• 行と行の間を広げて読みやすくする
• 写真や文章を横に並べる
• ボタンにマウスを乗せたとき、色がふわっと変わるようにする
• 要素がゆっくり現れるアニメーションをつける

今読んでいるこのページも、CSSで見た目を指定しています。文字が大きめで、行間が広くて、読みやすい。それはCSSの仕事です。

CSSを全部外すと、同じ文章でもブラウザの初期設定 ― 小さい文字がぎゅうぎゅうに詰まった画面 ― になります。中身は変わっていないのに、印象がまるで違う。CSSはそれくらい見た目に影響します。

「全力の静的サイト」にあった光る球体のアニメーション。あれも全部CSSだけで動いています。「3秒かけて大きくなる。3秒かけて戻る。それを繰り返す」という指定を書くだけで、プログラムなしにあの動きが出ます。

HTMLとCSSの関係

HTMLが「ここは見出しです」と意味を決める。CSSが「見出しは青い色で、大きい字で表示する」と見栄えを決める。2つで役割を分けています。

なぜ分けるのか。分けておくと、見た目だけ変えたいときにCSSだけ書き換えればいい。文章に手を入れなくていい。逆に文章を直すときも、見た目のことは気にせずHTMLだけ触ればいい。お互い独立しているから、片方だけの修正で済む場面が多いんです。

JavaScript ― 「操作への反応」を作るもの

HTMLで文章を書いて、CSSで見た目を整えた。ここまでで、きれいなページは作れます。でもそのページは「置いてあるだけ」です。何かを押しても、ページ全体を読み込み直さない限り中身は変わりません。

JavaScriptは、そのページに「反応する力」を持たせます。

• ボタンを押したら、表示内容を切り替える
• 入力欄に何も書かずに送信しようとしたら、「入力してください」と出す
• スクロールしてある位置まで来たら、要素をふわっと出す
• スライダーを動かすと、数値をリアルタイムに変える

共通しているのは「何かが起きたら、それに応じてページの一部を変える」という動きです。HTMLやCSSだけだと、こういう「もし〇〇したら△△する」という条件つきの変化は作れません。

「全力の静的サイト」で、ボタンを押すと箱の色や形がパッと切り替わるデモがありました。あれがJavaScriptの仕事です。「青のボタンが押された → 青い丸にする」「緑のボタンが押された → 緑の四角にする」と、押されたものに応じて表示を変えていました。

身近なところだと

通販サイトで「カートに入れる」を押したとき、ページが丸ごと切り替わらずに「追加しました」と小さく表示が出ること。あの裏でJavaScriptが動いています。ページ全体を読み込み直さず、必要な部分だけ書き換えている。

3つの役割を並べてみる

• HTML ― 文章の構造と意味を決める（骨組み）
• CSS ― 見た目を決める（色、大きさ、配置、アニメーション）
• JavaScript ― 操作に反応して、ページの一部を動的に変える

この3つが組み合わさって、普段見ているWebページはできています。3つ揃うことで「きれいで、使いやすくて、操作に反応するページ」になるんです。

まとめ

• HTMLは文章に「見出し」「段落」「リンク」などの意味を与える
• CSSはその文章に色・大きさ・配置などの見た目を加える
• JavaScriptは操作に応じてページの一部を変える力を持たせる
• 3つは役割が分かれていて、組み合わせて使う

Webページの中で「絵」を描く方法については、次の記事「Webページで絵を描く2つの方法 ― SVGとCanvas API」で書いています。