Resources

2.ファイルの種類と役割

  • WEBファイルについて

WEBサイトを作るためには、いくつかの基本的なファイルが必要です。ここでは、HTML・CSS・JavaScriptの役割について説明します。

1. HTML（HyperText Markup Language）

役割：WEBページの骨組みを作る

HTMLは、WEBページの構造を定義するための言語です。例えば、見出しや段落、画像、リンクなどを指定するのに使われます。

例：基本的なHTMLの構成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、WEBの世界！</h1>
    <p>これはHTMLの基本的な構成です。</p>
</body>
</html>

ポイント

  • <h1> や <p> のようなタグを使って、ページの構造を作る
  • <head> 内にはページ情報（タイトルや文字コード）を記述
  • <body> 内に、実際に表示される内容を書く

2. CSS（Cascading Style Sheets）

役割：デザインやレイアウトを整える

CSSは、HTMLで作った骨組みにデザインを加えるための言語です。文字の色や大きさ、余白、配置などを調整できます。

例：文字の色を変えるCSS

h1{
   color: blue; 
   font-size: 24px;
}
p{
   color: gray;
}

ポイント

  • color で文字色を変更
  • font-size で文字サイズを指定
  • クラスやIDを使うことで、特定の要素だけにスタイルを適用できる

3. JavaScript（JS）

役割：動きをつける

JavaScriptは、WEBページにインタラクションを追加するプログラミング言語です。ボタンを押したら表示が変わる、スクロールに応じてアニメーションする、などの動きを作れます。

例：ボタンを押すと文字が変わるJS

ポイント

  • JavaScriptを使うと、ユーザーの操作に応じてページの内容を変更できる
  • document.getElementById でHTMLの要素を操作可能

まとめ

ファイル種類役割
HTMLページの骨組み（文章や画像、リンクの配置）
CSSデザインやレイアウト（色やフォント、余白の調整）
JavaScriptページに動きをつける（クリックやスクロールのアクション）

この3つを組み合わせることで、WEBページが作られます。まずはHTMLとCSSから触れて、慣れてきたらJavaScriptを少しずつ取り入れるとスムーズに学べます。