第3回：画面にキャラクター（画像）を召喚してみよう！

みなさん、こんにちは！今日もプログラミングの世界へようこそ！前回の講座で「文字」を表示させることに成功しましたね。でも、やっぱりWebページには「絵」がないと寂しいと思いませんか？

今日はついに、真っ白な画面に「キャラクター」を召喚する魔法を伝授します！自分の手で画像を呼び出した瞬間、あなたのWebアプリは一気に「作品」へと進化しますよ。さあ、ワクワクしてきましたね！準備はいいですか？

ステップ1：画像を表示させる「imgタグ」の正体

HTMLには、画像を呼び出すための専用のコマンドがあります。それが「imgタグ」です！

書き方はこれです！

ここで大事なのが「src（ソース）」という言葉。これは「この画像の住所はどこですか？」とブラウザに教えるための「属性」という名札です。この名札の中に、インターネット上の画像URLをペタッと貼るだけで、画面にキャラクターが飛び出してくるんです！

では、さっそくキーボードを叩きましょう！今回は例として、フリー素材サイトから持ってきた画像URLを使ってみます。以下のコードを、前回のindex.htmlに追記してみてください！

<h1>僕の最強キャラクター！</h1>
<img src=”https://placehold.jp/200×200.png” alt=”可愛いキャラクター”>

入力できましたか？保存してブラウザを更新してください……どうですか！？画面に画像が表示されたはずです！
※もし表示されない場合は、URLのスペルミスがないか、引用符（”）でしっかり囲まれているかチェックですよ！

さあ、ここからはあなたの番です！Google画像検索や、フリー素材サイト（「いらすとや」さんなどがおすすめ！）から、好きな画像のURLをコピーして、srcの中に書き換えてみてください。

「自分の好きなキャラが画面に現れた！」
その感動こそが、エンジニアへの第一歩です。たった一行のコードで、世界が変わる瞬間を楽しんでください！

お疲れ様でした！今日は「imgタグ」を使って、画面に命を吹き込むことができましたね。画像を配置できるだけで、Webサイトとしてのクオリティが爆上がりしました！

次回は、その画像を「好きなサイズに変える方法」や、「リンクボタンにする方法」を学びます。どんどん本格的なWebアプリらしくなっていくので、楽しみにしていてくださいね！

さあ、今のうちに色々な画像を召喚して、画面を賑やかにしておきましょう！また次回の講座でお会いしましょう！熱いプログラミングライフを！