【初心者向けガイド】Webサイトの構成を理解しよう

Webサイトの構成について、初心者の方にも分かりやすく説明したいと思います。専門用語が出てきた場合は、その都度説明を交えていきますので、安心してお読みください。
参照する記事は下記です。

https://ma-san.org/notes/first-web-02.html

Webサイトの基本構成
HTMLの構造
CSSの基本
JavaScriptの基本

Webサイトの基本構成

まず、Webサイトを構成する要素は主に次の3つです。

HTML (HyperText Markup Language)
CSS (Cascading Style Sheets)
JavaScript

それぞれの役割を簡単に説明します。

HTML (HyperText Markup Language)：Webページの構造を表現する言語です。文章や画像などの要素を配置し、それらをリンクでつなぎ合わせます。
CSS (Cascading Style Sheets)：Webページのデザインやレイアウトを指定する言語です。文字の色や背景、ボタンの形状などの見た目を整えます。
JavaScript：Webページに動的な要素やインタラクティブな機能を追加するプログラミング言語です。例えば、ユーザーがボタンを押すと表示が切り替わるような動作を実現します。

HTMLの構造

HTMLは、「タグ」と呼ばれる要素で構成されています。タグは、”<“と”>”で囲まれたキーワードで、要素の種類や役割を表します。例えば、”<h1>”というタグは、一番大きな見出しを表します。

基本的なHTMLの構造は以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <title>ページタイトル</title>
</head>
<body>
  <h1>大見出し</h1>
  <p>段落テキスト</p>
</body>
</html>

ここで、いくつかの重要なタグを説明します。

<!DOCTYPE html>: HTMLを使用することを宣言します。
<html>: HTML文書のルート要素（全体を包む要素）です。
<head>: ページに関するメタ情報を含む要素です。主に、ブラウザや検索エンジンが参照する情報が入ります。
<title>: ページのタイトルを指定します。ブラウザのタブや検索結果に表示されます。
<body>: ページのコンテンツ部分を記述する要素です。ここに文章や画像、リンクなどが入ります。

CSSの基本

CSSは、Webページのデザインやレイアウトを指定する言語です。CSSの記述は、HTMLファイルに直接書くこともできますが、通常は別のファイルに分けて記述し、HTMLファイルからリンクします。

例えば、次のようにHTMLファイル内の<head>要素内に<link>タグを記述して、CSSファイルをリンクします。

<head>
  <title>ページタイトル</title>
  <link rel="stylesheet" href="styles.css">
</head>

CSSの基本的な構文は、セレクタと宣言ブロックで構成されます。セレクタは、スタイルを適用するHTML要素を指定します。宣言ブロックは、スタイルの指定を記述します。

セレクタ {
  プロパティ: 値;
}

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

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-size: 18px;
}

このCSSでは、body要素の背景色を薄い青色に、h1要素の文字色を白に指定し、中央揃えにしています。また、p要素のフォントサイズを18pxに指定しています。

JavaScriptの基本

JavaScriptは、Webページに動的な要素やインタラクティブな機能を追加するプログラミング言語です。JavaScriptのコードは、HTMLファイルに直接書くこともできますが、通常は別のファイルに分けて記述し、HTMLファイルからリンクします。

例えば、次のようにHTMLファイル内の<body>要素の終わり直前に<script>タグを記述して、JavaScriptファイルをリンクします。

<body>
  ...
  <script src="scripts.js"></script>
</body>

JavaScriptでよく使われる機能の一つに、イベントリスナーがあります。イベントリスナーは、特定のイベント（例えば、ボタンのクリック）が発生したときに実行される関数を登録します。以下は、ボタンがクリックされたときにアラートを表示する簡単な例です。

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

これで、Webサイトの基本的な構成と、それぞれの役割についての理解が深まったことでしょう。HTML、CSS、JavaScriptの3つの要素が連携して、見た目や動作が豊かなWebサイトが構築されています。これらの技術を学ぶことで、あなた自身もオリジナルなWebサイトを作成することができるようになります。

今回は、Webサイト構成の基本について説明しましたが、さらに詳しく学ぶには、以下のようなトピックも習得していくことをお勧めします。

HTMLタグや属性のさらなる理解
CSSのセレクタや詳細なプロパティ
JavaScriptの基本構文やDOM操作

これらのトピックを学ぶことで、Webサイト制作のスキルがさらに向上し、自由度の高いWebページが作成できるようになります。また、レスポンシブデザインやアクセシビリティの向上など、現代のWeb制作に求められる知識も身につけていくことが重要です。

最後に、Webサイト制作を学ぶ上で役立つリソースをいくつか紹介します。

MDN Web Docs (https://developer.mozilla.org/ja/）：Mozillaが提供する、HTML、CSS、JavaScriptに関する豊富なドキュメントが揃っています。
W3Schools (https://www.w3schools.com/)：Web開発に関するチュートリアルやリファレンスが充実しています。

これらのリソースを活用しながら、Webサイト制作の知識を深めていきましょう。