2025年12月3日 / WEBデザインTIPS

まずはここから！HTML・CSS・JavaScriptの役割りを理解しよう

※この記事は 1未満分程度でお読みいただけます。

WEBサイトをコーディングする際に使うプログラミング言語、HTML、CSS、JavaScript。WEBデザインを学ぶ時は、まずこの3つのプログラミング言語を学習するところからはじまります。

プログラミングに初めて挑戦する方のなかには、プログラミング言語という言葉に、難しそうで本当にできるようになるんだろうか、と感じる方もいらっしゃると思います。でも大丈夫です。この3つのプログラミング言語はとてもシンプルで、それぞれの役割りと基本をしっかり覚えれば、必ず使いこなせるようになります。

今回は、WEBデザインに必要なこの3つのプログラミング言語の役割りと基本を、記述例を紹介しながら解説していきます。理解しないまま何となく進めてしまっている方も、ぜひお読みください。

見た目はまったく関係なし！文書構造を伝える「HTML」

まずひとつめのHTML（HyperText Markup Language）は、ページの構造や内容を記述するためのプログラミング言語です。と書くと、少し難しく感じると思いますが、かんたんに言うとここにあるものは、こういうものですというのを示していく役割りです。

HTMLはページの文書的な構造だけを伝える役目

本や資料、レポートなどを思い浮かべてください。まず最初にページ（本）のタイトルがあります。次に章ごとに見出しがあります。さらに、小見出しがあることもあります。見出しの下には文章の段落が入ります。文章のあいだにリストが入ることもあれば、表やイラストや写真が入ることもあります。

これらを、ひとつひとつ決められたHTMLタグで囲っていってあげます。下記がHTMLの記述です。頭のなかで紙の文書を思い浮かべながら見ていただくと、分かりやすいかもしれません。

<h1>ページのタイトル</h1>

<p>文章の段落（リード文など）</p>

	<h2>1章の見出し</h2>

	<p>文章の段落（1章の見出しに対するもの）</p>

	<h2>2章の見出し</h2>

	<p>文章の段落（2章の見出しに対するもの）</p>

		<h3>2章の1つめの小見出し</h3>

		<p>文章の段落（2章の1つめの小見出しに対するもの）</p>

		<h3>2章の2つめの小見出し</h3>

		<ul>
			<li>リスト項目（2章の2つめの小見出しに対するもの）</li>
			<li>リスト項目（2章の2つめの小見出しに対するもの）</li>
			<li>リスト項目（2章の2つめの小見出しに対するもの）</li>
		</ul>

	<h2>3章の見出し</h2>

	<p>文章の段落（3章の見出しに対するもの）</p>

HTMLの基本的な役割りはこれだけです。たとえデザインされたページであっても、すべてのページにこの文書構造があります。これはこのページで主題になるタイトル（トップページの場合は企業名やサイト名）です、これはこのページの見出しです、これは見出しに対する文章の段落ですなど、ページごとにこれらの情報を記述していくのがHTMLの役割りです。

HTMLだけでも体裁が変わるのは「CSS」の仕業

HTMLで指定した内容は、すべてコンピューターに対しての情報です。特に、Googleなどの検索エンジンに、このページはこういった内容でできているという情報を正しく伝えるために記述します。これを正しく指定しながら記述していくことが、SEOにも影響を与えます。

よく勘違いされるのですが、HTMLではスタイルや体裁に関する指定はできません。HTMLのコーディングを練習していると、勝手に見出しの文字が大きくなったり、段落の下にスペースが空いたり、リストの行頭に中点（・）が付いたりします。実はこれはすべて、このあと解説するCSSでやっています。

WEBサイトを閲覧する各種ブラウザには、初期設定として基本のCSSが埋め込まれています（詳しくはこちら）。この指定が効いているので、一見HTMLだけでも体裁が変わったように見えるのですが、これはすべて初期設定のCSSが効いているだけです。HTMLは純粋に、ページの文書構造の情報だけを持っています。

もうひとつの役割りは「CSS」との橋渡し

HTMLには、もうひとつ大きな役割りがあります。それは、CSSとの橋渡しをする役割りです。WEBサイトをレイアウトする際には、先ほどの構造情報だけではどうにもならないことがあります。見出しと段落にまとめて背景を設定したい、この部分だけ文字の色を変えたいなど、さまざまなケースがあります。

そんなときに、一定の範囲をグループ化したり、CSSが指定できるように要素に名前をつけてあげたり、というのもHTMLで記述します。いわば、ページ全体の骨組みをつくるのがHTMLの役割りになります。

デザインはすべてまかせて！体裁は「CSS」の役割り

一方のCSS（Cascading Style Sheets）は、HTMLで記述した骨組みに対して、装飾をしていく役割りで使用します。文字の大きさや太さを変える、背景や罫線をつける、要素同士のスペースを空ける、横に2段組みにするなど、すべてCSSで設定します。

CSSは細かい指定の集合体

CSSには、サイズ、色、罫線、配置など、プロパティと呼ばれる多くの命令文が用意されています（詳しくはこちら）。これを、HTMLで定義した箇所（要素の種類や、つけた名前の部分）に対して指定していきます。この細かい指定を組み合わせて、ページのレイアウトを整えていきます。

