HTML・CSS・JavaScriptの役割

HTMLで見出しと段落を作る

花屋の紹介ページに「こもれび花店」という店名と、短い紹介文を載せるとします。店名を見出し、紹介文を段落としてHTMLで書くと、次のようになります。

<h1>こもれび花店</h1>
<p>季節の花を紹介する、練習用のページです。</p>

h1はページの主な見出し、pは段落を表す記号です。<h1>と</h1>で店名を囲むと、その文字を見出しとして扱うようブラウザーへ伝えられます。SafariやChromeなど、ホームページを見るアプリをブラウザーと呼びます。

このようにコンピューターが読める形で書いた記述を、コードと呼びます。店名を変える場合は、HTMLの「こもれび花店」という文字を変更します。

CSSで色や大きさを指定する

この店名を緑色で表示したい場合は、CSSを使います。次の記述は、HTMLでh1とした見出しの文字色を指定するものです。

h1 { color: #245a46; }

この例の#245a46は緑色を表す値です。店名そのものは同じまま、この色の指定を変えれば文字色が変わります。CSSでは色のほかに、文字の大きさ、行間、余白、写真の配置なども指定できます。

JavaScriptで表示を切り替える

花束のサイズを選ぶと説明が切り替わるページなら、JavaScriptの出番です。「大」を選んだときは大きな花束、「小」を選んだときは小さな花束の説明を表示する、といった処理を書けます。

HTMLが文章や選択欄を用意し、CSSがその見た目を整え、JavaScriptが選ばれた内容に応じて表示を変える、という役割分担です。JavaScriptは、このようにコンピューターに行わせる処理を書くプログラミング言語です。

リンクを押して別のページへ移動する機能は、HTMLに備わっています。店名、紹介文、写真を載せるだけのページなら、HTMLとCSSで作れます。

コードの変更を画面で確かめる

役割の違いを確かめるには、同じページの文字と色を一つずつ変えてみましょう。まずHTMLの店名を書き換え、ファイルを保存してブラウザーで再読み込みします。表示する内容が変わったら、次はCSSで文字色を変え、同じ手順で見た目を確かめます。

一か所ずつ変えると、どの記述が画面のどこに反映されるかを確かめられます。ファイルの用意から行う手順は、関連記事の「HTMLで1ページ作ってみよう」に載せています。