忍者ブログ
[17] [16] [15] [14] [13] [12] [11] [10] [9] [8] [7]

DATE : 2017/06/27 (Tue)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


DATE : 2006/04/04 (Tue)

HTML 関連のテクニックを収集する中で、これはと感じたものを取り上げています。

画面やリンクなどにコメントを付ける方法をメモしておきます。

「コメントを付ける」とはどういうことかと言いますと、……とりあえず、「ここにマウスポインタを合わせてみてください(視覚系ブラウザの方のみ)」

Internet Explorer や Mozilla を使用している方は、ツールチップが見えたと思います。

上の例のソースを以下に示します。

<span title="( ´∀`)" style="color:blue">(中略)</span>

ソース中にある title 属性が、ツールチップを見せていた正体です。

title 属性は、HTML 4.01 仕様書に次のように書かれています。

この属性は、当該要素に関する助言的情報を提供する。

(「7.4.3 title 属性」より)

ちなみに title 属性は、以下の要素以外で自由に使えます。

  • base
  • basefont
  • head
  • html
  • meta
  • param
  • title

ところで、画像上でツールチップを表示するために alt 属性を使用する例があります。しかし、仕様書には以下のように書かれています。

この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代替テキストを指定する。(以下略)

(「13.8 代替テキストの指定方法」より)

「画像(中略)を表示できないユーザエージェント」のための「代替テキスト」なので、ツールチップで表示される保証はありません。実際、 Mozilla 系のブラウザでは、画像が表示できる場合は代替テキストを表示しません。

そのため、コメントを付けたいのであれば、 alt 属性ではなく title 属性を使うべきです。そしてalt 属性には、代替テキストのみを書きます。

なお、 title 属性の中身はあくまでも「助言的情報」に過ぎません。そのため、テキストブラウザなどの表現能力に制限のあるブラウザでは、 title 属性が全く反映されないこともあります。

そのため、重要な情報は title 属性ではなく、地の文に書くようにした方がよさそうです。

ちなみに img 要素については、画像について解説するページを指定する longdesc 属性があります。

参考文献

PR
●この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
★無題
NAME: MT
( ・∀・)つ〃∩ ヘェーヘェーヘェー
2006/04/04(Tue)16:54:48 編集
●この記事へのトラックバック
この記事にトラックバックする:
忍者ブログ [PR]
ブログ内検索
最近の状況
リンク
カレンダー
05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
使用許諾
最新コメント
(08/15)
(05/04)
(03/06)
(03/04)
(09/25)
最新トラックバック
T/O
(11/05)
ブログ内検索
最近の状況
リンク
カレンダー
05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
使用許諾
最新コメント
(08/15)
(05/04)
(03/06)
(03/04)
(09/25)
最新トラックバック
T/O
(11/05)