2
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@toamoku-20220418(toamoku)Team Coffee

🌐 フロントエンド基礎講座【第一回】Webページの仕組み・HTML基礎を完全解説！

2
Posted at

1. 👋 はじめに

「Webページってどうやって表示されているの？」
「HTMLって何？タグって何？」
「フロントエンドエンジニアって何をする人？」

このシリーズでは HTML・CSS・TypeScript・React を使ったフロントエンド開発の基礎を、初心者向けにやさしく解説します！

このシリーズで目指すゴール：
TypeScript × React を使って、
動くWebアプリケーションを作れるようになること！

2. 🌍 Webページが表示されるまでの仕組み

ブラウザとサーバーの会話

Webページを開くとき、裏側では何が起きているのでしょう？

一言で言うと：
ブラウザが「これをください」とリクエストを送り、
サーバーが「どうぞ」とファイルを返す（レスポンス）やり取りです。
この通信の仕組みを HTTP（HyperText Transfer Protocol） と呼びます。詳しくは下記の記事もご覧ください。

💡 ブラウザの役割：「設計図」を「画面」に翻訳する

私たちが普段使っているブラウザ（ChromeやSafariなど）は、
サーバーから届いたHTMLなどの「設計図」を読み込んで、
人間が見やすい画面に翻訳（レンダリング）する役割を持っています。

<サーバーから届くもの（人間には読みにくい）>

  <h1>こんにちは</h1><p>これはWebページです</p>

              ↓ ブラウザが翻訳（レンダリング）
              
<画面に表示されるもの（人間が見やすい）>

【こんにちは】（大きな文字）
   これはWebページです（通常の文字）

フロントエンドとバックエンドの違い

フロントエンド バックエンド
場所 ブラウザ上で動く サーバー上で動く
担当 見た目・操作感 データ処理・DB
技術 HTML・CSS・TypeScript・React など Python・Node.js・Go・DB など
例え お店の内装・接客 厨房・在庫管理

HTMLとCSS・JavaScriptの役割

🏠 Webページ = 建物に例えると

HTML  → 🏗️ 骨組み・構造
        「ここにタイトルがある」「ここにリストがある」

CSS   → 🎨 内装・デザイン
        「タイトルは赤色」「余白は20px」

TypeScript/JavaScript → ⚙️ 電気・水道
        「ボタンをクリックしたらメニューが開く」
        「データを取得して表示する」

3. 📄 HTMLとは？

一言で言うと

HTML（HyperText Markup Language）は
「Webページの構造を記述する言語」です。
タグと呼ばれる特別な記号でテキストを囲んで、
「これは見出し」「これはリスト」という意味を付けます。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ページの設定情報（ブラウザには表示されない） -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>私の最初のページ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- ページの表示内容（ブラウザに表示される） -->
    <h1>こんにちは！</h1>
    <p>これは私の最初のWebページです。</p>
  </body>
</html>
部分 役割
<!DOCTYPE html> 「これはHTML5のファイルです」という宣言
<html lang="ja"> HTMLのルート要素・言語を日本語に設定
<head> ブラウザへの設定情報（タイトル・CSSの読み込みなど）
<body> 実際にページに表示される内容

タグの書き方

<!-- 基本形：開始タグ・内容・終了タグ -->
<タグ名>内容</タグ名>

<!-- 例 -->
<h1>これは見出しです</h1>
<p>これは段落です</p>

<!-- 自己閉じタグ（終了タグが不要なもの） -->
<img src="photo.jpg" alt="写真" />
<br />
<hr />

💡 自己閉じタグの / について
HTML5 では <img> や <br> のように、スラッシュなしで書くのが標準です。
しかしこのシリーズでは あえて <img /> のようにスラッシュを付けています。
なぜなら、第四回以降で学ぶ React（JSX/TSX）では自己閉じスラッシュが必須 だからです。
最初から / を付ける習慣をつけておくと、Reactに移ったときにスムーズです。

