🎃

【Part1】【No.001】Reactを触る前に知るHTMLとCSSの最低限

2026/05/08に公開

みなさん、こんにちは！

ペンギンエンジニアです！
「Reactを学びたい」と思って入門記事を開いたら、冒頭の「JSXは基本HTMLと同じです」の"HTML"の時点で手が止まった。
過去にそんな経験、ありませんか？
筆者はSES現場で、Reactタスクを振られた未経験エンジニアを何人も見てきました。

体感としては、9割はReactの前にHTML/CSSで転んでいます。
この記事は、そんな「Reactの手前で詰まる人」に向けて書きました。
ReactはHTMLをJavaScriptで動的に書き出す仕組みです。だからReactに入る前に、まず"HTMLがどう組み立てられるか"と"CSSがどう当たるか"を体で分かっておきましょう。
これを最短距離で終わらせるのが、この記事のゴールです。

 この連載についてこの記事は、連載「ゼロから始めるReact入門」の 【Part1】【No.001】 です。

連載名：ゼロから始めるReact入門

Part：Part 1（React前の前提知識・全6本）

この記事：【Part1】【No.001】HTML・CSSの最低限
Part 1では、HTML / CSS / JavaScript / TypeScript の基礎を6本に分けて押さえていきます。

この記事（【Part1】【No.001】）はその一発目、HTMLとCSSの土台作りです。

 Part 1 全体の流れ（全6本）

通し番号
タイトル
核心メッセージ



【Part1】【No.001】（本記事）
Reactを触る前に知るHTMLとCSSの最低限
HTMLは入れ物のネスト、CSSは見た目を当てる仕組み

【Part1】【No.002】
Reactに必要なJavaScript基礎の最低限
let/const、データ型、配列、オブジェクト、関数

【Part1】【No.003】
React頻出のモダンJS
アロー関数・分割代入・スプレッド・テンプレートリテラル

【Part1】【No.004】
配列メソッド
map / filter / reduce / find

【Part1】【No.005】
ES Modules
import / export / default

【Part1】【No.006】
TypeScript超入門
JSに型を足すと何が嬉しいか

Part 1を終えると、【Part2】【No.007】〜 からは Vite + React + TypeScript で本格的なReactに入ります。

読み終わった後で「次に何が来るか」が見えていると、迷子になりにくいかなと思います。

 今日の結論先に結論から言うと、

HTMLはタグをネストして画面の骨組みを作る仕組みです。タグは入れ物だと思ってください。<div> / <h1> / <p> / <button> / <input> / <a> / <img> / <ul> / <li> の9個をまず覚えれば、Reactに入るまでの前提としては十分です

CSSはどのタグにどんな見た目を当てるかを指示する仕組みです。当て方は大きく「外部CSS」と「style属性」の2通り。Reactではこの2通りがどちらも顔を出します

ReactはこのHTMLタグをJavaScriptで動的に書き出す仕組み。だからHTMLとCSSが分かっていないと、JSX（Reactの書き方）で必ず迷子になります
HTMLは「家の間取り図」、CSSは「内装」、Reactは「間取り図を状況に応じて描き直すロボット」。元の間取り図が読めないと、ロボットが何を書き直しているかも分かりません。
この記事では、その「間取り図」側の読み方を、Reactに入る直前の地点までショートカットで整備していきます。

 この記事を読むと分かることこの記事を読むと、なんとなくですが、
HTMLの「タグ＝入れ物」という考え方と、Reactで頻出する主要タグ9個の役割
タグに付ける属性（class / id / href / src）の意味と、Reactで形が変わるもの
CSSの当て方2パターン（外部CSS / style属性）と、最低限覚えておく5プロパティ
DevToolsの開き方と「要素を検査」でHTML構造とCSSの当たり方を確認する手順
この土台が、次回以降のReact記事（JSX・コンポーネント）にどう接続するか
このあたりが見えてくるかなと思います。

 前提 / 全体像この記事の動作環境は、ブラウザだけです。
