HTMLでimageタグを使って画像を表示する方法【初心者向け】
THML初心者向けに、【imageタグ】を使って画像を表示する方法を解説した記事です。imgタグと一緒に使用する、src属性、alt属性、title属性の使い方も紹介。サンプルコードを使って実践してみましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。
今回は、imageタグを使って画像を表示する方法について解説します。
そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

今回は、HTMLに関する内容だね!

どういう内容でしょうか?

imageタグを使って画像を表示する方法について詳しく説明していくね!

お願いします!
画像を表示する方法
文書だけでなく画像を加えると、よりわかりやすく直感的なページがつくれます。今回はHTMLで画像を表示する方法を学びましょう。
画像を表示する際は、imgタグを使います。
・画像を表示する image <img>
src属性で指定した画像を表示します。単独で使えます。
・src属性 source
画像や文書など、表示したいファイルの出処を指定します。
・alt属性 alternate attribute
目の不自由な方のための読み上げ機能において、何の画像であるかを読み上げます。また、Googleなどの検索エンジンもこの属性で何の画像か判断します。
・title属性
画像やリンク先のタイトルを表示します。
さっそく例をみてみましょう。
表示したい画像ファイルを用意してsrc属性で指定しましょう。ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。
<img src="image.png" alt="海の写真" title="空と海">
画像が表示されました。マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。
基本的な使い方はこれだけです。

サイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね!

そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。

src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。

alt属性は代替えテキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。
画像のリンク切れ
ここで1つ注意点です。
例えば、「image.png」のファイルを「folder」というフォルダに移動したら画像が消えてしまいました。一体なにが起こったのでしょうか?
これはhtmlファイルと画像ファイル「image.png」が異なる階層に置かれてしまったためです。folderから「image.png」を取り出して、htmlファイルと同じ階層(デスクトップ上)に置いてリロードすることで、再び画像を表示することができます。
この場合、src属性の指定に正しい位置情報を記入することでも画像が表示されるようになります。ここでは folder のなかの「image.png」ファイルなので「folder/image.png」と記入します。(この書き方の詳細は絶対パスと相対パスの違いの記事をご覧ください)
画像が再び表示されました。
このように、ファイルや画像が指定された場所にきちんと存在していないと、リンクが切れて画像が表示されなくなります。サーバーにアップされた画像を指定する場合は、URLを間違えるともちろんエラーが発生します。
src属性の元データがどのファイルのどの階層にあるのかをきちんと把握して、位置情報を正しく記述し、リンク切れが起こらないように気をつけましょう。
HTMLについてさらに学びたい場合は、HTMLでアンカータグを使う方法も合わせてご覧ください。

あれ?imgタグのsrc属性に他の人のサイトの画像を指定してたんですけど、さっき見たら表示されなくなってました。

他人のサイト上の画像を直接リンクするのは、あんまり良くないんだよ。

ええー!そうなんですか。

マナーかな。設定次第では直リンクされないようにも出来るけど。表示されない時のためにalt属性はつけたほうがいいね。
今回はimageタグを使って画像を表示する方法についてご紹介しました。
TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。