4. 🏷️ よく使うHTMLタグ

見出しと段落

<!-- 見出し：h1が最大・h6が最小 -->
<h1>大見出し（ページタイトルに使う）</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

<!-- 段落 -->
<p>ここに本文のテキストを書きます。</p>

💡 h1 はページに1つだけにするのがマナー。
検索エンジンがページの内容を理解するためにも重要です。

リンクと画像

<!-- リンク：href にURLを書く -->
<a href="https://example.com">リンクのテキスト</a>

<!-- 同じサイト内のページへのリンク -->
<a href="/about">会社概要</a>

<!-- 新しいタブで開くリンク -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイト
</a>

<!-- 画像：src に画像のパス・alt に代替テキスト -->
<img src="photo.jpg" alt="山の写真" width="300" height="200" />

⚠️ alt は必ず書こう！
画像が表示できないとき・スクリーンリーダー（音声読み上げ）使用時に
alt のテキストが使われます。
アクセシビリティとSEOの両方に重要です。

リスト

<!-- 箇条書きリスト（順序なし） -->
<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>みかん</li>
</ul>

<!-- 番号付きリスト（順序あり） -->
<ol>
  <li>材料を準備する</li>
  <li>鍋に水を入れる</li>
  <li>沸騰させる</li>
</ol>

フォーム

<!-- ユーザーが入力するフォーム -->
<form action="/submit" method="post">
  <!-- テキスト入力 -->
  <label for="name">名前：</label>
  <input type="text" id="name" name="name" placeholder="山田 太郎" />

  <!-- メールアドレス入力 -->
  <label for="email">メール：</label>
  <input type="email" id="email" name="email" />

  <!-- パスワード入力 -->
  <label for="password">パスワード：</label>
  <input type="password" id="password" name="password" />

  <!-- テキストエリア -->
  <label for="message">メッセージ：</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <!-- 送信ボタン -->
  <button type="submit">送信する</button>
</form>

テーブル

テーブルを構成するタグの意味：

タグ 意味
<table> テーブル全体を囲む
<thead> ヘッダー行のグループ（見出し行）
<tbody> データ行のグループ（本体）
<tr> テーブルの1行（Table Row）
<th> 見出しセル（Table Header）・太字で表示される
<td> データセル（Table Data）・通常のテキスト 
<table>
  <thead>
    <!-- tr = 1行 / th = 見出しセル -->
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>
    <!-- tr = 1行 / td = データセル -->
    <tr>
      <td>田中 太郎</td>
      <td>25</td>
      <td>エンジニア</td>
    </tr>
    <tr>
      <td>鈴木 花子</td>
      <td>30</td>
      <td>デザイナー</td>
    </tr>
  </tbody>
</table>

5. 🧱 セマンティックHTMLとは？

セマンティック（意味のある）タグ

セマンティックHTMLとは「意味のあるタグを使うこと」です。
<div> や <span> だけでなく、
「これはナビゲーション」「これは記事」という意味を持つタグを使います。

<!-- ❌ セマンティックでない書き方（divだらけ） -->
<div class="header">
  <div class="nav">
    <div class="nav-item">ホーム</div>
    <div class="nav-item">ブログ</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">記事のタイトル</div>
    <div class="content">記事の内容</div>
  </div>
</div>
<div class="footer">フッター</div>

<!-- ✅ セマンティックな書き方（意味のあるタグを使う） -->
<header>
  <nav>
    <a href="/">ホーム</a>
    <a href="/blog">ブログ</a>
  </nav>
</header>
<main>
  <article>
    <h1>記事のタイトル</h1>
    <p>記事の内容</p>
  </article>
</main>
<footer>フッター</footer>

よく使うセマンティックタグ