動作環境
ブラウザ：Google Chrome または Microsoft Edge の最新版
ランタイム：不要（Node.js / Vite / React は一切使いません）
エディタ：お好みのもの（VS Code などでOK）
確認時期：2026年4月時点の情報です
前提知識
特になし。HTML / CSS / JavaScript をまだ書いたことがない方を想定しています
ファイルをダブルクリックでブラウザを開ける、くらいの操作感があればOKです
仕様の呼び方について
昔は「HTML5」という呼び方が主流でしたが、現在のHTMLは HTML Living Standard という「常時更新される生きた仕様」になっています。

本記事では「HTML5」という呼び方は使わず、単に「HTML」と書きます。
CSSも同じく、各機能が個別に仕様策定されていて、MDNのCSS入門ページは2026年4月時点の最新に保たれています。
Reactについては、この記事では予告レベルでしか触れません。

ただ、連載全体で使うバージョンだけ先に共有しておくと、

React：19系（2024年12月に安定版リリース、2026年4月時点で最新メジャー）
という感じです。

 セクション1：なぜReact入門の1本目がHTMLとCSSなのか「React入門の記事なのに、なぜ1本目がHTMLとCSS？」と思った方もいるかもしれません。
これには理由があります。

 Reactを1文で説明すると先に結論を言ってしまうと、Reactはこういうものです。
ReactはHTMLを、JavaScriptで動的に書き出す仕組み。
最終的にブラウザに届くのはHTMLです。

そのHTMLを、手で書く代わりに、JavaScriptに組み立てさせる。

ざっくりそれだけの話です。

 間取り図とロボットのたとえここでひとつたとえ話を。

HTMLは「家の間取り図」

CSSは「内装（壁の色、家具の置き方）」

JavaScriptは「家の中でのふるまい（スイッチを押したら電気がつく）」

Reactは「間取り図を、状況に応じて描き直してくれるロボット」
ここで大事なのは、元の間取り図の読み方が分からないと、ロボットが何を書き直しているかも分からないという点です。

 SES現場で見てきた光景筆者はSES現場で、未経験エンジニアがReactタスクを振られる場面を何度も見てきました。
そこで一番よく見たのは、
「JSXはHTMLとほぼ同じです」と入門記事に書かれていて、そこで固まる

<div> と <p> の違いがそもそも分からないので、どうコンポーネントを切ればいいか判断できない

class と className の話が出てきた瞬間に、何が何やら分からなくなる
という「HTMLの手前で詰まる」光景でした。
体感としては、React入門で挫折する未経験エンジニアの9割はReactの前にHTML/CSS側で転んでいるという肌感です。

 一番印象に残っているシーン特に印象に残っているのは、Reactのタスクを振られた未経験メンバーが、ネットで拾ったJSXのサンプルをコピペしてきて、className="card" の部分をわざわざ class="card" に書き直してしまう場面でした。
「HTMLではこう書くんですよね？」と聞かれて、話を聞いてみると、そもそもHTMLを書いたことがないまま、React入門の記事を写経していたことが分かったんですよね。
HTMLを知らないままJSXだけ見ていると、className が「何かの方言」に見えてしまう。

<div> と <p> の使い分けも分からない状態で、コンポーネント分割の話をされても意味が入ってこない。
これが、React入門の1本目をHTMLとCSSから始めないといけない一番の理由です。
この記事のゴールは、次回以降のReact記事で出てくるHTML/CSS用語で手が止まらない状態を作ることです。
HTMLの完全網羅は目指しません。Reactに入るための最小セットだけを、この先で固めていきます。

 セクション2：HTMLは「タグという入れ物」をネストするでは、HTMLの中身に入っていきましょう。

 最小のHTMLまず、もっとも小さいHTMLを1ファイル書いてみます。
下のコードをエディタに貼り付けて、index.html というファイル名で保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>最小のHTML</title>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <p>これはHTMLの最小構成です。</p>
</body>
</html>
保存したら、そのファイルをダブルクリックしてブラウザで開いてみてください。
「はじめてのHTML」という大きめの見出しと、「これはHTMLの最小構成です。」という小さい本文が表示されれば成功です。

 それぞれの行の意味上のコード、各行が何をしているかを軽くなぞっておきます。

<!DOCTYPE html>：このファイルはHTMLだよ、という宣言

