HTML・CSS・JavaScriptは何が違う？小さなページで役割を知ろう

Web制作を始めると、HTML、CSS、JavaScriptという言葉が一度に出てくるよね。最初は内容を表す・見た目を整える・動きを付けるの三つに分けてみよう。

この記事では、見出しとボタンだけの小さなページを使って役割を確認する。サーバー契約や新しいアカウントは不要。ブラウザと、ファイルを編集するためのテキストエディターがあれば試せるよ。

HTMLは、文章と部品の意味を表す

HTMLは、見出し、段落、画像、リンクなどを「これは何か」と示すための書き方。たとえば、大きな見出しは次のように表せる。

<h1>はじめてのページ</h1>
<p>小さい作例から試してみよう。</p>

h1やpのような印はタグと呼ぶ。h1は見出し、pは段落を表す。単に文字を大きくする道具としてではなく、内容の意味や構造を伝えるために使うよ。

CSSは、色・大きさ・配置を指定する

CSSは、HTMLで表した部品の見た目を整えるための仕組み。

h1 {
  color: #62518c;
}

この例は、h1に当たる見出しの文字色を変える指定だよ。HTMLの文章を変えずに色や余白を調整できる。

JavaScriptは、操作に応じた処理を動かす

JavaScriptは、ボタンを押した回数を増やす、入力に応じて表示を切り替える、といった処理に使えるプログラミング言語。

三つは別の役割だけれど、一つのページで組み合わせて使う。実際のサイトでは、さらにデータを保存したり処理したりするサーバー側の仕組みが加わることもあるよ。

ボタンの作例を開いてみよう

3つの役割を試す作例を開いてみよう。

1. 「はじめてのページ」という見出しを確認する。これがHTMLで用意した内容。
2. 見出しが紫色になっていることを見る。CSSで色を指定している。
3. 「回数を増やす」を押す。「押した回数：0」が「押した回数：1」になれば、JavaScriptの処理が動いている。
4. もう一度押すと2になる。ページを再読み込みすると0へ戻る。

この作例は、回数をページの中だけで覚えている。アカウントやサーバーには保存していないので、再読み込みで戻るのは想定した動きだよ。ボタンを2回押して0→1→2になることと、再読み込みで0になることをブラウザで確認した。

ファイルを自分で編集したい場合は、作例のHTMLを保存し、テキストエディターで開いてみよう。まずは見出しの文章を一か所変え、保存してブラウザを再読み込みする。変更した文章が出れば成功だよ。

変わらないときは、順番に確認する

• 編集したファイルを保存したか。
• 開いているページが、いま編集したファイルか。
• ファイル名が.html.txtになっていないか。
• 括弧や引用符を途中で消していないか。

最初から他人のサイトや本番のファイルを書き換える必要はないよ。保存した作例のコピーで試し、元の作例に戻せるようにしておこう。

HTMLのボタンを詳しく知りたくなったら、buttonのtypeとフォームへ。文字サイズの単位はrem・em・pxの違いで一つずつ見ていこう。