はじめに

Webサイトを作成する際、よく使われる技術としてHTML、CSS、JavaScriptがあります。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

それぞれの役割を理解することで、より効果的にWebページを作成・管理することができます。

書こうと思ったきっかけ

Web開発を始めたばかりの方にとって、HTML、CSS、JavaScriptの違いが分かりにくいことが多いと感じました。

そこで、それぞれの役割を簡潔にまとめた記事を作成し、初心者の方でも理解しやすいようにしたいと思いました。

1. HTML（HyperText Markup Language）

HTMLは、Webページの構造を定義するマークアップ言語です。文章の見出しや段落、リンク、画像、表など、ページの基本的な要素を記述する役割を持ちます。

特徴

Webページの骨組みを作る
タグ（例：<h1>、<p>、<a>）を使って要素を定義する
単体ではデザインや動的な動作は含まれない

例

<!DOCTYPE html>
<html>
<head>
    <title>HTMLの例</title>
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは段落です。</p>
</body>
</html>

2. CSS（Cascading Style Sheets）

CSSは、HTMLで作成したページのデザインやレイアウトを指定するスタイルシート言語です。文字の色や背景色、フォントの種類、レイアウトなどを設定できます。

特徴

Webページのデザインを整える
クラスやIDを使用して特定の要素を装飾可能
HTMLと組み合わせて使用する

例

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}
h1 {
    color: navy;
    text-align: center;
}
p {
    font-size: 16px;
}

3. JavaScript（JS）

JavaScriptは、Webページに動的な動作を追加するプログラミング言語です。ユーザーの操作に応じた反応をしたり、アニメーションを加えたり、フォームの入力チェックを行うことができます。

特徴

Webページに動的な要素を追加する
ユーザーの操作（クリック、入力など）に応じて動作を変えられる
HTML・CSSと組み合わせてインタラクティブなWebサイトを作成可能

例

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("button").addEventListener("click", function() {
        alert("ボタンがクリックされました！");
    });
});

まとめ

言語	役割
HTML	Webページの構造を作る
CSS	Webページのデザインを整える
JavaScript	Webページに動的な動作を追加する

この3つを適切に組み合わせることで、魅力的で使いやすいWebサイトを作成できます。それぞれの特性を理解し、活用してみてください！