はじめに
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サイトを作成できます。それぞれの特性を理解し、活用してみてください！