【初心者向け】画像を挿入するimgタグの使い方と画像ファイルの指定方法

こばゆた

雑誌やWebページを見ていると文字よりも真っ先に目に入ってくるものが画像です

チャッピー

長々と書いてある文よりも画像の方が何を伝えたいのかがわかりやすいよね

こばゆた

画像の方が文字よりも5000倍の情報量があるとかないとか…

今回はそんな画像を挿入するimgタグについて学びたいと思います

きなこ

あるとかないとか…

1.imgタグ

1-1.imgタグとは

<img>で始めてタグ内に”src属性=値“と”alt属性=値“を書いて画像を表示します。こちらは閉じタグは必要ありません(</img>と書かなくても良い)。

まとめると以下のように書きます。

<img src="画像ファイルの名前" alt="画像の説明">

用語

属性

タグに付ける付加情報の事。この場合だとsrcの方を属性名 、” “の中身を属性の値という。

src属性

値に画像のある場所と画像のファイル名を書くことで画像を表示をする。

alt属性

値に画像を説明するテキストを書くことで、何らかの理由でWeb上で読み込みができない際にその画像の説明を表示する事ができる。

ちなみにsrcは”source”の略で、altは”alternative”の略です。

こばゆた

属性と値という用語はこれからも出てきますので覚えておきましょう。

実例としてはこのように指定します。

<img src="image/img-working-1.jpg" alt="タイピングをする女性">

読み込みに失敗するとalt属性に設定されたテキストが表示されます。

1-2.imgタグの詳細

次は”src属性”と”alt属性”をもう少し詳しく見ていこうと思います。

src属性

src属性は呼び出し元のファイルから見て、対象のファイルの位置を正しく指定しなければ画像を読み込む事はできません。

その指定方法がファイルのある階層によって異なるのでそれぞれ説明していこうと思います。

こばゆた

言葉だけだとイメージしにくいと思うので例を上げていきます

ファイルが同じ階層にある場合

同じ階層にあるファイルであれば画像ファイルの入っているフォルダー名を指定し/(スラッシュ)で区切って画像ファイルを指定します。

ここでは”imageフォルダー”に入っている画像と仮定します。

同階層にあるので画像フォルダーを指定し”/”で区切ってファイルを指定します。

図で示すと以下のようなイメージです。

<img src="image/画像ファイル">

ファイルが別の階層にある場合

画像ファイルが別の階層にある場合は. .を使うことで１つ上の階層にいく指定をします。

こちらも”imageフォルダー”に入っている画像と仮定します。

こちらは別階層にあるのでアクセスするのに手順を踏む必要があります。

1. 現在地は”index.html”ですので、ここからimageフォルダーにある画像へアクセスするには１つ上の階層であるHTMLフォルダーへ”. .”で上がりスラッシュで区切ります。
2. HTMLフォルダーと同階層にあるimageフォルダーへ”/”を区切って指定します。

<img src="../image/画像ファイルの名前">

画像が表示されない時によくあるので位置関係を確認する癖をつけると良いです。

こばゆた

なんで画像が表示されないんだぁぁぁ！ってよくなりました。

きなこ

うー、ややこしい…💦

慣れるまで大変だと思いますがこのように階層構造になっているということを覚えておきましょう。

alt属性

上でも少し触れましたがalt属性は何らかの原因で読み込みに失敗すると設定されたテキストが表示されます。

alt属性は書かなくてもレイアウトやデザインに問題はないですが、最近は音声読み上げブラウザなどで読み上げられることも多くなってきていますので適当に書くのではなくきちんと設定しましょう。

<img src="image/img-working-1.jpg" alt="タイピングをする女性">

こばゆた

電波が悪い時とかで画像が出なくても説明があれば最低限伝わります

きなこ

alt属性をいちいち書くのは面倒だけどちゃんと書かなきゃってことね

2.まとめ