HTMLで画像を表示する方法解説。imageタグの使い方と注意点
画像が適切に配置されているWebページは、テキストのみのページに比べ、格段に見た目が良くなります。HTMLファイルで画像を表示するには、imageタグを使うのが基本です。タグの使用方法や、画像の位置・大きさを変える方法などを解説します。
目次[非表示]
- 1.HTMLで画像を表示させるには？
- 1.1.imageタグを使おう
- 1.1.1.imageタグの記述例
- 1.2.絶対パスと相対パス
- 2.画像の位置を指定する方法
- 2.1.画像を右寄せ、中央に寄せる
- 2.2.画像の位置を指定して表示する
- 2.3.画像の大きさを指定する
- 3.画像にタイトルやテキストを付ける
- 4.imageタグで画像を自由に表示しよう
HTMLで画像を表示させるには？
タグを使ってブラウザ上に画像表示させる方法を紹介します。絶対パスと相対パスの意味も押さえておきましょう。
imageタグを使おう
HTMLでブラウザ上に画像を表示させるには、imageタグを用います。書き方の基本は下記の通りです。
HTMLのタグには、終了タグが存在しないものがいくつかあります。imageタグもその一つであり、無理に終了タグを付けるとエラーが出るため注意が必要です。
src属性（srcはSourceの略）で指定する『画像のある場所』は、絶対パスまたは相対パスで指定します。それぞれの意味については後述します。
imageタグの記述例
imageタグは、具体的に以下のような形で記述します。
上が絶対パスを指定した書き方、下が相対パスを指定した書き方です。どちらも同じ画像が表示されます。
絶対パスと相対パス
絶対パスとは、目的とする画像ファイルまでの道のりを全て記述した経路です。基本的にはURLで書きます。
リンク切れのミスを起こしにくいことがメリットですが、オフライン環境でのテストができないことや、処理が重くなる可能性があることなどが欠点です。
相対パスは、画像ファイルを表示させるHTMLファイルを起点とし、そこからの道のりを記述した経路です。HTMLファイルと画像ファイルが同じ階層にある場合、画像ファイル名がそのまま相対パスとなります。
前項の<img src="images/topbanner.jpg">は、HTMLファイルと同階層にimagesフォルダがあり、その中にtopbanner.jpgが入っている状態を示しています。
相対パスで記述すると表示が速くなるほか、オフライン環境でもテストが可能です。一方、HTMLファイルの場所を別階層へ移動させた際、パスも書き換えなければ画像ファイルが表示されなくなります。
■関連記事
短期Java講座(入門5日・基礎10日)ー株式会社ジョブサポート
画像の位置を指定する方法
何も指定せずにimageタグで画像表示させた場合、オリジナルのサイズで左寄りに表示されます。画像の位置や大きさを指定する方法を覚えておきましょう。
画像を右寄せ、中央に寄せる
デフォルトでは左寄りに表示される画像を、右寄せや中央寄せにするには、pタグなどでimageタグを囲み、CSSのtext-align設定を使います。
text-align:rightが右寄せ、text-align:centerが中央寄せです。
画像の位置を指定して表示する
画像の位置を好きな場所に配置したい場合は、pタグなどを使い、CSSで画像の上部と左側の余白を指定します。
banner1.jpgは、画面の上端から50px、左端から100pxの位置に配置されます。また、banner2.jpgは、画面上端から画面縦幅の50％、画面左端から画面横幅の80％の位置に配置されます。bodyタグにサイズを指定している場合は、画面ではなくbodyの枠が基準です。
画像の大きさを指定する
画像の大きさは、以下のようにimageタグの中で指定できます。
この場合、sidebanner.jpgの横幅（width）が100pxになり、横幅と高さの比率は維持されます（ちなみに高さはheightで指定します）。例えば、sidebanner.jpgのオリジナルサイズが横幅200px×高さ100pxであった場合、上記のような記述により、横幅100px×高さ50pxとなります。
pxだけでなく、以下のように％で指定することも可能です。この場合も、画像サイズの比率は維持されます。
■関連記事
オンライン・リモート講座(入門5日・基礎10日)ー株式会社ジョブサポート
画像にタイトルやテキストを付ける
HTMLで表示させた画像には、タイトルやテキストを付けられます。これらを設定する理由や設定方法を解説します。
代替テキストの付属
HTMLファイルに画像を配置しても、閲覧環境に問題があると画像表示されない場合があります。代替テキストを付属しておけば、画像を読み込めない時にもテキストが表示されるため、どのような画像なのかユーザーの理解を助けることにつながります。
また、代替テキストの設定は、SEOの観点からも効果的です。Webサイトに表示させる、何らかの意味を持った画像には、全て代替テキストを付属するようにしましょう。
代替テキストは、以下のように設定します。
代替テキストには、画像を適切に説明するキャプションを書きましょう。キーワードを詰め込みすぎるとスパム扱いされる恐れがあるため、簡潔にまとめるのがコツです。
タイトルの表示方法
imageタグにtitle属性を含めると、ブラウザ上で画像にマウスをポイントした際、title属性に書いた内容が吹き出しとして表示されます。
タイトルの表示は、画像の内容を補足的に説明できる機能です。下記で示したように設定します。
なお、title属性は画像だけでなく、テキストやリンクなど全ての要素に設定することが可能です。
■関連サイト
imageタグで画像を自由に表示しよう
imageタグを使えば、ブラウザ上に画像を表示できます。CSSと組み合わせて使用することで、画像の位置や大きさを変更することも可能です。
画像が適切に配置されているWebページは、見やすいイメージをユーザーに与えます。imageタグを使いこなし、ページ内で自由に画像を表示してみましょう。