タグ 意味 使う場所
<header> ページ・セクションのヘッダー サイトのロゴ・ナビゲーション
<nav> ナビゲーションメニュー メニュー・パンくずリスト
<main> メインコンテンツ ページの主要な内容
<article> 独立したコンテンツ ブログ記事・ニュース記事
<section> テーマ別のセクション 「サービス紹介」「お問い合わせ」など
<aside> 補足情報 サイドバー・関連リンク
<footer> ページ・セクションのフッター コピーライト・リンク集

なぜセマンティックHTMLが重要なのか

理由 説明
🔍 SEO 検索エンジンがページ構造を正しく理解できる
♿ アクセシビリティ スクリーンリーダーがページを正確に読み上げられる
📖 可読性 コードを読んだ人がページ構造を理解しやすい
🎨 CSS適用 セマンティックタグをセレクターに使えて管理しやすい
🛠️ チーム開発・保守性 コンポーネントに分割する際「どこが共通パーツか」が一目でわかり、Reactでの開発管理が圧倒的に楽になる

6. 🏗️ HTMLの属性

属性とは？

属性はタグに追加情報を付けるものです。
<タグ名 属性名="値"> の形で書きます。

<!-- href：リンク先のURL -->
<a href="https://example.com">リンク</a>

<!-- src：ファイルのパス、alt：代替テキスト -->
<img src="photo.jpg" alt="写真の説明" />

<!-- class：CSSやJSで要素を特定するためのクラス名 -->
<p class="description">説明文</p>

<!-- id：ページ内で一意の識別子 -->
<section id="about">会社概要セクション</section>

<!-- disabled：ボタンを無効化する -->
<button disabled>送信できません</button>

classとidの使い分け

class id
ページ内での重複 複数の要素に使える ページ内で一意（1つだけ）
主な用途 CSSでスタイル適用 JavaScriptで特定の要素を操作
書き方（HTML） <p class="card"> <section id="about">
書き方（CSS） .card { color: red; } #about { background: blue; }
書き方（JS/TS） document.querySelectorAll(".card") document.getElementById("about") 
<!-- class：同じスタイルを複数の要素に適用したいとき -->
<p class="card">カード①</p>
<p class="card">カード②</p>  <!-- 同じclassを複数使えるのがポイント -->
<p class="card">カード③</p>

<!-- id：ページ内で1つだけの要素を特定するとき -->
<section id="about">会社概要セクション</section>
<section id="contact">お問い合わせセクション</section>

/* classはドット（.）で指定 */
.card {
  background: white;
  border: 1px solid gray;
  padding: 16px;
}

/* idはシャープ（#）で指定 */
#about {
  background: #f0f8ff;
}

7. 🎯 まとめ

概念 一言で言うと
🌐 HTTP ブラウザとサーバーが通信するルール
📄 HTML Webページの「骨組み・構造」を作る言語
🏷️ タグ HTMLの構成要素・<h1> <p> <a> など
🧱 セマンティックHTML 意味のあるタグを使って構造を表現する
🏷️ 属性 タグに追加情報を付ける仕組み

HTMLは「Webページの設計図」です。
まずHTMLで骨格を作り、次回はCSSで見た目を整えていきます！

次回は CSS を解説します！
セレクター・ボックスモデル・Flexbox・レスポンシブデザインなど、
Webページを美しく整えるためのスタイリングを学びます🎨

💬 質問や感想があれば、コメント欄でお気軽にどうぞ!
👍 役に立ったら、いいね&ストックをお願いします!
🎓 ここまで読んでくださって、本当にありがとうございました!

🔗 シリーズ記事

  • 【第一回】Webページの仕組み・HTML基礎（この記事）
  • 【第二回】CSSで見た目を整える（近日公開）
  • 【第三回】TypeScriptでインタラクションを作る（近日公開）
  • 【第四回】React × TypeScriptの基礎（近日公開）
  • 【第五回】React × TypeScriptの実践（近日公開）
  • 【第六回】まとめ・開発環境・次のステップ（近日公開）
2
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?