HTML
Web制作の初心者に向けたHTMLの基礎知識について解説しています

画像を埋め込むimg要素

img要素で埋め込む画像を指定

HTMLに画像を埋め込むにはimg要素を使用します。<img>タグは終了タグを持たない空要素で中身を持ちません。どの画像を読み込むかを指定するのはsrc属性です。また、代替テキストを指定するalt属性も必須属性です。

img要素の書き方
<img src="画像ファイルへのパス" alt="代替テキスト">
Note

img要素で指定できる画像のフォーマットには、主にJPEG、GIF、PNG、SVGの4種類あり、用途に合わせて使い分けます。

Webで扱える画像についてもっと詳しく見る

画像ファイルを指定するsrc属性

src属性は、必須の属性で、値には表示する画像ファイルが保存されている場所とファイル名(ファイルパス)を指定します。ファイルパスはファイルの場所をたどるための道筋を示したものです。ファイル名やフォルダ名を「/(スラッシュ)」で区切って階層的に保存されている場所とファイル名を示します。ファイルパスの書き方としては絶対パス相対パスの2種類があり、保存場所やHTMLとファイルの関係などから状況に応じて使い分けをしてます。

次のコードは、画像(JPEG)ファイル「sample.jpg」を読み込んで表示します。

埋め込む画像を指定するimg要素
<img src="images/sample.jpg" alt="サンプルイメージ">
Note

絶対パスとは、URL(ドメインで指定されるサーバー)の起点となるルートディレクトリと呼ばれる階層構造の頂点から目的のフォルダ、あるいはファイルまでの経路を表します。

相対パスとは、今編集しているHTMLファイルが格納されているフォルダ(階層)を基準にして、目的のフォルダ、あるいはファイルまでの経路を表します。

相対パスと絶対パスについてもっと詳しく見る

画像の代わりとなるテキストを指定するalt属性

alt属性は、画像の代わりとなる説明文(代替テキスト)を指定します。画像が表示できない場合に代わりに表示されるだけでなく、テキストブラウザや音声読み上げ機能では、ここで設定されたテキストが使用されます。アクセシビリティーを高めるためにも必ず設定しましょう。
また、検索エンジンなどではalt属性の内容を読み取って何が掲載されているかを判定していることがあります。指定するテキストは画像の内容を簡潔に説明するものを記述するようにしましょう。

画像の代わりとなるテキストを指定するalt属性
<img src="images/miso_soup.jpg" alt="豆腐とわかめの味噌汁">
Note

アクセシビリティー(accessibility)とは、近づきやすさやアクセスのしやすさのことで、利用しやすさなどの意味になります。全てのユーザーが身体の状態や能力の違いによらず同じように情報やサービスを利用できることを表します。