<html lang="ja">：HTML全体の外枠。lang="ja" は「日本語です」の意味

<head>：画面には出ない設定情報を入れる場所（文字コード、タイトルなど）

<meta charset="UTF-8">：文字コード指定。これがないと日本語が文字化けします

<title>最小のHTML</title>：ブラウザのタブに出るタイトル

<body>：画面に出るコンテンツを入れる場所

<h1> <p>：中身の見出しと段落
ここでのポイントは、<head> と <body> の役割が完全に分かれているという点です。
<head> は「設定」、<body> は「画面に出すもの」。

Reactに入ってからも、この分担はそのまま生きます。

 タグは「開始タグ〜終了タグの間に何かを入れる入れ物」HTMLのタグは、基本的に開始タグと終了タグのペアで使います。
<h1>見出しの文字</h1>
<p>段落の文字</p>
<button>クリック</button>
<h1> で始まって </h1> で閉じる。その間にある文字が、見出しとして表示される。

そういう「入れ物に中身を詰める」モデルだと思ってください。
さらに、タグは ネスト することもできます（入れ子と呼びます）。
<div>
  <p>中身の段落</p>
</div>
<div> の中に <p> が入っている状態です。

この「入れ物の中に入れ物を入れる」構造が、HTMLの骨組みを組み立てる基本になります。

 Reactに入る前に覚えておくタグ9個HTMLの要素は、MDNの要素リファレンスを見ると全体で約130個以上あります。
全部覚える必要はありません。

Reactに入るまでの前提としては、以下の9個を押さえておけば、この連載Part 1を進めるには十分です（筆者の肌感）。


タグ
役割


<div>
何でも入れる汎用の箱


<h1> 〜 <h6>

見出し（h1が一番大きい）

<p>
段落

<button>
ボタン

<input>
入力欄（終了タグなし）

<a>
リンク

<img>
画像（終了タグなし）

<ul>
箇条書きリスト（ulの中にliを入れる）

<li>
リストの各項目

タグは "入れ物"。CSSで見た目を、JavaScriptでふるまいを、後から足す。 この役割分担を先に押さえておくと、Reactに入ってから混乱しません。
ちなみに <input> と <img> は「void element」（空要素）と呼ばれ、HTMLでは終了タグを書きません。

この辺りは、Reactに入った瞬間にルールが少し変わるので、セクション3の末尾で軽く予告します。

 セクション3：属性はタグの「追加情報」タグの使い方が分かったら、次は属性です。

 属性の書き方属性は、タグに「追加情報」を付けるための仕組みです。

書き方はこんな形になります。
<タグ名 属性名="値">中身</タグ名>
具体例で見ると、こんな感じになります。
<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element">MDN のHTML要素リファレンス</a>
<img src="https://placehold.jp/150x100.png" alt="ダミー画像">
<input type="text" placeholder="名前を入力してください">
<button id="my-button">クリック</button>
<div class="card">
  <h2>カードの見出し</h2>
  <p>これは class="card" を付けた div の中身です。</p>
</div>
これは、検証用に用意した index-with-attrs.html から要点だけ抜粋して、読みやすいよう整形したものです。

属性を増やしただけで、タグ自体の書き方は変わりません。

 最初に覚えておく属性4つReactに入るまでの前提としては、以下の4つの属性をまず覚えておけば十分です。


属性
役割


class
CSSやJavaScriptから参照するための「名札」。同じ値を複数要素に付けられる


id
ページ内で1つだけのユニークな名札

href

<a> タグのリンク先URL

src

<img> タグの画像URL（パス）

ここで読者がよく混同するのが class と id の違いです。

class：名札の役割（何度も使える）

id：背番号の役割（1人しか持てない）
スポーツのユニフォームで言うと、「FW」「MF」「DF」みたいなポジション名が class、「背番号10」みたいなユニーク番号が id、そんなイメージです。

 属性の具体例を分解する上のコード例をもう一度見ると、

<a href="...">：リンク先URLを href に書く

<img src="..." alt="...">：画像のURLを src に、画像の説明を alt に書く

<input type="text" placeholder="...">：入力欄の種類を type で指定

