結論から言うと、書けます。コードとは、むずかしく言えば「コンピューターへの指示書」。やさしく言えば、「コンピューターにお願いごとを伝えるための、決まった書き方の文章」です。

わたしたちが友だちに「牛乳買ってきて」とお願いするように、コンピューターにも「ここに大きな文字で"こんにちは"と出して」とお願いします。ただ、コンピューターは日本語の空気を読んでくれないので、決まった書き方（＝言語）で、きっちり伝える必要がある。その決まった書き方で書いた文章が「コード」です。それだけ。

だから、覚えることは「天才的なひらめき」ではなく、「お願いの書き方のルール」。九九や、料理のレシピの読み方を覚えるのと同じ種類の話です。怖くありません。

いま見ているこの画面も、あなたが毎日見るどんなサイトも、煎じ詰めればたった3つの材料でできています。役割がきれいに分かれているので、まずこの3つだけ覚えれば、地図は完成です。

順番にも意味があります。まず HTML で骨組みを作り、次に CSS で見た目を着せ、最後に必要なところだけ JavaScript で動かす。家を建てるのと同じで、柱（骨組み）が先、内装（見た目）が後、電気(動き)は仕上げ。この本もその順番——STEP1でHTML、STEP2でCSS、STEP3でJavaScript——で進みます。

もう一人だけ、登場人物を紹介します。ブラウザです。Chrome（クローム）、Safari（サファリ）、Edge（エッジ）——あなたが今このページを見るのに使っているアプリ、それがブラウザです。

ブラウザの仕事は、「あなたが書いた3つの材料（HTML・CSS・JS）を読んで、画面にちゃんと組み立てて表示する」こと。あなたは材料を用意する係、ブラウザはそれを料理して出す係。だから——

この「書く → ブラウザで開く → 表示される」が、Webページ作りのすべての基本動作です。次のSTEP1で、さっそく本当にやってみます。

説明より先に、成功体験を1つ。次のたった1行が、あなたの最初のWebページです。やってみましょう（読むだけでもOK）。

おめでとうございます。もう「Webページを作ったことがある人」です。大げさではなく、ここからやることは全部、この1行に部品を足していくだけです。

さっきの <h1> と </h1>。これをタグと呼びます。HTMLの9割はこのタグでできているので、ここだけ押さえれば大丈夫。仕組みはとても単純です。

<h1> の h1 は "heading 1（見出し1）" の略。</h1> のようにスラッシュ / が付いた方が「おわり」の合図です。この「はさむ」だけが、タグのすべて。よく使うタグは、ほんの数種類です。

タグがわかれば、あとは足し算です。見出しの下に、文章・画像・リンクを並べてみましょう。上から書いた順に、上から表示されます。

これで、立派な1ページの完成です。中身（骨組み）はもうできました。でも…なんだか味気ないですよね。真っ黒な文字が、左に寄って並んでいるだけ。ここに色や大きさをつけて"お店の雰囲気"を出すのが、次のSTEP2「CSS」の役割です。

STEP1で作ったページは、真っ黒で左寄せの、そっけない見た目でした。CSSは、そこに「色はこれ」「文字はこの大きさ」「まん中に寄せて」と見た目の指示を足す役割です。まず、たった1行の効き目を見てください。

CSSの書き方は、いつもこの形です。日本語に訳すと、こう読めます。

「どこに { 何を: どうする; }」——この3点セットだけ。color（色）を font-size（文字の大きさ）や text-align: center（まん中に寄せる）に変えれば、いろんな見た目を指示できます。

h1 { ... } と書くと、ページ中の見出し全部が同じ見た目になります。でも「この見出しだけ特別にしたい」ときもある。そこで登場するのがクラス——「印（ふだ）を付けて、その印の所だけ狙い撃ちする」仕組みです。

CSS側で先頭に点 . を付けた .title は「title という印がある所だけ」という意味。これで、狙った部品だけを着せ替えられます。さあ、STEP1の味気ないページ全体に、CSSで"お店らしさ"を着せてみましょう。

