HTML5 画像の挿入について HTMLの基本編 vol.9

画像の表示方法について

前回の記事では<p>タグ使用して文章の表示について説明しました。WEBサイトの作成について、文章だけでなく画像を用いることも多々あります。

画像を表示させるには<img>タグとsrc属性・alt属性を使用して記述します。なお<img>タグは終了タグは必要ありません。

src属性、alt属性について

画像の表示には<img>タグを使用しますが、HTMLコードに単に<img>と記述するだけでは画像は表示されません。WEBページに画像を表示させたい場合は、どの画像ファイルを表示させるかを指定するsrc属性、また画像が正常に表示されてされない場合に代わりに表示させるためのテキストを指定するalt属性の記述が必要です。

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

src属性とalt属性の記述方法は、両属性共に「=」「”」を使用して記述します。

ファイル名の指定について

src属性に記載する画像ファイル名は、画像が保存されている場所により記載方法が異なります。なお、ファイルの場所を指定することをファイルパスと呼びます。

相対パスについて

相対パスは、HTMLコードを記載しているファイルから見た時に画像ファイルがどこにあるかを指定する書き方です。

例えば上記のように、sampleというフォルダの中にindex.html(HTMLファイル)とtest.jpg(画像ファイル)が一緒に保存されている場合は、index.htmlファイルに下記のコードを記載すれば画像が表示されます。

<img src="dog.jpg" alt="犬の写真">

alt属性は代替えテキストですので、任意のものを指定します。

別のフォルダ内の画像を表示させる方法

呼び出し元と同じ階層にあるフォルダの画像ファイルを表示させるには「/」を使用して記述します。例えば下記の場合、index.htmlファイルと画像を保存しているimageフォルダーが同じ階層にあり、表示したい画像ファイルはimageフォルダーの中にあります。

この場合は、index.htmlファイルと同じ階層にあるimageフォルダーに「/」を使用して画像ファイルを指定します。

<img src="image/dog.jpg alt="犬の写真">

呼出し元のファイルと画像ファイルも別のフォルダにある場合

index.htmlファイル(画像の呼出し元)と画像ファイルがが別のフォルダーに保存されている場合は、一つ上の階層を指定する「../」を使用します。

例えば上記のような配置の場合、「fileフォルダー」にindexhtmlファイル、「imageフォルダー」内に画像ファイルとそれそれが別のフォルダーに保存されています。この場合に画像ファイルを指定する場合下記の記述になります。

<img src="https://manabu.kigaru.link/wp-content/uploads/2020/06/dog.jpg" alt-"犬の画像">

階層が深くなるとファイルパスの指定を間違えてしまうことが多いため、正常に表示されない場合はファイルの位置を見直す必要がある

絶対パスについて

絶対パスは画像ファイルが既にWEBに公開されている場合(WEBにアップロード済み)に指定することができます。絶対パスのURLは基本的にWEBサイトのURLと同様に、https://から始まります。

<img src="https://manabu.kigaru.link/wp-content/uploads/2020/06/dog.jpg" alt-"犬の画像">

今回は画像ファイルの指定方法、相対パスと絶対パスについて備忘録を残しました。次回はリンクの指定方法について説明します。

コメント

  1. […] 画像にリンクを設定する場合は、前回の「画像の挿入について」で説明した<img>タグと<a>タグを組み合わせて記述します。 […]

タイトルとURLをコピーしました