img、aの説明｜無料ホームページ教室

imgタグ

多くのＨＴＭＬリファレンスでは、普遍的な内容のものが多いため、実際のＷｅｂサイト制作現場で直ちに使うことができません。そこで、現場で直ちに使えるような、タグについて細かい説明をして参りたいとおもいます。続いて、imgタグ、aタグです。

imgタグは、画像を挿入するのに用いられるタグです。文書だけのＷｅｂページは、とても味気ないですし、見栄えもよくありません。imgタグを使って、ロゴやアイコン、写真などの画像を挿入してください。

属性

imgタグには、省略できない、必須の属性が４個あります。

src属性
width属性
height属性
alt属性

src属性には画像データのアドレスを入れますが、このアドレスのことをパスとも言います。width属性とheight属性は、それぞれ画像の横幅と縦幅を、単位をピクセルで入れます。この属性には、次に示す間違った例のように、単位を入れてはいけません。それぞれの属性をタグの中に入れる順序は、特に決まっていません。

●間違った例１

●正しくは

alt属性

また、alt属性には、画像の意味するところの語句を入れます。altは、「アルト」と言う人もいますが、正式には「オルタネート（alternate）」の略で、「代わり」を意味しますので、「オルト」と言うのが正解です。この属性値は、何らかのトラブルで画像が表示されなかった場合、この属性値が表示されます。

上の例では、「画像」という属性値になっています。

何らかのトラブルとして、音声ブラウザのこともあります。そもそも音声ブラウザには、画像を表示させる機能がございませんので、alt属性値が何もなければ、ユーザーには画像が入っていることすら判らない、ともなりかねません。

また、ブラウザで画像を表示させて、その画像にマウスを重ねたときに、黄色い枠のバルーンでその画像に関する語句が表示される場合がございますが、これはalt属性値が表示されています。

このように、alt属性を使えば、画像にキーワードを埋め込むことができるので、ＳＥＯとしても、良く使われる属性です。ところが、本来は代替えの意味ですので、キーワードを埋め込みすぎないようにして下さい。

キーワードの正しい埋め込み方

キーワードを埋め込むに当たり、次のようなことに気を付ける必要があります。それは、「Ｗｅｂページ中に、同じ画像を複数個入れる場合は、それらのalt属性値を、なるべく同じものにする」ことです。例えば

●間違った例２

同じファイル名の画像なのに、alt属性値が違っています。こういったものは、検索エンジンがスパムとみなしてしまう場合がございます。スパムとは、検索エンジンに上位ヒットさせるために、不正な方法で意図的に操作されたＷｅｂページのことです。スパムと見なされたＷｅｂページは、強制的に順位を下げられてしまいます。

●正しい例

この正しい例のように、同じ画像は、なるべく同じalt属性値にする必要があります。

特に意味のない画像の場合

もし、挿入する画像が、単なる点の画像だったり、線の画像だったりする場合など、何の意味を持たない場合のalt属性は、alt属性を消してしまうのではなく、例のようにalt属性を残しておいて、属性値を空にします。

●間違った例３

●正しくは

このことにも例外があり、空にできない場合がございますので、次のaタグの説明をご覧下さい。

イメージツールバーの非表示

IEでＷｅｂページを表示した場合、画像にマウスを重ねると、図のようなイメージツールバーが現れます。もし画像に文字が書かれている場合に、イメージツールバーが表示されると、とてもジャマになります。そこで、metaタグを使って、イメージツールバーを非表示にできます。

詳しくは、19.h1～h6、p、metaの説明「イメージツールバー（画像の保存、印刷などのボタン）の非表示」をご覧ください。

aタグ

aタグは、語句にハイパーリンクを張るためのタグです。aタグの必須の属性は、href属性です。

パスの指定方法

href属性には、リンク先のアドレスが入りますが、このアドレス指定の文字列をパスと言います。パスには、相対パスと、絶対パスがございます。下の例のように、現在見ているページを基準にしたパスが相対パス、http://から正式に書かれたパスを絶対パスと言います。

●相対パス指定

<a href="../index.html">おふとんの人</a>

●絶対パス指定

<a href="http://www.ofuton.info/index.html">おふとんの人</a>

通常、相対パスは内部リンクを張る場合に用いて、絶対パスは外部リンクを張る場合に用いますが、どちらも表示結果は同じになります。

●相対パスの表示結果

おふとんの人

●絶対パスの表示結果

おふとんの人

相対パスの指定方法には、ルールがありますので、時間があれば「21番外編．相対パスの指定方法」を作りたいと思っております。

imgタグのsrc属性指定にも、相対パスと絶対パスの指定ができます。上記のimgタグでのsrc属性は、相対パス指定です。

title属性の使い道

title属性は、ほぼすべてのタグに使用できる属性ですが、aタグに使用する場合、少し特別な意味が出てきます。それは、aタグを用いてハイパーリンクが張られれた文字にマウスが重なった場合、title属性を指定しておくと、バルーンでtitle属性値が表示されます。例えば

●title属性の指定

<a href="../index.html" title="おふとんの人へ飛ぶ">おふとんの人</a>

●title属性の指定した場合の表示結果

おふとんの人

ハイパーリンクが張られた「おふとんの人」という文字列に、マウスカーソルが重なると、「おふとんの人へ飛ぶ」とバルーン表示されると思います。

ただし、このtitle属性値は、検索エンジン最適化において何ら意味がございませんので、単なる装飾の意味になります。とは言うものの、Ｗｅｂページを使う側からすると、何か表示されることによって、Ｗｅｂページに動きが出て、Ｗｅｂページ閲覧が楽しくなるという観点から、Ｗｅｂ製作のプロであれば、例外を除いて、すべてのaタグにtitle属性値を指定しています。