質問投稿でgooポイントが当たるキャンペーン実施中!!>>

img属性でカーソルをのっけた時にポップアップで表示される文字がありますよね?
普通はtitle属性の文字がそこに反映されるわけですが、IEの仕様ではalt属性でも表示されます。

ただ、同じalt属性だけでも
IE上でポップアップ表示されるサイトとされないサイトがあります。

宣言の違いかと思い両方のソースを見ました。
共通で
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
になっています。

なぜか片方のサイトはalt属性だけで表示
片方はaltでは表示されない。

この違いは何なんでしょう

CSSで設定でもしてるのでしょうか?

また、ポップアップされてなくても
通常は出ないのが普通、というかソースには書いてあるので
SEO上は問題ないですよね?

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

MSDN によると、alt属性値はtitle属性が存在しない場合にツールチップとして表示する仕様です。


http://msdn.microsoft.com/en-us/library/ms533073 …

実際は #4 で指摘されているように、DOCTYPEスイッチによってIEの動作が切り替わるようですが、MSDN では触れられていません。
http://jsbin.com/ixebof/2/edit#preview (IE8 quicks mode でツールチップ表示)
http://jsbin.com/ixebof/4/edit#preview (IE8 standards mode でツールチップ非表示)

event.returnValue によるデフォルトアクション抑止でもツールチップ表示を抑止することは出来ないようです。
http://jsbin.com/ixebof/5/edit#preview

CSS,JavaScriptでツールチップ表示を実現している可能性は考えられますが、実際に見てみないことには確実な答えは出来ないと思います。
この状態で「どこに原因があるのでしょうか?」と質問されても「あれもこれもありますね」としか答えようがないわけで…。

SEOを気にされるのでしたら Lynx などのテキストブラウザを使用してサイトを確認してください。
SEOで IE の仕様を気にしなければならない事態はまずないと思います。
http://support.google.com/webmasters/bin/answer. …
    • good
    • 0
この回答へのお礼

ありがとうございます。
そこらへんを調べてみたいと思います。

お礼日時:2012/01/31 12:27

同じIE環境で回覧しているのでしょうか?


IE8とかIE9での動作の話でしょうか?
確か、IE7以下がポップアップしますが、
DTDの違いで表示が変わるはずです。
つまり、標準モードか過去互換モードかの判断です。
その違いが無ければ、
 1、DTDの上、一行目のXML宣言や空行の有無
 2、IE8-9で互換モードで表示した場合
 3、その他、CSSツールチップやJSなどでの表示
この辺の違いがあるはずです。
(ソースが同じなのに動作が変わる事は物理的にありえません)


HTMLでは、画像にはaltを設置する方が正しいですが、
altをポップアップさせないのがデフォルトなので、
旧IEが余計なポップアップをしているだけ。
SEO?
検索エンジンはHTMLソースを読むので、altが書いてあれば認識します。
    • good
    • 0
この回答へのお礼

ありがとうございます。
同じ環境で閲覧してます。

SEO上は関係ないですよね。
ちなみに
titleとaltとどちらがSEO効果があるのでしょうか?

お礼日時:2012/01/22 23:40

すみません。

一度に書きゃ良いものを・・
たぶん古いIEだと思いますが、本来画像が表示されていればaltの内容は表示しないのが仕様上は正しい動作です。(私のIE8は、画像が表示されていたらaltはtitleの有無に関わらず表示されません)
 altやtitleの使い分けは、