<button id="my-button">：このボタンに唯一の名札 my-button を付ける

<div class="card">：この <div> に card という名札を付ける
という構造になっています。
ここでのポイントは、属性はいくつでも並べて書けるという点です。

<img src="..." alt="..."> のように、スペース区切りで複数書けます。

 Reactで変わる話（予告レベル）筆者も昔やったハマりですが、Reactに入ると、
<div class="card">  // ← これはReactでは警告が出ます
と書いて、コンソールで「className を使え」と怒られます。
これは、JavaScriptでは class という単語が予約語だからです（予約語は別の意味で使われている単語、という意味です）。

だからReact側では class を className に書き換えるルールになっています。
同じ理由で、

<img src="..."> → React（JSX）では <img src="..." />（自己閉じスラッシュが必要）

style="color: red" → React（JSX）では style={{ color: "red" }}（オブジェクト記法）
という書き換えが発生します。
ただし、今は深入りしなくて大丈夫です。
この記事の段階では、HTMLの正しい書き方を覚えることだけを目標にします。

Reactでの書き換えルールは、連載のPart 2（JSX編）で改めて扱います。

 セクション4：CSSは「どのタグに、どう見せるか」を指示するタグと属性が書けるようになったら、次はCSSです。

 CSSの基本形CSSは、どのタグにどんな見た目を当てるかを指示する言語です。

書き方は、いつもこの形になります。
セレクタ {
  プロパティ: 値;
}
日本語にすると、「どこに、何を、どれくらい 当てるか」を並べて書く、というだけです。

 CSSの当て方は2通り（この記事の範囲では）MDNのCSS入門ページによれば、CSSの当て方は外部CSS / 内部CSS / インラインの3通りありますが（インラインはstyle属性のことです）、Reactに入るまでの前提としては外部CSSとstyle属性の2通りを押さえておけば十分です。
この2通りを、実例で見比べていきます。

 当て方1：外部CSS（本命）外部CSSは、CSSだけを別ファイル（style.css など）に書いて、HTMLから読み込む方法です。

実案件で一番よく使う書き方です。
まずHTML側で、<head> に <link> を追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部CSS版</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>外部CSSで見た目を当てる</h1>
  <p>この段落には style.css の p セレクタが効いています。</p>

  <div class="card">
    <h2>カードの見出し</h2>
    <p>この div には class="card" が付いているので、背景色と余白が当たります。</p>
  </div>
</body>
</html>
そして、同じフォルダに style.css を置きます。
h1 {
  color: #1f6feb;
}

p {
  font-size: 16px;
}

.card {
  background-color: #f5f5f5;
  padding: 16px;
  margin: 24px 0;
}
この2ファイルを同じフォルダに置いて、index-with-css.html をブラウザで開くと、

<h1> の文字が 青色（#1f6feb）に変わる

.card の背景がうっすらグレーになる

.card の中身に内側余白（padding）と、外側余白（margin）が入る
という見た目になります。
ここでのポイントは、セレクタの書き分けです。

h1 { ... }：タグ名で指定（全ての <h1> に当たる）

p { ... }：同じくタグ名指定（全ての <p> に当たる）

.card { ... }：class名で指定（頭に . を付ける）
余談ですが、p { font-size: 16px; } はブラウザのデフォルトとほぼ同じサイズです。

視覚的な変化は薄いですが、「セレクタでプロパティを指定する練習」として書いておくと、後で太くしたいときに数字をいじるだけで済みます。
一方、h1 の青色はしっかり変化します。

「CSSが効いた！」という実感が得られるのは、主にこっちの変化だと思います。

 最低限覚えておく5プロパティReactに入るまでの前提としては、以下の5つのCSSプロパティを知っておけば十分です。


プロパティ
役割


color
文字色

background-color
背景色

font-size
文字サイズ

padding

内側の余白（コンテンツと境界の間）

margin

外側の余白（他の要素との距離）

padding と margin は最初よく混同しますが、

padding = 要素の内側（服で言うとインナーとの間）

margin = 要素の外側（他の人との距離）
というイメージで覚えると混乱しません。

 当て方2：style属性（Reactでも顔を出すので紹介）もうひとつの書き方が、style属性です。

