HTMLでimageタグを使って画像を表示する方法【初心者向け】
THML初心者向けに、【imageタグ】を使って画像を表示する方法を解説した記事です。imgタグと一緒に使用する、src属性、alt属性、title属性の使い方も紹介。サンプルコードを使って実践してみましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
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属性で指定した「海の写真」と読み上げられます。
基本的な使い方はこれだけです。
サイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！
そうだね。文章だけの記事だと見出し(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デザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。
また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