★img要素でalt属性の内容がポップアップしない - Web標準普及プロジェクト ( http://www.mozilla.gr.jp/standards/webtips0024.h … )
 に詳しい説明があります。
    • good
    • 0
この回答へのお礼

ありがとうございます。
両方とも同じブラウザで見て確認しております。

お礼日時:2012/01/22 23:34

単純にtitle属性の有無です。



多くのブラウザでは、title属性があれば、それを優先しますから、空のtitle属性を記述すれば、altの内容は表示されないはずです。しかし、画像を読み込まない設定にしていてもaltは表示されますから、ユーザビリティ上で問題にならないでしょう。

 色々と組み合わせて、ためすと良いでしょう。
    • good
    • 0
この回答へのお礼

ありがとうございます。
title属性の性質も知っています。
ソース上、両方ともtitle属性の記述はありません。

お礼日時:2012/01/22 23:33

そのサイトを提示いただければ、わかりやすいのですが、禁止にひっかかってしまいますかね。


ドキュメントスイッチやバージョン、CSSやHTMLのトリックでもそういう差が出る可能性がありますが、JavaScriptで表現することもできます。JavaScriptを用いれば、HTMLソース上にはalt属性値があるのだけれど、HTML読み込み後にalt属性値を削除するということができます。
    • good
    • 0
この回答へのお礼

ありがとうございます。
CSSやjavaScriptで設定しているということですか?

お礼日時:2012/01/22 23:30

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qalt属性だけでツールチップが表示されるのはなぜ

alt属性とtitle属性の違いは理解しておりますが、IE9やChormeでソースを見たときに、タイトル属性が書かれていなくても、ツールチップが表示されることがありますが、ブラウザやサイトによってムラがあるのは何故ですか。

宣言のdtd関連ですか?その辺りを詳しくご紹介頂けたらと思います。

Aベストアンサー

私は経験がないのでわかりませんが、それを囲むA要素やP要素にtitleが記載されているとか、スタイルシートで内容の追加(content:)が書かれているとか、javascriptでとか・・

 ただ、altは代替文字ですから
<img src="[URL]" title="山中湖から富士山を望む" alt="山中湖からだと富士山は湖面に映り、夕焼けのときは最高">
 と言う風に・・その画像の目的に合わせて記述すべきでしょう。意味のない画像でしたらaltは書かないのではなく""と値を空にするとか・・。

Q【HTML】ツールチップを強制的に非表示にする方法

Web制作の仕事をしております。
例えば、

<a href="index.html" title="トップページ">

などと記述するとIEなどで黄色くツールチップが出るわけですが、これを強制的に非表示にする方法はありますでしょうか。
JavaScriptか何かでできればいいのですが、私の調べた限りでは方法がみつかりません。
不可能という回答でもOKです。
よろしくお願いいたします。

Aベストアンサー

#1です。
そういうことであれば、そのプラグインの方を修正して、titleでない属性(例えばtaitoru)を見ることにして、目的のタグにもその属性を付ければいいです。
別に、HTMLで意味が定義されていない属性でも付けて構いません。ブラウザのレンダリング機能(表示機能)はそれを無視します。

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qfirefoxで画像にalt属性が表示させる方法は?

firefoxでは画像にalt属性が表示されないのですが、なにか設定があるのでしょうか?

Aベストアンサー

title="xxxxx"でよいのでは?

img要素でalt属性の内容がポップアップしない - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips0024.html

参考URL:http://www.mozilla.gr.jp/standards/webtips0024.html

Qポートの80と443

こちらのサービス(https://secure.logmein.com/)を利用すると、インターネットを見られるサーバーのポートの80と443が空いていればルータやファイアウォールに特段の設定なく外部からサーバーを操作できるそうですが、逆にサーバーのポートの80や443を空けることには何か危険性があるのでしょうか。

Aベストアンサー

ポート80は一般的なHTTP、ポート443はHTTPSです。
この2つのポートがあいていなければインターネット接続(WEBブラウジング)は出来ません。
ですから、ほとんどのファイアウォールでこのポートは開いています。(インターネット接続を制限している社内LANでは当然閉じていますが)

ちなみに、よく使うポートとしてはFTPで20、21、SMTP(送信メール)で25、受信メールPOP3で110あたりです。セキュリティポリシー上、この辺は制限される事も多いですが、HTTP 80、HTTPS(暗号化用)443は通常閉じません。


危険性?
WEBプロトコルを使ってFTP的なファイル転送(WebDAV)やVPN等も出来るようになっています。当然そこにはある種の危険はつきものですが、WEBブラウジングに伴う危険と大きく変わりません。ウィルス等に感染していればこの2つのポートだけでも相当危険でしょうね。

参考まで。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QSYSユーザーでログインしたい

SQL plusでSYSユーザーでログインするにはどうすればよいのでしょうか?
SYSTEMユーザーやSCOTTユーザーではログインできるのですが、SYSユーザーになる方法がわかりません。
お願いします。

Aベストアンサー

>SQL plusでSYSユーザーでログインするにはどうすればよいのでしょうか?
特別なことする必要がないと思います。
ログインできない場合いろいろな原因が考えられます。
一番可能な原因は設定によってSYSユーザーNOMAL権限でログインできない場合あります。
この場合
sqlplus sys/パスワード@接続文字列 as sysdba
で試してください。


>SYSTEMユーザーやSCOTTユーザーではログインできるのですが、SYSユーザーになる方法がわかりません。
conn sys/パスワード@接続文字列 as sysdba

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。


人気Q&Aランキング