画像：ページに画像を追加する
Webページに画像を挿入して書式を設定します
「画像：ページに画像を追加する」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
画像：ページに画像を追加する
次のレッスンへようこそ！今日は、Webページに画像を追加する方法を学びます。画像を使うと、ページがより魅力的で楽しくなります。
HTMLの画像とは何ですか？
Webページには<img>タグを使って画像を追加します。これは自己終了タグなので、</img>のような終了タグは必要ありません。
使い方を学びましょう。
画像を追加する
画像を追加するには、src属性で画像ファイルの場所を指定します。
例：
この例では、次のように指定しています。
src：画像ファイルを指定します。alt：画像を表示できない場合の代替テキストを指定します。
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
代替テキスト（alt属性）
alt属性は画像の内容を説明します。アクセシビリティに重要で、検索エンジンが画像を理解するのにも役立ちます。
例：
画像を読み込めない場合は、代わりに「A beautiful sunset over the ocean」というテキストが表示されます。
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
画像のサイズを指定する
width属性とheight属性を使って、画像のサイズを調整できます。
例：
この例では、画像の幅を300ピクセル、高さを200ピクセルに設定しています。
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
画像にリンクを設定する
画像を<a>タグの中に配置すると、クリックできるリンクにできます。
例：
画像をクリックすると、ユーザーはhttps://example.comに移動します。
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
オンライン画像を使用する
src属性にURLを指定すると、オンライン上でホストされている画像を使用できます。
例：
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
自分で試してみましょう
画像を使った簡単なWebページを作成しましょう。次の例をご覧ください。
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
よくできました！
おめでとうございます！Webページへの画像の追加、サイズの設定、他のページへのリンク設定を学びました。画像を使うと、Webページがより興味深く、見た目にも魅力的になります。次のレッスンでは、データを整理するための表の作成方法を学びます。ページをさらに便利にしていきましょう！
よくある質問
「画像：ページに画像を追加する」レッスンは無料ですか？
はい。「画像：ページに画像を追加する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「画像：ページに画像を追加する」で何を学びますか？
Webページに画像を挿入して書式を設定します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「画像：ページに画像を追加する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 見出しと段落
- リスト：番号付きリストと箇条書きリスト
- リンク：Webをつなぐ
- 画像：ページに画像を追加する