下記がCSSの記述例です。ページのタイトル（h1）に対して、文字サイズ（font-size）、文字の太さ（font-weight）、要素の下の罫線（border-bottom）が指定されています。

h1 {
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid red;
}

あとからHTMLを書き換える「JavaScript」

最後は、JavaScriptです。HTMLはページの骨組みを、CSSはページの装飾を担当しました。JavaScriptは、ユーザーのアクションや状況に応じてHTMLを書き換えることが役割りになります。

HTMLを書き換えて画面を変化させる

通常、HTMLやCSSは、ページの閲覧中にコードが書き換わることはありません。見た目が変化することなく、動きのない静的なページとして表示されます（CSSで一部のアニメーションは可能です）。しかし、JavaScriptを使うと、本来書き換わることのないHTMLを、一時的に書き換えることができます。このHTMLの書き換えは、正しくはDOM操作（Document Object Model）と呼ばれます。

このHTMLの書き換えを行うことで、ユーザーのクリックにあわせて表示非表示を切り替える、スクロールをしたら画面に表示させる、クリックしたら枠線をつけるなどの、動的な表現が可能になります。JavaScriptで書き換えられるのはHTMLだけですが、HTMLに直接CSSを埋め込んだり、CSSと連動するようなHTMLの書き換えを行うことで、表示の切り替えやアニメーションを行うこともできます。

現在のWEBサイトは、ほとんどの場合、スマートフォンでの閲覧も考慮してつくられています。スマホでの表示の際に必ずといっていいほどあるのが、画面の上部に配置してあるメニューボタン（一般的にはハンバーガーメニュー）です。この開閉もほとんどの場合が、JavaScriptで動作させています。

jQueryなどの外部ライブラリを使用することで指定が簡単に

JavaScriptは、HTMLやCSSと比べてより本格的なプログラミング言語で、使い方が少し難しくなります。JavaScriptは、HTMLの書き換えだけでなく、データのやりとりや制御もできる、多機能なプログラミング言語で、できることはかなり広範囲です。

しかし、jQueryなどの外部ライブラリを利用することで、様々な指定をかんたんに行うことができます。外部ライブラリとは、JavaScriptの操作をかんたんにしてくれるJavaScriptのプログラムのことで、事前に外部ライブラリを読み込んでおくことで、それ以降のJavaScriptを、よりシンプルに、より便利に指定することができます。

また、JavaScriptのプラグインを使用することで、スライダーやモーダルウィンドウ、アニメーションなどの特定の機能を持ったパーツを、かんたんに設置することもできます。

以下が、外部ライブラリjQueryを利用した場合の、ボタン（.button）をクリックするごとに要素（.block）がスライドイン（スライドしながら表示）とスライドアウト（スライドしながら非表示）を繰り返す記述例です。CSSと同様に、JavaScriptも細かい命令文を組み合わせながら、指定をしていきます。

$('.button').on('click', function () {
	$('.block').slideToggle();
});

プログラミング言語自体の学習ハードルは高くない！

今回解説した、HTML、CSS、JavaScript。特に、HTMLとCSSに関しては、数あるプログラミング言語のなかでも、かなり習得しやすい部類に入ります。

HTMLはページ内で必要な要素を指定されたタグで囲っていくだけです（一部の例外もあります）。タグの種類が数多くありますが、実際に使うのは10～20種類程度なので、基本的なタグの使い方や指定方法をしっかり覚えれば、HTMLのコーディングは十分にできます。

CSSは記述例で紹介した通り、HTMLの適応させたい場所を指定して、細かなスタイルの命令文を組み合わせていくだけです。CSSプロパティの種類は多いですが、これも実際に使うのは20～30種類くらい。もし忘れてしまっても、一覧表などで確認しながら記述していけば問題ないです。

JavaScriptだけは、少し難易度があがりますが、外部ライブラリを上手に使うことで、基本的な動きであれば、シンプルに記述していくことができます。

あとは組み合わせを覚えるだけ

この3つのプログラミング言語の基本と役割りを理解したら、あとは3つの連動と組み合わせを覚えていくだけです。

CSSを指定するためのHTMLの書き方（HTMLとCSSの連動）
つくりたいレイアウトにするためのCSSの組み合わせ方（CSSプロパティの組み合わせ）
JavaScriptと連動させるためのHTMLとCSSの書き方（HTMLの書き換えとCSSの連動）

このあたりを繰り返し練習することで、WEBサイトのコーディングができるようになっていきます。

役割りを理解してシンプルで分かりやすくプログラミングしよう

理解せずになんとなく進めてしまいがちですが、この基本の理解はとても重要です。これをあいまいなまま進めてしまうと、コーディングの学習中に大きな壁にぶちあたったり、思い通りのレイアウトができなかったり、修正するときに何をしていいのか迷ったりすることが、必ずでてきます。

何事もまずは基本から。この3つのプログラミング言語の役割りをしっかりと理解して、今後の学習に役立てていってください。

いつでもご相談ください！

ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。

フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。

マツヤマヤスヒサ