<img>タグ
「A020 HTMLタグ」のコンテンツ内でも紹介をさせていただきましたが画像を表示させるためには<img>タグを用います。
一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
<img>タグの使い方
src属性
表示する画像ファイルを指定する際に用い、imgタグを使用する際には必須な属性となります。
以下の例では、画像ファイルを相対パスで指定しています。これは、現在表示しているhtmlファイルが配置されているディレクトリの直下にimgディレクトリがあり、そのディレクトリに配置されているsample.jpgを参照するように指定されています。
<img src="img/sample.jpg">ブラウザ上での表示
alt属性
画像を表示できないブラウザの場合に、画像の代替テキストを指定します。
<img src="img/sample.jpg" alt="サンプル画像">サンプル画像
上記のように画像の表示ができない際はaltに指定してある”サンプル画像”という文字がそのまま表示されます。
例題
以下の中で画像ファイルを指定する際に用いる属性はどれか
- href
- img
- alt
- src
回答
4.srcタグ
hrefタグはaタグのリンクの指定する際に用いる属性、imgはタグの名前、altは画像の代替テキスト
以下の中で同階層にある画像(img.png)を読み込むためのパスはどれか
- “../img.png”
- “img/img.png”
- “img.png”
- “../img/img.png”
回答
3. “img.png”
“../img.png”は階層を上がっているimg.png
“img/img.png”はimgフォルダの中のimg.png
“./img/img.png”は階層を上がったimgフォルダの中のimg.png
エンジニアからのアドバイス
画像が表示されない時はパスが間違っていないか確認しましょう。特に相対パスはフォルダ構成や画像の位置が変わると表示がされなくなってしまいます。サイト構成を変更する際にはパスの変更も忘れずに行いましょう。