HTML、CSS、JavaScriptはWebページを作成するために使われる3つの主要な技術です。それぞれの役割を初心者向けに説明します。
Webページ全体を１つの家に例えると、HTMLは家の骨格です。部屋の配置や大きさ、窓やドアの位置など、家の基本構造を決める役割があります。
CSSは、インテリアデザイナーのような役割があります。家具の配置や壁の色、照明など、部屋の雰囲気を整える役割があります。
JavaScriptは、家の家電や設備のような役割があります。エアコンの操作や照明の調整、テレビのリモコンなど、快適な生活をサポートする機能を提供します。
このページでは、HTMLやCSS,JavaScriptという単語を初めて聞いた方でも理解できるようにそれぞれの役割や違いをわかりやすく３分で解説します。
Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。
HTMLとCSSとJavaScriptの違いと役割
HTML、CSS、JavaScriptはWebページを作成するために使われる3つの主要な技術です。
基本的にはこれらの３要素で１つのWebページが構成されることが普通。
中には、HTMLのみを用いてページを構成している場合もありますが、基本的には上記の３つ（HTMLとCSSとJavaScript）で１セットだと理解しておきましょう。
HTML、CSS、JavaScriptの役割とその違いについては本文冒頭で述べた通り。ここではそれぞれの特徴と役割を少しだけ詳細に解説していきます。
HTML（HyperText Markup Language）
HTML（HyperText Markup Language）は、Webページの基本構造や内容を記述するマークアップ言語です。HTMLは、タグと呼ばれる特殊な印を使って、文章、画像、リンクなどの要素を配置します。
参考 マークアップ言語とは？
例えば、人形の家を作るときに、壁や窓、ドアの位置を決めるような感じです。
以下に、簡単なHTMLのサンプルコードを示します。
<!DOCTYPE html> <html> <head> <title>私のウェブサイト</title> </head> <body> <h1>こんにちは！</h1> <p>これは私のウェブサイトです。</p> <img src="https://it-biz.online/wp-content/uploads/2023/04/dog.png" alt="かわいい犬"> <a href="https://example.com">ここをクリックしてください。</a> </body> </html>
ものすごく見た目はシンプルですが、とりあえずブラウザで開けば↑のように１つのページとして成立しました。
HTMLの基本は、このようなタグを使ってウェブページの構造を作ることです。タグの種類や使い方を覚えることで、自分だけのウェブページを作ることができます。
参考 HTMLとは？
CSS（Cascading Style Sheets）
CSSは、ウェブページの見た目を整えるための言語です。文字の色や大きさ、背景の色などを設定し、ウェブページをより魅力的に見せることができます。
参考 CSSとは？
例えば、人形の家を作るときに、壁紙の色や家具の配置を決めるような感じです。以下に、簡単なCSSのサンプルコードを示します。
7行目～24行目が該当します。
<!DOCTYPE html>
<html>
<head>
<title>私のウェブサイト</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 16px;
color: darkgreen;
}
img {
width: 200px;
height: auto;
}
</style>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私のウェブサイトです。</p>
<img src="https://it-biz.online/wp-content/uploads/2023/04/dog.png" alt="かわいい犬">
<a href="https://example.com">ここをクリックしてください。</a>
</body>
</html>
CSSの基本は、このようにWebページの見た目を設定することです。色やサイズなどのスタイルを覚えることで、自分だけのデザインを作ることができます。
WebページにCSSを適用するには、HTMLファイル内の<head>要素内に<style>タグを使ってCSSのコードを書くか、別のCSSファイルを作成して、HTMLファイルからリンクして読み込むことができます。
JavaScript
JavaScriptは、Webページに動きやインタラクティブな要素を追加するためのプログラミング言語です。例えば、ボタンをクリックすると表示が変わる機能や、リアルタイムで情報を更新する機能などがあります。
家を作るときに、電気のスイッチや家電を設置していくような感じです。
以下に、先ほどのHTMLファイルにJavaScriptのサンプルコードを追加します。このサンプルでは、ボタンをクリックすると見出しのテキストが変わる機能を実装します。
<!DOCTYPE html>
<html>
<head>
<title>私のウェブサイト</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 16px;
color: darkgreen;
}
img {
width: 200px;
height: auto;
}
</style>
</head>
<body>
<h1 id="myTitle">こんにちは！</h1>
<p>これは私のウェブサイトです。</p>
<img src="https://it-biz.online/wp-content/uploads/2023/04/dog.png" alt="かわいい犬">
<a href="https://example.com">ここをクリックしてください。</a>
<br>
<button onclick="changeTitle()">ボタンをクリックして見出しを変える</button>
<script>
function changeTitle() {
document.getElementById("myTitle").innerHTML = "見出しが変わりました！";
}
</script>
</body>
</html>
ボタンを押すと・・・
このコードでは、HTMLファイル内の<body>要素の最後に<script>タグを使ってJavaScriptのコードが書かれています。changeTitle()という関数を定義し、ボタンがクリックされると、見出し（<h1>タグ）のテキストが「見出しが変わりました！」に変わります。
ボタン要素（<button>タグ）のonclick属性にchangeTitle()関数を設定して、クリックイベントが発生したときに関数が実行されるようにしています。
JavaScriptの基本は、このようにウェブページに動きやインタラクティブな要素を追加することです。さまざまな関数やイベントを学ぶことで、自分だけの動的なウェブページを作成することができます。
Webエンジニア向け→完全無料のHTML/CSSロードマップ
Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSSです。
以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSSを学習するためのロードマップ（全30記事）を整理しています。
以下のページの内容をマスターすればHTMLとCSSの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。