HTMLで骨組み、CSSで見た目。最後の材料JavaScriptは「動き」の担当です。「ボタンを押したら」「スクロールしたら」といったきっかけに反応して、画面を変化させます。まずは、いちばん基本の「押したら反応」を作ってみましょう。

やっていることは、たった2ステップ。①「押されたら」というきっかけを決める → ②そのとき何をするか（メッセージを出す）を書く。この「きっかけ → する事」の組み合わせが、JavaScriptの基本の形です。難しい記号は、慣れれば模様のように見えてきます。

JavaScriptは楽しくて、つい色々動かしたくなります。でも動きは、多いほど良いものではありません。むしろ逆で、必要な所にだけ、少しが上品で、しかも壊れにくい。

• 動きが多いページは重くなり、スマホでカクつきやすい。
• 過剰なアニメーションは、読み手を疲れさせる。
• 動く部分が増えるほど、壊れる可能性も増える。

だから、作る順番は「骨組み(HTML)→見た目(CSS)→必要なところだけ動き(JS)」。多くの美しいサイトは、実はJavaScriptをほとんど使っていません。「まず動かさない。どうしても要る所だけ、少し動かす」——これがプロの感覚です。

ここまでで、Webページの3つの材料（HTML・CSS・JavaScript）を全部さわりました。骨組みを作り、見た目を着せ、動きを1つ付けた。これがフロントエンドの"ぜんぶ"の土台です。次のSTEP4では、「じゃあ世の中の React とか Next とかいう横文字は何なの？」に、この体験の延長で答えます。

STEP3までで、1ページは作れるようになりました。でも実際のサイトは、トップ・メニュー・お知らせ…と何ページもあります。そして、どのページの上にも同じロゴやメニューを出したい。すると、こんな問題が起きます。

コンポーネント＝名前を付けて使い回す、画面の部品。ボタンも、メニューも、カードも、ページ全体も、大きさが違うだけで全部"部品"にできます。えらいのは賢いからではなく、「1か所直せば、使っている全部に反映される」から、人間が楽になる——ただそれだけです。

この「部品にして使い回す」を、素のHTML/CSS/JSだけでやろうとすると、実は結構めんどうです。そこで「部品化や、データと画面の連動を、楽にやってくれる道具」が生まれました。それが、あなたを怖がらせてきた横文字の正体です。

ポイントは1つ。これらは全部、STEP1〜3で作った土台の"続き"であって、別世界ではありません。「素のやり方だと大変なところ」を、道具が肩代わりしてくれる。それだけ。だから——

ここまで作った index.html。ダブルクリックすれば表示されますが、それはあなたのパソコンの中だけの話。友だちに「見て！」とURLを送ることは、まだできません。人に見せるには、「ネット上の"棚"にファイルを置く」必要があります。この「棚に置いて、誰でも見られるようにする」ことを公開（デプロイ）と呼びます。

難しそうに聞こえますが、いまは「フォルダをドラッグ＆ドロップするだけ」で公開できるサービスが、いくつも無料であります。代表的なのはこのあたり。どれも個人サイトなら無料で始められます。

公開すると mofu-cafe.pages.dev のようなURLがもらえますが、「自分のお店らしい名前にしたい」と思うはず。そこでドメイン——サイトの"住所の名前"——を用意します。mofu-cafe.com のような、覚えやすい名前です。

ドメインは年に1,000〜2,000円ほどで、好きな名前を借りられます（早い者勝ち）。借りた名前を、さっきの公開サービスに「この住所を使ってね」とつなぐ。これで、あなたのお店の正式なURLの完成です。

STEP4で話した通り、これらは今すぐ覚えなくて大丈夫。でも「聞いたことはあるけど何？」を放っておくのも気持ち悪いもの。ここは辞書として、気になった言葉だけ引いてください。全部、STEP1〜3の土台の"続き"です。

① 部品を作る道具（STEP4のなかま）

② 組み立て・表示のしかた

③ 見た目（CSSのなかま）

④ 裏方の道具（ふつう自動で動く）

⑤ 安全・公開まわり