トップページへ戻る

HTMLで画像を表示する方法

この記事を書いた人 :

HTMLで画像を表示する方法

HTMLはWebページの土台を作る言語です。HTMLを書くときは「タグ」と呼ばれる命令文を使って、文章や画像をインターネット上でどのように表示させるか定義づけていきます。「タグ」には<a>~</a>のようにリンクを作るためのタグや<p>~</p>のように段落を指定するためのタグなど様々な種類がありますが、この記事では画像を指定するときに使う「imgタグ」についてご紹介します。画像を表示するだけの指定から、サイズや配置を変えるときの指定、画像に応じたalt属性のつけ方、画像にキャプションを付ける方法など、HTMLで画像を表示するための基本的な情報がまとまっていますので、Web制作で画像を表示させたいときにお役立てください。

関連タグ:
今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ

HTMLで画像を表示するときに使うimgタグとは

imgタグの「img」は「image」の略で <img>と記述します。<>~</>のように終了タグを持たないため「空要素」と呼ばれています。<img>はその中に画像ファイルの場所を示すsrc属性や、画像の内容を説明するalt属性の要素を記述するのが一般的です。
例えば下の図のように「icon.png」という画像を表示したい場合は、<img>のタグにsrc属性で「icon.png」を指定し、さらにalt属性で画像の内容は「アオライター」であることを説明します。

例:<img src=”icon.png” alt=”アオライター”>

アオライター

絶対パスと相対パスの違い

src属性で画像の場所を指定するときに注意しなければいけないのが「パス」の記述です。「パス」とは、ファイルやディレクトリまでの道筋を示す文字列のこと。下の図1のように画像が掲載するhtmlファイルと同じ階層にあるなら<img src=”icon.png”>と記述すれば画像が表示されますが、図2のように画像がフォルダーの中に入っている場合、htmlファイルよりも階層が1つ奥になるので<img src=”images/icon.png”>と記述しなければ表示されません。

図1 htmlに<img src=”icon.png”>と記述した時の画像との位置関係

Webページの画像の情報元1

図2 htmlに<img src=”images/icon.png”>と記述した時の画像との位置関係

 Webページの画像の情報元2

相対パスとは

図1や図2のように、掲載するhtmlファイルから見て画像のファイルがどの位置にあるかで記述するパスをを相対パスと言います。画像ファイルがhtmlファイルから見て下層の場合は「/」の前に画像が格納されているフォルダー名が入ります。<img src=”icon.png”>の場合は、格納しているフォルダーが無いので<imgsrc=”./icon.png”>とも表します。
逆に画像がhtmlファイルよりも上の階層にあった場合はどうでしょう。上の階層が1つ増えるごとに「.」が入り、図3のような場合は<imgsrc=”../icon.png”>という記述になります。

図3 htmlに<img src=”../icon.png”>と記述した時の画像との位置関係

 Webページの画像の情報元3

絶対パスとは

絶対パスは、画像を掲載するhtmlファイルからの位置は関係なく、全てが最上階のファイルから目的のファイルまで全ての道筋を記述するものです。すでに公開しているサイトの場合は、図2の場合は<imgsrc=”https://data.maison/images/icon.png”>図3の場合は<imgsrc=”https://data.maison/icon.png”>と記述すれば表示されます。このように絶対パスと相対パスでは、ファイルまでたどり着く道筋を決める視点が違います。

相対パスは、Webサイトがサーバーにアップロードされていないオフラインの環境でも表示ができるので、開発の段階で利用されることが多いです。また、絶対パスに比べて記述する文字数が少ないので、ファイルが軽くなり表示速度も早くなります。その一方で、画像までのルートの起点となるhtmlファイルの位置を変えてしまうと、画像ファイルのアドレスを全て修正する手間が発生してしまいます。その点、絶対パスはhtmlファイルの位置を変えても画像ファイルのアドレスは変わりません。利用する環境に応じてどちらかの記述に統一して利用するとよいでしょう。

alt属性(代替えテキスト)とは?

alt属性は「代替えテキスト」とも呼ばれ次の3つの目的があって設定されています。

画像や動画の読み込みに失敗したとき代わりに表示される

alt属性を設定しておくと、通信状態が悪くてWebサイトの画像の読み込みに失敗したとき代わりにテキストが表示されるので画像内容を理解するのに役立ちます。また、画像にリンクを設定している場合は、altタグのテキストがアンカーテキストの代わりになります。

視覚障害がある人にも音声で画像の内容が伝わる

眼の不自由な方がPCを利用するときは、スクリーンリーダーや音声ブラウザを利用し、読み上げられた音声でコンテンツの情報を理解しますが、スクリーンリーダーや音声ブラウザは画像を伝えるときに代替えテキストを読み上げます。したがって代替えテキストには、画像の内容に沿った説明が必要です。

