【初心者向け】HTML CSS JavaScriptの違い・役割を3分で解説

本ページはプロモーションが含まれています
CSS

HTML、CSS、JavaScriptはWebページを作成するために使われる3つの主要な技術です。それぞれの役割を初心者向けに説明します。

HTML CSS JavaScript の違い
図1:HTML CSS JavaScript の違い
HTMLとは
  • HTML (HyperText Markup Language)
    HTMLはウェブページの構造や内容を記述する言語です。文章、画像、リンクなどの要素を配置し、ページの基本的な構造を作成します。

Webページ全体を1つの家に例えると、HTMLは家の骨格です。部屋の配置や大きさ、窓やドアの位置など、家の基本構造を決める役割があります。

CSSとは
  • CSS (Cascading Style Sheets)
    CSSはWebページのデザインや見た目を制御するための言語です。色、フォント、レイアウトなどのスタイルを指定し、ページを美しく見せることができます。

CSSは、インテリアデザイナーのような役割があります。家具の配置や壁の色、照明など、部屋の雰囲気を整える役割があります。

JavaScriptとは
  • JavaScript
    JavaScriptはウェブページに動的な機能やインタラクティブな要素を追加するためのプログラミング言語です。例えば、ボタンをクリックすると表示が変わる機能や、リアルタイムで情報を更新する機能などがあります。

JavaScriptは、家の家電や設備のような役割があります。エアコンの操作や照明の調整、テレビのリモコンなど、快適な生活をサポートする機能を提供します。

このページでは、HTMLやCSS,JavaScriptという単語を初めて聞いた方でも理解できるようにそれぞれの役割や違いをわかりやすく3分で解説します。

このページで学べる内容
  • HTML CSS JavaScript の違い
  • HTML CSS JavaScript のサンプルコード

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の1つです。是非最後までご覧ください。

blank

スキルアップを手軽に!
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYAblank
月額2,980円から始める-入会金不要/途中解約自由。無料体験プランからスタート可能!​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
blank
月額10,780円でJavaScript、Pythonなどのカリキュラムが
学び放題
質問し放題転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】(最大240,000円)

スポンサーリンク

HTMLとCSSとJavaScriptの違いと役割

HTML CSS JavaScript の違い
図1:HTML CSS JavaScript の違い

HTML、CSS、JavaScriptはWebページを作成するために使われる3つの主要な技術です。

基本的にはこれらの3要素で1つのWebページが構成されることが普通。

中には、HTMLのみを用いてページを構成している場合もありますが、基本的には上記の3つ(HTMLとCSSとJavaScript)で1セットだと理解しておきましょう。

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>
図2:HTMLを利用したサンプルページ
サンプルコードの説明
  • <h1>こんにちは!</h1>
    大きな文字で「こんにちは!」と表示されます。
  • <p>これは私のウェブサイトです。</p>
    普通の文字で「これは私のウェブサイトです。」と表示されます。
  • <img src="かわいい犬の写真.jpg" alt="かわいい犬">
    「かわいい犬の写真.jpg」という画像が表示されます。
  • <a href="https://example.com">ここをクリックしてください。</a>
    「ここをクリックしてください。」というリンクが表示され、クリックすると別のウェブページに移動します。

参考 hタグ / pタグ / imgタグ / aタグ

ものすごく見た目はシンプルですが、とりあえずブラウザで開けば↑のように1つのページとして成立しました。

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>
図3:CSSのサンプルコード
サンプルコードの説明
  • body
    ページ全体の背景色を薄い青色(lightblue)に設定しています。
  • h1
    見出し(h1タグ)の文字色を濃い青色(darkblue)にし、中央寄せにしています。
  • p
    段落(pタグ)の文字サイズを16pxにし、文字色を濃い緑色(darkgreen)に設定しています。
  • img
    画像(imgタグ)の幅を200ピクセルにし、高さは自動に設定しています。

CSSの基本は、このようにWebページの見た目を設定することです。色やサイズなどのスタイルを覚えることで、自分だけのデザインを作ることができます。

WebページにCSSを適用するには、HTMLファイル内の<head>要素内に<style>タグを使ってCSSのコードを書くか、別のCSSファイルを作成して、HTMLファイルからリンクして読み込むことができます。

参考 HTMLファイルからCSSを読み込む方法

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エンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の1つがHTML/CSSです。

以下のページでは、そもそもHTMLって何?何のために学習するの?という疑問に回答しつつ、HTML/CSSを学習するためのロードマップ(全30記事)を整理しています。

以下のページの内容をマスターすればHTMLとCSSの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

blank

スキルアップを手軽に!
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYAblank
月額2,980円から始める-入会金不要/途中解約自由。無料体験プランからスタート可能!​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
blank
月額10,780円でJavaScript、Pythonなどのカリキュラムが
学び放題
質問し放題転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】(最大240,000円)

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
CSSHTMLJavaScriptWEBデザイン
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました