catch-img

HTMLで画像を表示する方法解説。imageタグの使い方と注意点

画像が適切に配置されているWebページは、テキストのみのページに比べ、格段に見た目が良くなります。HTMLファイルで画像を表示するには、imageタグを使うのが基本です。タグの使用方法や、画像の位置・大きさを変える方法などを解説します。

目次[非表示]

  1. 1.HTMLで画像を表示させるには?
    1. 1.1.imageタグを使おう
      1. 1.1.1.imageタグの記述例
    2. 1.2.絶対パスと相対パス
  2. 2.画像の位置を指定する方法
    1. 2.1.画像を右寄せ、中央に寄せる
    2. 2.2.画像の位置を指定して表示する
    3. 2.3.画像の大きさを指定する
  3. 3.画像にタイトルやテキストを付ける
    1. 3.1.代替テキストの付属
    2. 3.2.タイトルの表示方法
  4. 4.imageタグで画像を自由に表示しよう

HTMLで画像を表示させるには?

タグを使ってブラウザ上に画像表示させる方法を紹介します。絶対パスと相対パスの意味も押さえておきましょう。

imageタグを使おう

HTMLでブラウザ上に画像を表示させるには、imageタグを用います。書き方の基本は下記の通りです。

<img src="画像のある場所">

HTMLのタグには、終了タグが存在しないものがいくつかあります。imageタグもその一つであり、無理に終了タグを付けるとエラーが出るため注意が必要です。

src属性(srcはSourceの略)で指定する『画像のある場所』は、絶対パスまたは相対パスで指定します。それぞれの意味については後述します。

imageタグの記述例

imageタグは、具体的に以下のような形で記述します。

<img src="https://abc-xyz.com/images/topbanner.jpg">

<img src="images/topbanner.jpg">

上が絶対パスを指定した書き方、下が相対パスを指定した書き方です。どちらも同じ画像が表示されます。

絶対パスと相対パス

絶対パスとは、目的とする画像ファイルまでの道のりを全て記述した経路です。基本的にはURLで書きます。

リンク切れのミスを起こしにくいことがメリットですが、オフライン環境でのテストができないことや、処理が重くなる可能性があることなどが欠点です。

相対パスは、画像ファイルを表示させるHTMLファイルを起点とし、そこからの道のりを記述した経路です。HTMLファイルと画像ファイルが同じ階層にある場合、画像ファイル名がそのまま相対パスとなります。

前項の<img src="images/topbanner.jpg">は、HTMLファイルと同階層にimagesフォルダがあり、その中にtopbanner.jpgが入っている状態を示しています。

相対パスで記述すると表示が速くなるほか、オフライン環境でもテストが可能です。一方、HTMLファイルの場所を別階層へ移動させた際、パスも書き換えなければ画像ファイルが表示されなくなります。

■関連記事

  HTMLとCSSをマスターしよう。作成の基礎や学習方法を紹介 | Java・フロントエンド研修のジョブサポート HTMLとCSSは、Webサイトを作成するために開発されたプログラミング言語です。それぞれの書き方や関係性を知ることが、Webサイト作成の学習における第一歩といえるでしょう。作り方の基礎や大まかな流れ、おすすめの学習方法を紹介します Java・フロントエンド研修のジョブサポート

短期Java講座(入門5日・基礎10日)ー株式会社ジョブサポート

画像の位置を指定する方法

何も指定せずにimageタグで画像表示させた場合、オリジナルのサイズで左寄りに表示されます。画像の位置や大きさを指定する方法を覚えておきましょう。

画像を右寄せ、中央に寄せる

デフォルトでは左寄りに表示される画像を、右寄せや中央寄せにするには、pタグなどでimageタグを囲み、CSSのtext-align設定を使います。

<body>
 <p style="text-align:right">
  <img src="images/banner.jpg">
 </p>
 <p style="text-align:center">
  <img src="images/banner.jpg">
 </p>
</body>

text-align:rightが右寄せ、text-align:centerが中央寄せです。

画像の位置を指定して表示する

画像の位置を好きな場所に配置したい場合は、pタグなどを使い、CSSで画像の上部と左側の余白を指定します。

<body>
 <p style="position:absolute; top:50px; left:100px">
  <img src="img/banner1.jpg">
 </p>
 <p style="position:absolute; top:50%; left:80%">
  <img src="img/banner2.jpg">
 </p>
</body>

banner1.jpgは、画面の上端から50px、左端から100pxの位置に配置されます。また、banner2.jpgは、画面上端から画面縦幅の50%、画面左端から画面横幅の80%の位置に配置されます。bodyタグにサイズを指定している場合は、画面ではなくbodyの枠が基準です。

画像の大きさを指定する

画像の大きさは、以下のようにimageタグの中で指定できます。

<img src="images/sidebanner.jpg" width="100" >

この場合、sidebanner.jpgの横幅(width)が100pxになり、横幅と高さの比率は維持されます(ちなみに高さはheightで指定します)。例えば、sidebanner.jpgのオリジナルサイズが横幅200px×高さ100pxであった場合、上記のような記述により、横幅100px×高さ50pxとなります。

pxだけでなく、以下のように%で指定することも可能です。この場合も、画像サイズの比率は維持されます。

<img src="images/sidebanner.jpg" width="50%">

■関連記事

  初級エンジニアにおすすめのHTMLエディタ6選。搭載機能や使い方 | Java・フロントエンド研修のジョブサポート コーディングを行うにはIDE(総合開発環境)もしくはエディタを使うのが一般的です。HTMLのコーディングを行う上で初心者エンジニアでも使いやすいエディタの紹介と、エディタの選び方について解説していきます。 Java・フロントエンド研修のジョブサポート

オンライン・リモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

画像にタイトルやテキストを付ける

HTMLで表示させた画像には、タイトルやテキストを付けられます。これらを設定する理由や設定方法を解説します。

代替テキストの付属

HTMLファイルに画像を配置しても、閲覧環境に問題があると画像表示されない場合があります。代替テキストを付属しておけば、画像を読み込めない時にもテキストが表示されるため、どのような画像なのかユーザーの理解を助けることにつながります。

また、代替テキストの設定は、SEOの観点からも効果的です。Webサイトに表示させる、何らかの意味を持った画像には、全て代替テキストを付属するようにしましょう。

代替テキストは、以下のように設定します。

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

代替テキストには、画像を適切に説明するキャプションを書きましょう。キーワードを詰め込みすぎるとスパム扱いされる恐れがあるため、簡潔にまとめるのがコツです。

タイトルの表示方法

imageタグにtitle属性を含めると、ブラウザ上で画像にマウスをポイントした際、title属性に書いた内容が吹き出しとして表示されます。

タイトルの表示は、画像の内容を補足的に説明できる機能です。下記で示したように設定します。

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

なお、title属性は画像だけでなく、テキストやリンクなど全ての要素に設定することが可能です。

■関連サイト

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


imageタグで画像を自由に表示しよう

imageタグを使えば、ブラウザ上に画像を表示できます。CSSと組み合わせて使用することで、画像の位置や大きさを変更することも可能です。

画像が適切に配置されているWebページは、見やすいイメージをユーザーに与えます。imageタグを使いこなし、ページ内で自由に画像を表示してみましょう。

法人研修の実績2500名以上!若手、新人エンジニア採用後

Java研修はジョブサポートお任せ下さい


ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava研修(通学、オンライン・リモート講座)を行っています。助成金を活用すれば費用負担を軽減して研修受講ができるのため若手、新人エンジニア採用計画と合わせてご検討下さい。

新人・若手エンジニアの基礎知識、ビジネススキルを強化

プロエンジニア育成コース(Java研修1~3ヶ月)


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。