第2回：文字を書き換えて、Webページを自分のものにしよう！

みなさん、こんにちは！インストラクターの熱血担当です！前回、Web開発の世界へ足を踏み入れたみなさん。今日は、いよいよ「魔法」の第一歩を体験しますよ！

今回の目標はズバリ、「Webページに直接語りかけて、自分好みに書き換えること」です！画面に映る文字が、自分の手でパッと変わる瞬間……これ、めちゃくちゃ快感ですよ。準備はいいですか？さあ、一緒に行きましょう！

ステップ1：タグってなんだ？「箱」の正体を知ろう！

Webページは、実は「タグ」という名前の「付箋（ふせん）」で飾られた箱の集まりなんです。例えば、大きく表示したい文字には「h1」という付箋を、文章には「p」という付箋を貼るようなイメージです。

HTMLコードを見ると、こんなふうになっています。

<h1>ここにタイトルが入るよ</h1>

この「<h1>」から「</h1>」までが一つの箱です！この中身の文字を書き換えれば、画面の見た目もガラリと変わっちゃうんです。ワクワクしてきましたよね？

それでは、ブラウザの「検証ツール（開発者ツール）」を開いてみましょう！キーボードの「F12」を押すか、画面を右クリックして「検証」を選んでください。何か怖い英数字がたくさん出てきましたか？大丈夫、それが君たちの「武器」です！

「Elements（要素）」というタブの中で、<h1>を見つけてください。ダブルクリックして、中身の文字を好きな言葉に変えてみてください。例えば、「こんにちは！」を「俺の最強Webアプリ！」に書き換えて、エンターキーを叩いてみてください。

……どうですか！？画面の文字が、一瞬で変わりましたよね！？

これがWeb開発のリアルなんです。自分の書いたコードが、世界を変える。この感覚を今のうちに脳に焼き付けてください！

お疲れ様でした！今日は、Webページの「中身」を自分の手で操作する感覚を掴んでもらいました。たったこれだけのことですが、これがWebエンジニアとしての最初の一歩です。何もない画面から、自分の言葉が発信される。最高にクールだと思いませんか？

次回は、この文字たちに「色」や「形」という個性を与える「CSS」という魔法を学びます！もっともっと自分らしいページを作っていきましょう。今日書き換えたその熱い気持ちを忘れずに、また次回のレッスンでお会いしましょう！待っていますよ！