JavaScript は HTML や CSS とどう違うのですか?

JavaScript と HTML および CSS の違い

HTML はウェブサイトの構造を作成するために使用されます

HTML(HyperText Markup Language)は、ウェブページの基本的な構造を作成するために使用されるマークアップ言語です。HTML 要素とタグを使用して文章、画像、リンク、フォームなどを配置し、ウェブページのレイアウトを定義します。

以下に簡単な HTML の例を示します:

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、世界!</h1>
    <p>これはHTMLの例です。</p>
</body>
</html>

 

CSS はその構造をデザイン(ペイント)するために使用されます

CSS(Cascading Style Sheets)は、HTML ドキュメントの外観をデザインするために使用されます。CSS を使用して、色、フォント、レイアウトなどを設定し、ウェブページの見た目を美しく整えることができます。

以下に簡単な CSS の例を示します:


body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

JavaScript は振る舞いを追加するために使用されます

JavaScript は、ウェブページに動的な機能を追加するために使用されるプログラミング言語です。ユーザーの操作に応じてページの内容を変更したり、アニメーションを追加したり、データを処理したりすることができます。特に DOM 操作やイベント処理に強力です。

以下に簡単な JavaScript の例を示します:


document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelector('h1').textContent = 'JavaScriptによって変更されたテキスト';
});

HTML はウェブページを作成するためのマークアップ言語です

HTML はウェブページを構築するための基本的なスケルトンを提供します。HTML を使用して各要素を定義し、ページの内容と構造を設定します。

JavaScript は DOM 操作に使用されます

JavaScript を使用すると、DOM(Document Object Model)を操作して、ページのコンテンツや構造を動的に変更することができます。これにより、インタラクティブなウェブページを作成できます。

以下に JavaScript による DOM 操作の例を示します:


document.getElementById('test').innerHTML = '新しいコンテンツ';

JavaScript を使用して日付と時間を処理できます

JavaScript には Date オブジェクトがあり、これを使用して日付と時刻を操作することができます。現在の日付と時刻を取得したり、特定の日付を計算したりするのに役立ちます。

以下に簡単な Date オブジェクトの使用例を示します:


let now = new Date();
document.getElementById('date').textContent = now.toLocaleString();

関連 Q&A

Q1. HTML とは何ですか?

A. HTML はウェブページの構造を定義するために使用されるマークアップ言語です。

Q2. CSS とは何ですか?

A. CSS は HTML ドキュメントのスタイルとレイアウトを定義するために使用される言語です。

Q3. JavaScript とは何ですか?

A. JavaScript はウェブページに動的な機能と振る舞いを追加するためのプログラミング言語です。