HTMLのタグに直接 style="..." と書くやり方です。
上で作った index-with-css.html とほぼ同じ見た目を、style属性だけで再現するとこうなります（<!DOCTYPE html> や <head> の書き方は index-with-css.html と同じなので、変化のある <body> だけ見せます）。
<body>
  <h1 style="color: #1f6feb;">style属性で見た目を当てる</h1>
  <p style="font-size: 16px;">この段落には style 属性で font-size が効いています。</p>

  <div class="card" style="background-color: #f5f5f5; padding: 16px; margin: 24px 0;">
    <h2>カードの見出し</h2>
    <p style="font-size: 16px;">外部CSS版と同じ見た目を style 属性だけで再現しています。</p>
  </div>
</body>
これを inline-style.html として保存してブラウザで開くと、外部CSS版とほぼ同じ見た目になります。
書き方が違うだけで、結果は同じ。これがCSSの面白いところです。
外部CSSは再利用しやすい、style属性はその場で一発当てられる、と使い分けます。
実案件では基本的に外部CSSが本命ですが、Reactに入るとstyle属性のほうも頻繁に出てきます。

 Reactで変わる話（予告レベル）HTMLのstyle属性は、中身をCSS構文そのまま書けます。

font-size: 16px; のように、単語をハイフンでつなぐ書き方を「ケバブケース」と呼びます（焼き鳥の串みたいにハイフンで刺さっているイメージです）。
ところがReact（JSX）に入ると、
<p style={{ fontSize: "16px" }}>...</p>
という感じで、オブジェクト記法＋キャメルケースに変わります。
キャメルケースは、単語の切れ目を大文字で表す書き方です。

ラクダのコブみたいに途中で大文字が山になるから、そう呼ばれています。
font-size → fontSize、background-color → backgroundColor といった感じです。
この記事の段階では、HTMLの書き方を正として覚えておけばOKです（HTML/CSS側はケバブケース表記です）。
Reactでの書き換えは、連載のPart 2（JSX編）で扱います。

 セクション5：DevToolsで"答え合わせ"する習慣をつけるHTMLとCSSを書けるようになったら、最後にDevToolsの使い方を覚えましょう。
これは、この連載でも一番コスパが良いと筆者が思っている道具です。

 DevToolsとは何かDevToolsは、ブラウザに標準で入っている開発者向けツールです。

Chromeでも、Edgeでも、標準で入っています。
何ができるかというと、
ブラウザに表示されているHTMLのツリー構造を見る
各タグにどのCSSが当たっているかを見る
CSSの値をその場で書き換えて、結果を即確認する
といったことが全部できます。

 開き方DevToolsの開き方は、だいたい3通りあります。

F12キーを押す

右クリック → 検証（Mac では「要素を検証」）を選ぶ

Cmd + Option + I(Mac) / Ctrl + Shift + I(Windows / Linux)
どれでもOKです。筆者はF12一択で慣れました。

 「要素を検査」でHTMLとCSSを見る先ほど作った index-with-css.html をブラウザで開き、DevToolsを立ち上げてみてください。
Elements（要素）タブを選ぶと、こんな感じのツリーが出ます（ASCIIで表現）。
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>外部CSS版</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>外部CSSで見た目を当てる</h1>
    <p>この段落には style.css の p セレクタが効いています。</p>
    <div class="card">
      <h2>カードの見出し</h2>
      <p>この div には class="card" が付いているので、背景色と余白が当たります。</p>
    </div>
  </body>
</html>
このツリーの中で、例えば <div class="card"> の行をクリックすると、右側のStylesパネル（スタイルパネル）に、そこに当たっているCSSが全部並びます。
.card {
  background-color: #f5f5f5;
  padding: 16px;
  margin: 24px 0;
}
書いたCSSが、ちゃんと効いている。これを自分の目で確認できるわけです。

 CSSが効かないときの1st手段ここが本題です。
筆者が実体験で一番助けられたのは、CSSが効かないときにまずDevToolsを開く習慣でした。
CSSファイルを書いたのに色が変わらない
クラス名を付けたのに余白が入らない
何が原因か分からない
こういうとき、DevToolsを開いて該当要素を選べば、ほぼ原因が一瞬で分かります。
よくあるパターンはこんな感じです。