SEOの効果が期待できる

また、代替えテキストにはSEOの効果も期待できます。検索エンジンは画像だけでその内容を把握することができないので、altタグや画像周辺のテキスト、ファイル名などを参考にするからです。SEOに効果的なalt属性の付け方についてはこちらの記事で詳しく説明していますので参考にしてください。
alt属性の役割とは?SEOに効果的な代替テキストの付け方

代替えテキストは、ユーザーの理解を助けるため、また検索エンジンにより正確な画像の情報を伝えるために重要な役割を果たしている要素といえるでしょう。

画像に応じたalt属性のつけ方

Webページで使われる画像は、写真やイラスト、図解などさまざまです。例えば、ロゴタイプや飾りの罫線、ボタンにも画像は使われています。写真のように情景を説明できるなら、alt属性の値には説明文をつけやすいのですが、ロゴや飾りの罫線、ボタンの場合どのようなalt属性の値をつければいいのでしょうか。ちなみにalt属性は、全ての画像に必須の要素ではないため、特に意味を持たない画像や代替えテキストが必要ではない画像の場合や、画像の前後に画像内容を説明する文章がある場合などは省略することが認められています。

ロゴの画像を表示する場合

文字を画像で表示する場合は、前後に画像を説明する情報が無いことが多いため、alt属性は必ず記述しましょう。その際は、画像に記載されている文字の内容を指定しましょう。

装飾の画像を表示する場合

飾りの罫線などの装飾目的の画像を表示する場合は、画像に伝える内容がないのでalt属性の値は空の状態にします。なお、近年、装飾目的の画像はCSSのプロパティーを用いて表示するケースが多くなってきています。

画像のサイズを指定する方法

HTMLファイルにimgタグを使って画像を設定するときに、サイズを指定しなければ画像は原寸で表示されます。しかし、ページのデザインによっては表示したい画像の大きさは変わってきますよね。サイズを指定したい場合、imgタグにwidth=””とheight=””を加えると指定した大きさで表示されます。このようにサイズを数値で指定するとそのサイズに合わせて縦横が縮小、拡大するので、実際の縦横の比率と違った場合、画像に写っているものが変形してしまうので、縦横の比率は変えずに数値を入力しましょう。

例:<imgsrc=”icon.png”alt=”アオライター”width=”225″height=”300″>

背景のサイズに合わせて画像も拡大、縮小するようにしたいなら、以下のように%で指定する方法もあります。%で指定するならwidthまたはheightのどちらかを指定すれば、もう一辺は同じ比率になります。

例:<imgsrc=”icon.png”alt=”アオライター”width=”50%”>

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

HTMLファイルにimgタグを使って画像を設定するときに、位置を指定しなければ画像は原寸で左寄りに表示されます。あなたがもし画像を任意の位置に表示させたいなら位置指定が必要です。HTMLファイルでは、中央や右寄りなどの単純な位置指定なら、align=を使えば設定することができます。

画像を中央に配置する記述例
<imgsrc=”icon.png”alt=”アオライター”align=”center”>

画像を右寄りに配置する記述例
<imgsrc=”icon.png”alt=”アオライター”align=”right”>

画像にキャプションをつける方法

キャプションとは画像やイラスト、図解などを掲載するときに添えられる短い説明文のこと。出版物ではよく目にしますが、Webサイトでも様々な表現でつけられています。HTMLでキャプションをつける際には、キャプションであることを明確にするために<figure>でマークアップします。figureは、HTML5から登場したタグで画像やイラスト、図解などのメインコンテンツとは別の自己完結しているコンテンツに使用されます。

<figure>
<imgsrc=”/images/icon.png”alt=”アオライター”>
<figcaption>データメゾンのコラムを執筆しているゴライターの一人</figcaption>
</figure>
アオライター

データメゾンのコラムを執筆しているゴライターの一人

背景画像を表示したい場合

背景に画像を配置したい場合は、htmlと併せてCSSの「background-image」を使えば設定することができます。ここでは「pattern.png」という画像を繰り返して背景画像にする設定をご紹介します。

基画像
 背景の基画像

基画像を繰り返してできた背景画像
 背景の基画像

HTMLの記述
 背景の基画像

CSSの記述
 背景の基画像

まとめ

HTMLは、Webページのタイトルや画像の指定、背景色の設定や基本的なレイアウトなど骨組みの部分が記述されます。画像の指定では、見た目の調整や装飾的な部分はCSSで設定する必要がありますが、大きさ、位置、alt属性など基本的な指定はHTMLだけでも行えますので、ご紹介した方法をお試しになってみてください。

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