画像もSEO対策もバッチシ!imgタグの使い方と必ず使いたいimg属性

3515_large

やぁ、最近水泳でやっと2km泳げるようになったユトピ(@yutopi60pa)です。

今日はWEBページ制作の醍醐味でもある「画像」のタグ「imgタグ」について解説していくよ。
画像を貼るのはなんとなく難しそうな気がするって人もいると思いますが、いまから解説することをしっかりと理解できればすぐにでもできるようになっちゃいます!

ということでさっそく解説していきましょう!


imgタグとは?

imgタグとは画像をWEBページ貼りつける際に使うタグです。
インライン要素のタグですが、普通のインライン要素とは違って、CSSで幅と高さ、外側の余白のmargin、内側の余白のpaddingをブロック要素のように指定することができます。
詳しくは以前の記事でまとめていますので、そちらをご覧ください。

あなたは大丈夫?”ブロック要素”と”インライン要素”の違いを理解しよう。【お母さんにもできるHTML入門】

画像を貼りつける際は画像が置いてあるパスsrc属性で指定します。
まずはその指定のやり方からみていきましょう。

imgタグで画像を表示してみる。


ではimgタグを使って画像を表示させてみましょう。
以前使ったHTMLファイルを使っていきますね。

HTMLファイルを開いたらbodyタグで囲っている好きな場所にimgタグを挿入しています。

コード


img_01_02

これをブラウザで表示してみましょう。

img2_02


ユトピ
僕のお腹じゃないよ!


こんな感じで無事に画像が表示されましたね。
これがimgタグを使った画像の貼り方です。

ではコードの解説を交えながらパスについてみていきましょう。

画像のパスを指定する

さて、「パス」とはなんでしょうね?

パスとは画像がどこにあるかを示す「住所」みたいなもの。
imgタグを使って画像の在りかを教えてあげれば画像が表示されます。

指定の仕方はimgタグの「src(ソース)属性」を使います。
今回のコードですとここですね。

<img src=”onaka.jpg” alt=”お腹を出している人の画像” title=”お腹の画像” width=”600px” height=”auto”>

“”のなかで汚い「onaka.jpg」という名前の画像の場所を指定しています。
それでは指定方法です。

画像が同じフォルダにある場合


img3_03

今回は先ほどのHTMLファイル「test.html」と同じ「test」というフォルダの中に画像を入れました。
ここでHTMLファイルと画像が同じフォルダ内にあれば、src属性で指定するのは画像の名前だけです。
先ほどのsrc=”onaka.jpg”のように指定すればOK。これは簡単ですね。

画像が違うフォルダにある場合


次に画像がHTMLファイルと違う場所にある場合。
例えば「test」というフォルダの中に「img」というフォルダ作ったとしましょう。そしてその中に先ほどのお腹の画像を入れます。

img4_03

img5_03

こうした場合は先ほどのように画像の名前だけ指定しても表示されません。
試しに見てみましょう。


img6_02

このように画像が表示されませんね。いわゆるリンク切れです。

なぜこのようになったかというと”画像のパスが変わったから”です。
要するに画像がお引越ししたからですね。

先ほどtestフォルダの中にimgフォルダを作って、そのなかにお腹の画像を移動しましたよね。その時点で画像のパスが変わりました。
ですので、imgタグのsrc属性での指定も変えなければいけません。
やり方はこんな感じ。

<img src=”/img/onaka.jpg” alt=”お腹を出している人の画像” title=”お腹の画像” width=”600px” height=”auto”>

ここでは「/img/onaka.jpg」というパスになりました。imgとは先ほどのimgフォルダのことを指しています。
このパスを訳すと、「imgフォルダの中のonaka.jpgという画像を持ってきて」と言っています。
書き直したコードでもう一度確認しましょう。

img7_01

img2_02

表示されましたね!
こういった感じで違うフォルダにある画像を指定します。
他にも例を挙げてみますね。

  • imgフォルダの中のonakaフォルダに画像がある場合
    src=”/img/onaka/onaka.jpg”



上の例のようにimgフォルダの中にさらに新しいフォルダを作って、その中に画像を入れた場合のパスは二つのフォルダの名前を指定していきます。


ここで注意点。
パスを指定する際の基準は、画像を貼ろうとコードを書いているファイルがある場所です。

今回の場合は、test.htmlというファイルの中にimgタグを書いて画像を貼ろうとしています。最初のやつですと、onaka.jpgはtest.htmlと同じフォルダ「test」にありましたので、名前だけで大丈夫でした。

次にimgフォルダを作ったときは、test.htmlと同じフォルダの中には無かったので、imgという名前のフォルダを指定しましたね。

このようにパスの基準は、”画像を貼りつけたいファイルから見た時のパス”だということをしっかり意識しておきましょう。