<link rel="stylesheet" href="style.css"> のパスが間違っていてCSSが読み込まれていない → NetworkタブでCSSが404になっていることを確認

クラス名のタイポ（HTMLは card なのにCSSでは .cord と書いた） → Stylesパネルに何もCSSが当たっていないのを確認
別のCSSで上書きされている → Stylesパネルで打ち消し線付きの宣言が出ている（取り消し線のような表示です）
特に3つ目、打ち消し線で表示される宣言は「優先度で負けた」ルールです。

初学者の方は「書いたCSSが壊れた」と誤解しがちですが、DevTools側の仕様なので心配しないでください。

 この習慣はReactでもそのまま使えるDevToolsの使い方を覚えておくと、Reactに入ってからも同じ手順でデバッグできます。
コンポーネントが変な場所に出ている → Elementsタブで実際のHTMLツリーを見れば原因が分かる
スタイルが効いていない → Stylesパネルで当たっているCSSを確認
CSSが効かないときは、まずDevTools。 これだけ覚えておけば、React以降もずっと使える武器になります。

 セクション6：ここまでがReactのどこに接続するか最後に、ここまで学んだことがReactのどこに繋がるかを1枚の図で整理しておきます。

 全体の見取り図[HTML]          タグで骨組みを作る（間取り図）
  ↓
[CSS]           見た目を指定する（内装）
  ↓
[JavaScript]    ふるまいを足す（スイッチを押したら電気がつく）
  ↓
[React]         上の3つを、JSでまとめて動的に組み立てる
Reactは、HTMLを消し去って別の何かを書いているわけではありません。

最終的にブラウザに届くのはHTMLです。
ただ、そのHTMLをJavaScriptに組み立てさせている、それがReactです。

 JSXとは何か（予告レベル）連載の後のほうで出てきますが、Reactでは JSX（あるいはTypeScript版のTSX）という、HTMLに似た書き方でUIを記述します。
function Card() {
  return (
    <div className="card">
      <h2>カードの見出し</h2>
      <p>これはReactのコンポーネントです。</p>
    </div>
  );
}
ここで、

<div className="card">：HTMLの class が className に変わっている

<div> <h2> <p> のタグ名：HTMLと同じ
ネスト構造：HTMLと同じ
となっているのが分かります。
つまり、HTMLの知識は、Reactに入ってもそのまま9割方使えます。
Reactは最終的にHTMLタグを生成する仕組み。だからHTMLの知識は、捨てずに持っていける資産になります。

 まとめ：Reactを触る前に知るHTMLとCSSの最低限最後に、タイトルの問い「Reactを触る前に知るHTMLとCSSの最低限」にちゃんと答えておきます。
筆者の答えは、

HTMLは、タグ9個と属性4つを押さえれば、Reactに入る前の前提としては十分：タグは <div> / <h1> / <p> / <button> / <input> / <a> / <img> / <ul> / <li>、属性は class / id / href / src

CSSは、当て方2通りとプロパティ5つが分かっていればスタートラインに立てる：当て方は外部CSS / style属性、プロパティは color / background-color / font-size / padding / margin
DevToolsを"答え合わせツール"として最初から習慣化しておくと、Reactに入ってからも同じ手順でデバッグできる
です。
本記事で扱った内容は、MDNの「HTML入門」「CSS入門」にもっと詳しい情報があります。

もっと深掘りしたい方は、そちらも合わせてどうぞ。
MDN：HTML入門
MDN：CSS入門
ただ、連載を進めるだけなら、この記事で紹介した範囲で十分です。

「足りなくなったら足す」くらいの気持ちで、次の記事に進んでもらえたらと思います。

 次の記事
 この記事の手を動かすヒント最後にひとつだけ、お願いです。
この記事で紹介した4つのHTMLファイル（index.html / index-with-attrs.html / index-with-css.html + style.css / inline-style.html）を、ぜひ自分の手で作って、ブラウザで開いてみてください。
読むだけより、手を動かすほうが3倍くらい早く身につきます（筆者の体感）。
DevToolsを開いて、CSSの値を書き換えて遊んでみるのも楽しいです。

