初心者が間違えやすい！！imgタグの使い方とファイル指定の階層関係

imgタグとは？

画像を表示する為に使われるHTMLタグの一つです。少し注意点があるので、初心者の方は注意しましょう！

・終了タグを使用しない
...終了タグを使用しないので</img>と書かない様に注意しましょう

・使用できるのは、jpgやpng,gifなどの画像ファイルのみ
...pdfなど書類データは使用できません。使用できるのはあくまで画像ファイルになります

・imgタグはインライン要素である
...imgタグはインライン要素であるのですが、例外としてブロック要素と同様に、「width」「hight」「padding」「margin」の設定が可能です。
※ブロック要素とインライン要素が分からない初心者の方は、今は特に気にしなくて大丈夫です！

基本の書き方

まずはコードで、imgタグの書き方を見てみてみましょう！

<img src="画像ファイルの格納されている場所
(パス)＋画像のファイル名。"
alt="画像の説明文を記載。">

簡単に説明しますが、imgタグを使用する際には設定しなければならない２つの要素があります。

１つ目　「src属性」.... src=" "　(書き方として=と”　”は必須です)

２つ目　「alt属性」 .... alt="　"　(書き方として=と”　”は必須です)

この２つを設定する必要があります。

ファイル指定をする方法と階層関係

src=" "の中には、ファイルのある場所とファイル名を記載するのですが...

ファイルのある場所って何？
と疑問に思う方がいると思います。ファイルのある場所(パス)とは使用しているパソコンのどこにファイルが保存されているのか？という事です。ファイルの保存されている場所によって階層関係が変わり、コードの書き方も変わってくるので、HTML初心者の方は注意して書き方を確認してください。

下記の図にて説明していきます。

図1は、Webフォルダ内にHTMLファイルとCSSフォルダ、imgフォルダが存在しており、imgフォルダ内にsample.jpgが保存されています。また、HTMLファイル、CSSフォルダ、imgフォルダは同階層にある。

この階層の位置を頭の隅に置いて画像の階層指定をしていきます。

<img src="./img/sample.jpg" "alt="サンプル画像です">

<!--　下記説明になります。　-->
<!--
./   ←階層関係を示しています。

img/ ←画像ファイルの格納されているフォルダを示しています。

sample.jpg ←ここがファイル名になります。
-->

あれ....？　. / (ドット スラッシュ)　ってなに？と思う方が出てくると思います。実はこの部分がファイル指定をする際とても重要で、HTML初心者の方が間違えるポイントになります。

この . / (ドット スラッシュ) は、基準となるファイルからみて「同階層にある」という意味なります。

今回記述しているのはHTMLファイルになので、HTMLファイルとimgフォルダは先に述べた通り同階層にあるので . / (ドット スラッシュ)がついているのです。

この一連の指定の方法は、相対パスという指定方法の書き方になります。

相対パスとは

上記を踏まえて相対パスを簡単に説明すると、同サーバーにデータファイルがある時に使用する指定の書き方がある。

階層別の指定方法の種類

同階層の時の指定方法は理解できたと思います。
ではデータの保存階層が違った場合の指定をイラストつきで、簡単に記載しておきます。

１つ上の階層にある場合の指定

この場合の指定方法は下記コードになります。

<img src="../img/sample.jpg" "alt="サンプル画像です">

<!--　下記説明になります。　-->
<!--
../   ←1つ上の階層を示しています。

img/ ←画像ファイルの格納されているフォルダを示しています。

sample.jpg ←ここがファイル名になります。
-->

index.html ファイルから１つ上の階層にimgフォルダがあり、その中にsample.jpgがある場合は、../ (ドット ドット スラッシュ)という書き方になります。

２つ上の階層にある場合の指定

ここからはあまりない階層関係になってくると思いますので、コードのみの記載します。

<img src="../../img/sample.jpg" "alt="サンプル画像です">

<!--　下記説明になります。　-->
<!--
../../   ←２つ上の階層を示しています。

img/ ←画像ファイルの格納されているフォルダを示しています。

sample.jpg ←ここがファイル名になります。
-->

alt属性の設定

最初に触れたalt属性ですが、設定すると良いとされる理由が下記になります。

・画像が表示されない時に、記載した文章が表示される

・障害の方が音声ソフトを利用して理解できる

上記の事を踏まえると、簡潔だが詳しく記述する事が望ましいです。
最初のうち初心者の方は忘れがちですがしっかりと記述する様にしましょう。

その他の属性

imgタグには、他にも「width属性」と「hight属性」があり設定する事ができます。

<img src="./img/sample.jpg" "alt="サンプル画像です" width="500" height="400">

<!--　widthで画像の横幅の指定　-->

<!--　heigthで画像の縦幅の指定　-->

この様にサイズの指定ができるのですが、きっちりとサイズを指定してしまうと、元の画像サイズの比率が崩れて横に伸びた画像や縦に伸びた画像の表示になってしまうので、width="500"と指定した時は、height="auto"としてあげると比率を崩さずサイズ指定が可能になります。※逆の場合も同様です。

まとめ

今回説明したimgタグはサイトを制作する際に必ずと言って良い程、使用されるタグになります。
頻繁に使用される為に、初心者の方が簡単な間違えをしやすいタグでもあります。

このブログにて記載した階層関係、パスの指定方法をしっかりと頭に入れておけば、表示されないぞ？という事がなくなるかと思います。

またalt属性をおろそかにしている方もいるかと思いますが、より多くの方の為に丁寧にしっかりと設定する様にしましょうね！