So-net無料ブログ作成
検索選択

ブログを書く時に知っておきたい<img>タグ(要素)とブラウザの関係性

 カテゴリー:ザ・雑記

thumbnail_image

なんて、難しいタイトルを付けてみましたが、全然難しい話題ではありません。そもそも私にそんな詳しい情報は書けません。

本日ご紹介するのは、ブログを書く時に画像を貼り付けたりすると思うのですが、その時に知っておきたいちょっとした情報です。画像にマウスを乗せるとピョコンと情報が出てきますよね、その事について、書こうと思います。

先日久しぶりにインターネットエクスプローラー(IE)で、ネットサーフィンをしていて気づいたのですが、私のブログの画像にマウスカーソルを載せると、適当に付けたファイル名がピョコンって出てくる事に気づきました。これ、物凄く恥ずかしい。いや、そんなエロイ名前なんて付けてませんが、英語名なんて、スペル間違ってても気にせずつけていたので。

IEでは、<img>タグのalt=""の内容がポップアップ表示されるんですね。恥ずかしながら今頃気づきました。常用しているブラウザがFirefoxなので・・・と言い訳しておきます。ちなみにFirefoxでは、alt=""の内容はポップアップ表示されませんよね。

<img src="xxxx.JPG" width="200" height="200" 
alt="DSC00132.JPG" />

例えば、上のような記述だったとしたら、IEでは、赤字の部分がポップアップ表示されます。Firefoxでは、何も表示されません。alt属性がポップアップ表示されるのは、IEの仕様みたいですね。

サンプル画像
DSC00132.JPG DSC00132.JPG
左:上記コード  右:下記コード(title属性付き)

<img src="xxxx.JPG" width="200" height="200" 
alt="DSC00132.JPG" title="うちのニャンコの肉球" />

違いはですね、title属性を書いたかどうか、ただそれだけです。意外と記述忘れがちですよね。いや、まぁ、実際特に明記する必要はないので、良いんでしょうけど、気になる方は、title=""を付け加えるだけで改善できますよ。


豆知識:alt属性とtitle属性の違い

alt属性は、もしその画像が表示出来ない環境(ブラウザで画像をオフにしたり)の場合、その画像が、どのような内容なのか、本文中でどのような意味を持っているのか、と言う事をテキストで表すために使用する代替テキストです。img要素には、必須属性で必ず使用しなくてはいけません。もしalt属性が無いと記事のレイアウトが、ぐちゃぐちゃに崩れる恐れもあります。何も表示したくない場合は、alt=""と最低でも記述しておきましょう。

title属性は、その名前の通り、どんな画像なのかという画像の名前・補足情報です。設定した内容が、ポップアップ表示されます。

次に見ていただきたいのが、画像にリンクを貼った時のサンプルです。IEでは、a要素のtitle属性よりもimg要素のaltの内容を優先してポップアップ表示します。何ででしょうねぇ?

サンプル画像
DSC00132.JPG DSC00132.JPG
左:a要素だけにtitle属性を記述  右:img要素だけにtitle属性を記述

左のコード

<a href="/" title="うちのニャンコの肉球">
<img src="xxxx.JPG" width="200" height="200" 
alt="DSC00132.JPG" /></a>
右のコード
<a href="/">
<img src="xxxx.JPG" width="200" height="200" 
alt="DSC00132.JPG" title="うちのニャンコの肉球" /></a>

是非、一度IEに切り替えて表示して確認してみて下さい。FirefoxやOpera等のブラウザでは、どちらの記述でも同じtitle属性の内容をポップアップ表示してくれます。IEは、ちょっと独特なのか、それともIEが普通なのか、理解に苦しみます。どちらにしても画像にリンクを張って、ポップアップで補足情報を表示したい際は、title属性をimg要素の方に記述する事をオススメします。


関連記事

思わず真似したくなる素晴らしいデザインのブログ50選
Safari 3.1の使用感が、どんな感じなのか実際に使ってみた
Opera 9.6を使ってみた。フィードプレビューはメチャメチャ綺麗!
できるかなー Firefox編
IEでエラー発生、原因は? HTMLの話

Start Today 最近の記事


 |  前の記事  |  次の記事  |  HOME  |  記事トップ ↑

トラックバック 0

この記事のトラックバックURL:
※ブログオーナーが承認したトラックバックのみ表示されます。
RSS 1.0
オススメサイトの最新記事

あわせて読みたいブログパーツ

Powered by Ayapon RSS! オススメ 相互リンク ページランク

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。