Frontend Academy · レッスン

HTML、CSS、JavaScript: 各層の役割

HTML、CSS、JavaScriptがそれぞれWebページにどのように貢献するか、また関心の分離によってサイトを保守しやすくできる理由を理解します。

「HTML、CSS、JavaScript: 各層の役割」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Webを構成する3本の柱

すべてのWebページは、互いに補完し合う3つの技術で構築されています。構造を担うHTML、表示を担うCSS、動作を担うJavaScriptです。これらを分離しておくことは、フロントエンド開発における最も重要な原則の1つです。

HTML — 構造と意味

HTML（HyperText Markup Language）は、コンテンツが何であるかを表します。見出し、段落、リスト、フォームなど、HTMLはコンテンツに意味を持たせるため、ブラウザー、検索エンジン、スクリーンリーダーがすべて内容を理解できます。

<!DOCTYPE html>
<html lang="en">
  <head><title>My Page</title></head>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

CSS — 表示とスタイル

CSS（Cascading Style Sheets）は、コンテンツがどのように見えるかを表します。色、フォント、余白、レイアウト、アニメーションはすべてCSSで指定します。スタイルをCSSにまとめておけば、1つのファイルを編集するだけでサイト全体を redesignできます。

body {
  font-family: system-ui, sans-serif;
  background: #f0f4f8;
  color: #1a202c;
}
h1 {
  color: #2b6cb0;
}

JavaScript — 動作とインタラクティブ性

JavaScriptは、ユーザー操作やデータに応じて何が起こるかを表します。ボタンのクリック、フォームの送信、カウンターの更新、新しい投稿の取得など、あらゆる動作を担うのがJavaScriptです。

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('#count').textContent++;
});

なぜ3つのレイヤーを分離するのか

関心の分離とは、デザイナーがJavaScriptに触れずにCSSを変更でき、エンジニアがHTMLを書き直さずに機能を追加でき、同じHTMLに複数のCSSテーマを適用できるということです。コードは保守、テスト、再利用がしやすくなります。

CSSなしのHTML

CSSが読み込まれる前は、ブラウザーはHTMLをそのまま表示します。プレーンテキスト、機能するリンク、ブラウザー標準のフォームコントロールが表示されます。これは、低速な接続を使っているユーザーやJavaScriptを無効にしているユーザーにとっての基本的な体験です。適切なHTMLを使えば、この状態でも十分に利用できます。

プログレッシブエンハンスメント

プログレッシブエンハンスメントとは、まず動作するHTMLを用意し、CSSを追加して見た目を改善し、JavaScriptを追加して動作を加える考え方です。各レイヤーが前のレイヤーを強化するため、あるレイヤーが機能しなくても、体験は段階的に低下して利用を続けられます。

インラインファイルと外部ファイル

CSSを<style>タグに、JavaScriptを<script>タグに埋め込むことはできますが、外部の.cssファイルと.jsファイルのほうが適しています。ブラウザーでキャッシュでき、複数の小さなファイルに分割でき、独立して保守できるためです。

ブラウザーは3つすべてを適用する

ブラウザーはHTMLを読み取ってDOMを構築し、CSSを読み取ってCSSOMを構築してからスタイルを適用します。その後、JavaScriptを実行し、DOMとCSSOMの両方を変更できます。この順序を理解すると、適切なタイミングで実行されるコードを書けるようになります。

よくある間違い: レイヤーを混在させる

HTML内のスタイル（style=""属性）、JavaScript内のHTML（文字列連結）、CSS内の動作（display:noneのハック）は、いずれもレイヤーを混在させます。その結果、コードのデバッグ、テスト、チームメンバーへの引き継ぎが難しくなります。

フレームワークでも基本は変わらない

React、Vue、Angularも、ブラウザー上では最終的にHTML、CSS、JavaScriptを生成します。3つのレイヤーを理解していれば、どのフレームワークの出力も理解でき、抽象化によって隠れている問題もデバッグできます。

理解度チェック

Webページのレイアウトと見た目を定義するのはどのレイヤーですか？

まとめ: 各レイヤーの役割

HTML = 構造と意味。CSS = 見た目とレイアウト。JavaScript = 動作とインタラクティブ性。この3つをコードベース内で明確に分離しておけば、チームメンバーも、そして将来の自分も、その恩恵を受けられます。

よくある質問

「HTML、CSS、JavaScript: 各層の役割」レッスンは無料ですか？

はい。「HTML、CSS、JavaScript: 各層の役割」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「HTML、CSS、JavaScript: 各層の役割」で何を学びますか？

HTML、CSS、JavaScriptがそれぞれWebページにどのように貢献するか、また関心の分離によってサイトを保守しやすくできる理由を理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「HTML、CSS、JavaScript: 各層の役割」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る