書き換えはそのタブを閉じれば元に戻るので、壊す心配はありません。

 前の記事 / 次の記事
前の記事：なし（この記事が連載1本目です）

次の記事：【Part1】【No.002】Reactに必要なJavaScript基礎の最低限
Part 1全体の流れは、冒頭の「この連載について」セクションの表をご参照ください。
それでは、次の記事でまたお会いしましょう！

ペンギンエンジニアでした。

 株式会社 ONE WEDGEhttps://onewedge.co.jp/
株式会社ONE WEDGEは、Webシステム開発・SES・AI/DX支援を行うIT企業です。

生成AIを活用した業務効率化や次世代システム開発にも注力しており、企業の課題解決だけでなく、エンジニア一人ひとりの成長にも本気で向き合っています。

また、技術は「一人で学ぶもの」ではなく、「仲間と成長するもの」だと考え、社内外でのコミュニティづくりにも力を入れています。

タグ	役割
`<div>`	何でも入れる汎用の箱
`<h1>` 〜 `<h6>`	見出し（h1が一番大きい）
`<p>`	段落
`<button>`	ボタン
`<input>`	入力欄（終了タグなし）
`<a>`	リンク
`<img>`	画像（終了タグなし）
`<ul>`	箇条書きリスト（ulの中にliを入れる）
`<li>`	リストの各項目

属性	役割
`class`	CSSやJavaScriptから参照するための「名札」。同じ値を複数要素に付けられる
`id`	ページ内で1つだけのユニークな名札
`href`	`<a>` タグのリンク先URL
`src`	`<img>` タグの画像URL（パス）

通し番号	タイトル	核心メッセージ
【Part1】【No.001】（本記事）	Reactを触る前に知るHTMLとCSSの最低限	HTMLは入れ物のネスト、CSSは見た目を当てる仕組み
【Part1】【No.002】	Reactに必要なJavaScript基礎の最低限	let/const、データ型、配列、オブジェクト、関数
【Part1】【No.003】	React頻出のモダンJS	アロー関数・分割代入・スプレッド・テンプレートリテラル
【Part1】【No.004】	配列メソッド	map / filter / reduce / find
【Part1】【No.005】	ES Modules	import / export / default
【Part1】【No.006】	TypeScript超入門	JSに型を足すと何が嬉しいか

プロパティ	役割
`color`	文字色
`background-color`	背景色
`font-size`	文字サイズ
`padding`	内側の余白（コンテンツと境界の間）
`margin`	外側の余白（他の要素との距離）

この連載について

Part 1 全体の流れ（全6本）

今日の結論

この記事を読むと分かること

前提 / 全体像

セクション1：なぜReact入門の1本目がHTMLとCSSなのか

Reactを1文で説明すると

間取り図とロボットのたとえ

SES現場で見てきた光景

一番印象に残っているシーン

セクション2：HTMLは「タグという入れ物」をネストする

最小のHTML

それぞれの行の意味

タグは「開始タグ〜終了タグの間に何かを入れる入れ物」

Reactに入る前に覚えておくタグ9個

セクション3：属性はタグの「追加情報」

属性の書き方

最初に覚えておく属性4つ

属性の具体例を分解する

Reactで変わる話（予告レベル）

セクション4：CSSは「どのタグに、どう見せるか」を指示する

CSSの基本形

CSSの当て方は2通り（この記事の範囲では）

当て方1：外部CSS（本命）

最低限覚えておく5プロパティ

当て方2：style属性（Reactでも顔を出すので紹介）

Reactで変わる話（予告レベル）

セクション5：DevToolsで"答え合わせ"する習慣をつける

DevToolsとは何か

開き方

「要素を検査」でHTMLとCSSを見る

CSSが効かないときの1st手段

この習慣はReactでもそのまま使える

セクション6：ここまでがReactのどこに接続するか

全体の見取り図

JSXとは何か（予告レベル）

まとめ：Reactを触る前に知るHTMLとCSSの最低限

次の記事

この記事の手を動かすヒント

前の記事 / 次の記事

株式会社 ONE WEDGE

Discussion