HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。

今回は、imageタグを使って画像を表示する方法について解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

画像を表示する方法

文書だけでなく画像を加えると、よりわかりやすく直感的なページがつくれます。今回はHTMLで画像を表示する方法を学びましょう。

画像を表示する際は、imgタグを使います。

 

・画像を表示する  image <img>

src属性で指定した画像を表示します。単独で使えます。

・src属性  source

画像や文書など、表示したいファイルの出処を指定します。

・alt属性  alternate attribute

目の不自由な方のための読み上げ機能において、何の画像であるかを読み上げます。また、Googleなどの検索エンジンもこの属性で何の画像か判断します。

・title属性

画像やリンク先のタイトルを表示します。

 

さっそく例をみてみましょう。

表示したい画像ファイルを用意してsrc属性で指定しましょう。ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。

<img src="image.png" alt="海の写真" title="空と海">

画像が表示されました。マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。

基本的な使い方はこれだけです。

 

 

画像のリンク切れ

ここで1つ注意点です。

例えば、「image.png」のファイルを「folder」というフォルダに移動したら画像が消えてしまいました。一体なにが起こったのでしょうか？

これはhtmlファイルと画像ファイル「image.png」が異なる階層に置かれてしまったためです。folderから「image.png」を取り出して、htmlファイルと同じ階層（デスクトップ上）に置いてリロードすることで、再び画像を表示することができます。

 

この場合、src属性の指定に正しい位置情報を記入することでも画像が表示されるようになります。ここでは folder のなかの「image.png」ファイルなので「folder/image.png」と記入します。（この書き方の詳細は絶対パスと相対パスの違いの記事をご覧ください）

画像が再び表示されました。

このように、ファイルや画像が指定された場所にきちんと存在していないと、リンクが切れて画像が表示されなくなります。サーバーにアップされた画像を指定する場合は、URLを間違えるともちろんエラーが発生します。

src属性の元データがどのファイルのどの階層にあるのかをきちんと把握して、位置情報を正しく記述し、リンク切れが起こらないように気をつけましょう。

HTMLについてさらに学びたい場合は、HTMLでアンカータグを使う方法も合わせてご覧ください。

 

 

今回はimageタグを使って画像を表示する方法についてご紹介しました。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。