😎
HTML & CSS入門

2025/02/15に公開
CSS
 1. はじめにWeb開発の世界に足を踏み入れると、まずはHTMLとCSSという2つの基本技術に出会います。

• HTML (HyperText Markup Language): Webページの「構造」を定義するためのマークアップ言語です。

• CSS (Cascading Style Sheets): HTMLで作られたコンテンツに「見た目」を与えるためのスタイルシート言語です。
この入門記事では、今後学ぶJavaScript、TypeScript、Reactなどの技術に備えるため、最低限の理論と実践的な知識を解説していきます。特に、HTMLとCSSの役割や基本構造、セマンティックな記述、そしてCSSの仕組み（セレクタ、カスケーディング、ボックスモデルなど）に触れます。

 2. HTMLとは？HTMLはWebページの骨組みを作るための言語です。

主なポイントは以下の通りです。
タグによる構造の定義

HTML文書は、タグ（例：<p>, <div>, <h1> など）を使ってコンテンツを区切り、意味づけを行います。
属性による追加情報の指定

タグには属性（例：class, id, src, href など）を追加して、各要素に固有の情報や動作を与えます。
セマンティックな記述

<header>, <nav>, <article>, <footer> などのタグを使うことで、ページ内の各部分の役割が明確になり、アクセシビリティやSEO（検索エンジン最適化）に有利になります。

 2.1 HTMLの基本構造以下は、基本的なHTML文書の構造例です。
 index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML入門</title>
  </head>
  <body>
    <header>
      <h1>私のWebページ</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#section1">セクション1</a></li>
        <li><a href="#section2">セクション2</a></li>
      </ul>
    </nav>
    <main>
      <section id="section1">
        <h2>セクション1</h2>
        <p>ここにセクション1の内容を書きます。</p>
      </section>
      <section id="section2">
        <h2>セクション2</h2>
        <p>ここにセクション2の内容を書きます。</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2025 My Website</p>
    </footer>
  </body>
</html>
これをブラウザで表示すると以下のようになります。

この例では、基本の要素（<!DOCTYPE>, <html>, <head>, <body>）と、セマンティックなタグ（<header>, <nav>, <main>, <section>, <footer>）を使用しています。

ReactなどのフレームワークでJSXを使う際も、HTMLに近い構造を記述するため、基本を押さえておくことが大切です。

 3. CSSとは？CSSは、HTMLで作成されたコンテンツに対してデザインやレイアウトを与えるための言語です。

以下のポイントを理解しておきましょう。
セレクタ

どのHTML要素にスタイルを適用するかを指定するための記法です。

例：タグセレクタ（p { … }）、クラスセレクタ（.className { … }）、IDセレクタ（#idName { … }）など。
プロパティと値

各セレクタに対して、どのようなスタイルを適用するかをプロパティとその値で定義します。

例：color: blue;、margin: 10px;、font-size: 16px; など。
カスケーディングと継承

複数のスタイルが同じ要素に適用される場合、優先順位（specificity）や継承のルールによって最終的なスタイルが決まります。

 CSSの記述方法CSSは、HTMLに直接書き込む「インラインスタイル」、<style>タグを使う「内部スタイルシート」、もしくは外部ファイルに記述してリンクする「外部スタイルシート」のいずれかで記述できます。

外部スタイルシートの例を以下に示します。
外部CSSファイルの読み込み（HTML側）
 index.html
<head>
  <!-- 先ほどのhead要素の記述の後に -->
  <link rel="stylesheet" href="styles.css">
</head>
外部CSSファイル（styles.css）
 styles.css
body {
  font-family: Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
}

header {
  background-color: #4a90e2;
  color: white;
  padding: 20px;
  text-align: center;
}

nav {
  background-color: #f0f0f0;
  padding: 10px;
}

nav ul {
  list-style: none;
}

nav a {
  color: #333;
  text-decoration: none;
}

section {
  margin: 20px 0;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}
これを表示すると以下のようになります。


 4. CSSのレイアウトの基本：ボックスモデルCSSのレイアウトを理解する上で、ボックスモデルは非常に重要な概念です。

すべてのHTML要素は「ボックス」として扱われ、以下の4つの主要部分から構成されます。
コンテンツ領域 (Content)

要素の実際の内容が表示される部分。
パディング (Padding)

コンテンツと境界線（ボーダー）の間の余白。
ボーダー (Border)

要素の周囲に描かれる枠線。
マージン (Margin)

要素と他の要素との間の外側の余白。

 5. HTMLとCSSの連携HTMLとCSSはそれぞれの役割を持ちながら、協力してWebページを構築します。

• HTML がページの構造（文章、画像、リンクなど）を定義し、

• CSS がその構造に対してデザインやレイアウトのルールを適用します。
この分離は、関心の分離（Separation of Concerns） と呼ばれ、後々のメンテナンスや大規模開発において非常に有用です。

また、JavaScriptでDOM操作を行う際も、HTMLの構造を正しく理解していることが、効率的なスクリプト作成につながります。

 6. 今後の学習に向けて
 6.1 JavaScript、TypeScript、Reactとの関係JavaScript

HTMLで作成されたWebページに対して動的な動作を追加するためのプログラミング言語です。
TypeScript

JavaScriptに型付けを追加した言語で、より大規模なアプリケーション開発に向いています。
React

ユーザーインターフェースを構築するためのライブラリです。

Reactでは、JSXと呼ばれるHTMLライクな記法を用いてコンポーネントを記述します。

HTMLの文法やセマンティックなタグの使い方を理解していることが、より良いコンポーネント設計につながります。また、CSSについても、CSS ModulesやStyled Componentsなど、コンポーネント単位でスタイルを管理する手法が存在します。

 6.2 これからのステップ実際に手を動かしてコードを書いてみる

実際のプロジェクトやサンプルサイトを作成することで、HTMLとCSSの理解が深まります。
ブラウザの開発者ツールを活用する

DOMの構造や適用されているCSSスタイルを確認し、どのように表示が反映されているかを観察しましょう。
セマンティックなコーディングを心がける

今後のアクセシビリティやSEO、Reactなどでの再利用性を考慮し、意味のあるタグ付けを意識してください。
CSSフレームワークやプリプロセッサの導入を検討する

基本を学んだ後は、Tailwind CSSやSassなどのツールを利用して、効率的なスタイリング方法も学びましょう。

 7. まとめ本記事では、HTMLとCSSの基本的な理論と実践的な記述方法について解説しました。

HTML でWebページの構造や意味づけを行い、CSS でその構造に対してスタイルやレイアウトを適用するという基本原則を理解することは、今後のJavaScript、TypeScript、Reactの学習に大いに役立ちます。
基礎をしっかりと固めることで、後々のフロントエンド開発において柔軟かつ効率的な設計・実装が可能になります。まずは実際にコードを書いて、ブラウザで表示結果を確認しながら学習を進めてみましょう！
次の記事では、動的な動作を実現するためのJavaScriptや、その上位互換であるTypeScript、そしてコンポーネントベースのライブラリReactについて詳しく解説します。
担当：生駒
https://zenn.dev/utokyo_aido/articles/d40d5f261a0db8
1. はじめに

2. HTMLとは？

2.1 HTMLの基本構造

3. CSSとは？

CSSの記述方法

4. CSSのレイアウトの基本：ボックスモデル

5. HTMLとCSSの連携

6. 今後の学習に向けて

6.1 JavaScript、TypeScript、Reactとの関係

6.2 これからのステップ

7. まとめ

Discussion
