画像 <img>

解説
1. 画像を表示する
2. imgタグの書き方

問題に挑戦！

進捗を変更する

このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！

解説

1. 画像を表示する

画像を表示するには、imgタグを使います。
表示したい画像ファイルのパスをsrc属性に指定することで、Webページに画像を表示することができます。

※img は Image の略です。

2. imgタグの書き方

構文：imgタグ（画像を表示する）

<img src="画像ファイルのパス" alt="代替テキスト">

※imgタグに閉じタグは必要ありません。

例）画像を表示する

<img src="img/dummy.jpg" alt="テスト用のダミー画像">

表示結果｜例）画像を表示する

alt属性とは

alt属性には代替テキスト（画像の要約）を記述します。

alt属性に設定されたテキストは、画像が読み込まれなかった場合に表示されたり、目の不自由な方がブラウザのテキスト読み上げ機能を利用する際に使われます。

例）画像が読み込まれなかった場合の表示

imgタグにalt属性を含めるかどうかはオプションですが、アクセシビリティの観点からも、なるべく設定するようにしましょう。

問題

実践問題

(1)	VSCodeを起動し、ヘッダーメニューの「ファイル」から、「workspace_html_css」フォルダーを開いてください。
(2)	「workspace_html_css」フォルダー内の、「html_basic」フォルダー内に、「img_tag」フォルダーを新規作成してください。
(3)	「img_tag」フォルダー内に、「img」フォルダーと、「index.html」を新規作成してください。
(4)	「local_dummy.jpg」をダウンロードし、「img」フォルダー内に配置してください。
(5)	「html_basic/img_tag/index.html」をクリックで選択した状態でフッターメニューの「Go Live」ボタンをクリックし、ブラウザで表示してください。

local_dummy.jpg ダウンロード

下記コードを該当ファイルにペーストし、各問に答えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imgタグ</title>
</head>
<body>
    <!--
    （問1）14行目のimgタグの属性を下記の通り設定し、画像を表示してください。
    ・src属性：「https://digskill.net/mirror/wp-content/uploads/course/html-css/dummy.jpg」
    ・alt属性：「web上のダミー画像」 -->
    <p>web上の画像を表示しています。</p>
    <img src="" alt="">

    <!--
    （問2）21行目のimgタグの属性を下記の通り設定し、画像を表示してください。
    ・src属性：「img」フォルダー内の、「local_dummy.jpg」ファイルのパス
    ・alt属性：「localのダミー画像」 -->
    <p>ローカル（自分のPC）の画像を表示しています。</p>
    <img src="" alt="">
</body>
</html>

想定結果を表示

解答

（問1）解答を表示

<p>web上の画像を表示しています。</p>
<img src="https://digskill.net/mirror/wp-content/uploads/course/html-css/dummy.jpg" alt="web上のダミー画像">

（問2）解答を表示

<p>ローカル（自分のPC）の画像を表示しています。</p>
<img src="img/local_dummy.jpg" alt="localのダミー画像">

ソース全文を表示

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imgタグ</title>
</head>
<body>
    <!--
    （問1）14行目のimgタグの属性を下記の通り設定し、画像を表示してください。
    ・src属性：「https://digskill.net/mirror/wp-content/uploads/course/html-css/dummy.jpg」
    ・alt属性：「web上のダミー画像」 -->
    <p>web上の画像を表示しています。</p>
    <img src="https://digskill.net/mirror/wp-content/uploads/course/html-css/dummy.jpg" alt="web上のダミー画像">

    <!--
    （問2）21行目のimgタグの属性を下記の通り設定し、画像を表示してください。
    ・src属性：「img」フォルダー内の、「local_dummy.jpg」ファイルのパス
    ・alt属性：「localのダミー画像」 -->
    <p>ローカル（自分のPC）の画像を表示しています。</p>
    <img src="img/local_dummy.jpg" alt="localのダミー画像">
</body>
</html>