img10_03


次のパターン。
先ほどはtestフォルダの中にimgフォルダを作って、その中に画像を入れましたが、全く違うところにあったらどうでしょう?
例えばこんな感じ。

img8_03

上の画像のようにtestフォルダの外にimgフォルダを作って、そのなかにonaka.jpgを入れた場合、どうやってパスを指定すればいいのでしょうか?
画像を指定するにはtestフォルダから出なければいけないですね。そのやり方を説明します。

<img src=../img/onaka.jpg” alt=”お腹を出している人の画像” title=”お腹の画像” width=”600px” height=”auto”>

書き換えたコードのsrc属性には「.(ドット)」が2つ追加されましたね。

これは「今いるフォルダから1段階上に出ろよ」といっています。今回の場合、test.htmlがある「testフォルダ」から1段上へと出て、「60%ブログ」というフォルダに行き、そのフォルダの中にある「imgフォルダ」のさらに中にある「onaka.jpg」を指定しています。

このように書き換えるとうまく画像が表示されます。

img9_02

img2_02

さすがに汚いお腹にも飽きましたが、このように表示されましたね。
ここでも注意したいのは、”どこから”見た場合のパスなのか”ですね。コードを書いているファイルからみた場合のパスということを意識して書いてくださいね。

他にもこのような例を紹介。

  • 2段階上の階層へあがる場合
    src=”../../img/onaka/onaka.jpg”



この場合、test.htmlからみて、2階層上のフォルダにあるimgフォルダのさらにonakaフォルダの「onaka.jpg」を指定しています。
大分遠くなってきましたね。
このように「..」やフォルダ名を指定してあげることで、画像のパスを指定することができちゃうんです。

imgタグのその他の属性


ここまでsrc属性のパスについてみてきましたが、imgタグには他にもいろいろな情報を持たせてあげることができます。例えば画像の名前だったり、どういった画像かを説明したり、大きさを指定したり。
そういったことを指定できる属性を大事な順番で紹介していきます。

alt属性


alt(オルト)属性とは、画像についての説明を追加することができます。

なぜ説明が必要なのかというと、例えば画像を表示できない環境でPCを見ている場合に代わりに表示されたり、目が不自由な方のための文字読み上げソフトがその説明を読み上げたりするからです。

さらに一番重要なのはSEO対策にも効果があるからですね。
SEO対策とはgoogleの検索結果で1ページ目の上の方にあげるための対策のことです。

googleはクローラーというロボットで毎日いろいろWEBページの内容を見て順位を決めています。そのときクローラーは文字は読めるのですが、画像に関してはどういう画像なのかを判別することができません。

そこで画像の場合はその画像の前後の文章やalt属性の説明を見て、どういった画像なのかを判別しているのです。
こうすることで、画像がメインのサイトでもしっかりと狙ったキーワードで検索結果にヒットさせることができるんですね。画像検索の場合も同様。

こういった面からalt属性は非常に重要なものとなっています。なので、画像を使う場合は必ずalt属性を入れておきましょう。

width、height属性


imgタグはインライン属性でありながら、幅や高さの指定をすることができます。
CSSでももちろんできますが、imgタグのwidth、height属性でも指定することが可能です。ピクセル(px)かパーセント(%)で大きさを指定します。

上の例ですとこんな感じ。

<img src=”/img/onaka.jpg” alt=”お腹を出している人の画像” title=”お腹の画像” width=”600px” height=”auto”>

幅を600px、高さをautoにしていますね。(autoとは画像の比率を保って自動で数値を算出してくれるありがたいおまじない)
このようにあらかじめ大きさを指定しておけば、画像の読み込みが遅い場合でも、あらかじめ画像の大きさ分のスペースを空けておいてくれるので、ページが一瞬崩れたりせずに済みます。


同じようなことはCSSでもできますが、そこは状況に応じて使い分けましょう。

そのほかの属性


後の属性はそこまで重要じゃなかったり、特定の場合にしか使わないものなので、細かい説明は割愛させていただきます。

  • name・・・画像の名前
  • longdesc・・・alt属性で説明しきれない場合に詳しい説明が書かれた内容へのリンクする
  • usemap・・・イメージマップをしようする際の名前
  • ismap・・・サーバーサイド・イメージマップ



ちなみにusemap属性name属性はまたイメージマップという画像の一部にリンクを貼る場合に使う属性です。詳しい話は記事にした際にでも。

まとめ

どうでしたか?
画像の貼り方自体はそこまで難しくなかったかもですね。


imgタグはHTMLタグのなかでも使う頻度は非常に高いタグですので、しっかりと特徴や属性などを理解しておいて使っていきましょうね!



質問や意見がありましたらお気軽にツイッターの方へどうぞ。


ユトピのツイッター
@yutopi60pa

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です