HTMLでimageタグを使って画像を表示する方法【初心者向け】
THML初心者向けに、【imageタグ】を使って画像を表示する方法を解説した記事です。imgタグと一緒に使用する、src属性、alt属性、title属性の使い方も紹介。サンプルコードを使って実践してみましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
この記事では、HTMLでimageタグを使って画像を表示する方法をご紹介します。
- Webページに画像を表示するにはどうすれば良いのだろう
- 文字だらけの味気ないWebページを豪華にしたい！
- Webページと写真ファイルってどんな関係があるんだ？
なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。
うまく画像をつかって、おしゃれなWebページを作ってくださいね。
そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。
目次
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
imageタグを使って画像を表示する方法について詳しく説明していくね！
お願いします！
【動画でも解説しています。クリックで見る！】
画像を表示する方法
HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。
<img src="image.png" alt="海の写真" title="空と海">
それぞれ1つずつ確認していきましょう。
imageタグ <img … >
ここには画像を表示しますよ、ということを示します。
ソース属性 src=”…”
ソースは、出所や源泉という意味です。
表示する画像ファイルの、ファイル名やファイルの場所を示します。
タイトル属性 title=”….”
画像のタイトルを指定します。
オルト属性 alt=”…”
オルタナティブ、代替の略です。
目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。
Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。
では具体例をみてみましょう。
表示したい画像ファイルを用意してsrc属性で指定しましょう。
ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。
<img src="image.png" alt="海の写真" title="空と海">
画像が表示されました。
マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。
基本的な使い方はこれだけです。
サイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！
そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。
src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。
alt属性は代替テキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
画像ファイルを指定する方法
HTMLで、画像を始めとする外部ファイルと連携をするときには、ファイルの場所やファイル名で、どのファイルかを指定します。
この、どのファイルかを指定するための記述方法を、パス（path = 道順）と言います。
Webページを作っている各ファイルは、こちらの図のようなフォルダ構成になっていることがよくあります。
このフォルダ構成を意識して、HTMLファイルにフォルダ名やファイル名を記述して道順を示していくんですね。
パスの書き方には、絶対パスと相対パスの2種類あります。
それぞれ詳しく説明しますね。
絶対パス
HTMLファイルの位置は関係なく、基準となる位置からの道順を示すのが絶対パス。
市役所に行くには、駅から南に300m・・・と、基準となる場所から示す道順です。
絶対パスの1つは、Webサイトの各ファイルをまとめている、おおもとのフォルダからの場所を示す方法です。
今回の図では、demoというフォルダがおおもとですね。
パスの記法では、先頭に置いた「 / 」スラッシュの記号をルート（根本）と呼び「おおもとのフォルダ」という意味があります。
また、英単語の後に「 / 」スラッシュ記号を置くことで、フォルダ名を示します。
実際にimgタグのsrcに、ルートからimage.jpgまでのパスを記述すると、このようになります。
<img src="/images/image.jpg" >
分解して翻訳すると、こんな意味ですね。
「 / 」おおもとのフォルダ内の 「 images/ 」images というフォルダ内の 「 image.jpg 」image.jpg というファイル
この道順に沿って、HTMLは表示する画像ファイルを見つけるのです。
また、すでにインターネット上に公開されている画像を指定する場合は、URLで記載することもできます。
<img src="https://techacademy.jp/sample/image.jpg" >
URLを用いた記法も絶対パスの1つです。
HTMLファイルがどこにあるかは関係なく、公開されているWebサイトを基準に道順を示しているんですね。
相対パス
パスを記述するHTMLファイルと指定するファイルの、位置関係を意識して道順を示すのが相対パスです。
市役所に行くには、ココから北に500m・・・と、今いる場所ココを基準に示す道順です。
相対パスは、パスを記述するHTMLファイルとの位置関係を示す方法です。
いくつかのパターンで、具体的に説明していきます。
HTMLとファイルが同階層にある場合
このようなファイル構成で、index.htmlから同じフォルダ内にあるimage.jpgを指し示す方法です。
パスの記法で、文頭の「 ./ 」ドットスラッシュ記号をカレント（現在位置）と呼び、パスを記述したファイルがあるフォルダを示します。
imgタグのsrcに、カレント記号を使ってからimage.jpgまでのパスを記述すると、このようになります。
<img src="./image.jpg" >
また、カレント記号は省略することもできます。
<img src="image.jpg" >
どちらの記法でも、記述したHTMLファイルと同じフォルダ内のimage.jpgを指し示しています。
ファイルがHTMLより下のフォルダ階層にある場合
次に、こちらの図のように、index.htmlの下層フォルダにあるimage.jpgを示す場合です。
このパスは、今まで説明したカレントやフォルダ名のパス記法で、以下のように記述します。
<img src="./images/image.jpg" >
また、カレント記号を省略すると、以下のようにも記述できますね。
<img src="images/image.jpg" >
ファイルがHTMLより上のフォルダ階層にある場合
最後に、index.htmlの上層フォルダにあるimage.jpgを示す場合です。
パスの記法では先頭の「 ../ 」ドットドットスラッシュ記号をペアレント（親）と呼び、上位のフォルダ、親フォルダを示します。
ファイルが上位のフォルダ階層にある場合のパスは、親フォルダ記号を使ってこのように記述します。
<img src="../image.jpg" >
これを応用すると、下記のように複雑なパスも簡単に示すことができます。
親フォルダの中にある、imagesフォルダの中にある、image.jpgを示すパスは、このように記述します。
<img src="../images/image.jpg" >
パスの記号の意味が理解できると、簡単に記述することができますね。
imgタグを使って画像ファイルを表示するには、パスを記述して正しい道順を示すことがとても大事ですので、ぜひマスターしてください。
【応用】画像の表示スタイルを調整する
画像の表示スタイルは、imgタグにCSSを指定して調整していきます。
※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。
画像の大きさを調整する
imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。
はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。
画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。
img.image1{
width: 50px;
}
img.image2{
height: 40px;
}
img.image2{
width: 100%;
}幅や高さは、ピクセルを示すpxや、親要素の何倍かを示す％という単位で指定します。
意識してほしいのは、画像ファイルそれぞれにある縦幅と横幅の比率です。
imgタグのCSSでは、幅か高さ、どちらかを指定すると、縦横比を維持したまま、もう一方が自動的に決まります。
そして両方を指定すると、縦横比を崩して高さと幅を変更するので、潰れたような画像になってしまいます。
そのため、imgタグにCSSを指定するときは、幅か高さどちらかを指定して、もう一方は指定しないことが多いです。
imgタグにCSSを指定して幅や高さを調整するときは、注意してくださいね。
左右中央揃えを調整する
画像の表示位置を調整する場合、左寄せ、右寄せ、中央寄せの指定がシンプルで使いやすいです。
imgタグを囲っている親要素の中で、imgタグを左右中央のどの位置に表示するか指定します。
コード
<div class="left">
<img src="image.jpg">
</div>
<div class="center">
<img src="image.jpg">
</div>
<div class="right">
<img src="image.jpg">
</div>
上記HTMLのように、imgタグを囲ったdiv要素を作ります。
実行結果
背景が水色になっている箇所が、親のdiv要素の領域ですね。
親要素の領域のなかで、画像を左右中央どこに表示するかは、親要素にtext-alignというCSSを付与します。
div.left {
text-align: left;
}
div.center {
text-align: center;
}
div.right {
text-align: right;
}left左寄せ、rightは右寄せ、centerは中央です。
中央揃えをしたい場合など、どの領域において中央にしたいのか、というのを意識してくださいね。
【注意】画像のリンク切れ
ここで1つ注意点です。
例えば、「image.png」のファイルを「folder」というフォルダに移動したら画像が消えてしまいました。
いったいなにが起こったのでしょうか？
これはHTMLファイルと画像ファイル「image.png」が異なる階層に置かれてしまったためです。
folderから「image.png」を取り出して、HTMLファイルと同じ階層（デスクトップ上）に置いてリロードすることで、再び画像を表示することができます。
この場合、src属性の指定に正しい位置情報を記入することでも画像が表示されるようになります。
ここでは folder のなかの「image.png」ファイルなので「folder/image.png」と記入します。
※この書き方の詳細は絶対パスと相対パスの違いの記事をご覧ください。
画像が再び表示されました。
このように、ファイルや画像が指定された場所にきちんと存在していないと、リンクが切れて画像が表示されなくなります。
サーバにアップされた画像を指定する場合は、URLを間違えるともちろんエラーが発生します。
src属性の元データがどのファイルのどの階層にあるのかをきちんと把握して、位置情報を正しく記述し、リンク切れが起こらないように気をつけましょう。
HTMLについてさらに学びたい場合は、HTMLでアンカータグを使う方法も合わせてご覧ください。
監修してくれたメンター
| 田屋 貴祥
最新テクノロジーを広めるという情熱を持ちクラウドベンダーでセールスエンジニアに従事。 その後、フリーランスWeb制作をしながら、海外で人生の楽しみ方を学ぶ。 海外のWeb制作Tipsを翻訳し実践するTechブログ制作中。 https://webcreate.bokutachino.world/ 最近のマイトレンドはCSS3で脱JavaScript。 |
あれ？imgタグのsrc属性に他の人のサイトの画像を指定してたんですけど、さっき見たら表示されなくなってました。
他人のサイト上の画像を直接リンクするのは、あんまり良くないんだよ。
ええー！そうなんですか。
マナーかな。設定次第では直リンクされないようにもできるけど。表示されない時のためにalt属性はつけたほうがいいね。
今回はimageタグを使って画像を表示する方法についてご紹介しました。
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
