« 略語に振り回される今日この頃 | トップページ | abbr は本来 機械のための要素 —マークアップは誰(何)のためのものか? »

2006-11-26

abbr の title 値を CSS でポップアップ

対応ブラウザ: IE Netscape4.x

折角、caramel*vanila の lomo さんが、前のエントリー(略語に振り回される今日この頃)にフォローアップして下さったこともあるので、僕の方でもちょっとだけ+αをつけてみます。

略語に対してつける <abbr> 要素には、その原語なり原表記なりを title 属性の値に記述するのが普通です。モダンブラウザのデフォルト設定なら、<abbr> で括られた個所にマウスを乗せると、title 属性の値がツールチップの形で表示されます。

でも、ツールチップでは文字が小さくて見にくいですし、またマウスを乗せない限りは、何の略語であるのかが、結局わからないままです。そこで、その title 属性値(つまり原語)を CSS だけを使ってWebページ上に表示してみましょう。

原語(title 属性値)を括弧で括って略語の後に表示

:after 擬似要素を使うので、この方法だと残念ながら IE(バージョン7 を含む)には適用されません。なお、CSS で書き出した content の内容は、Firefox, Safari では選択・コピペ不可ですが、Opera では選択・コピペができるようになってます。

  • HTML
abbr:after {
content: "(" attr(title) ")";
color: #4ABA4A; /* 一応、書き出された部分がわかりやすいように、ここでは色づけしておきます */
}

マウスオーバーで原語(title 属性値)を表示

今度は :hover の後に、:after 擬似要素を持ってくるという、ちょっとアクロバティックな合わせワザ。以下の "CSS" の部分にマウスを乗せてみてください。title 属性値が表示されるはずです。

  • CSS
abbr {
cursor: help;
}
abbr:hover:after {
margin: auto 2px;
border: 1px #333 solid;
content: attr(title) " の略。";
background: #E3CFA6;
}

IE で :before, :after が実装されていないのが、返すがえすも遺憾ですね。

追記(2006-11-27)

略語を示す <abbr> とは別に、頭字語を示す <acronym> という要素がありますが(現行規格では "HTML" や "CSS" は、むしろこの acronym の方がより適切)、実はこの acronym 要素、XHTML 2.0 では abbr 要素に一本化されて廃止される見込みです。つい、無前提に頭字語に abbr 要素を使ってしまっていますが、実はそういう背景がありますので、ご了承くださいませ。

|

« 略語に振り回される今日この頃 | トップページ | abbr は本来 機械のための要素 —マークアップは誰(何)のためのものか? »

[Web]XHTML」カテゴリの記事

コメント

デッドリーさん、こちらこそ、はじめまして。

えっと、abbr と acronym については、少なくとも今のドラフト(XHTML 2.0 Text Module #2006-07-26 Working Draft 時点)では外されています。というか、ドラフトにもあるように、"The abbr element ... includes acronyms."(abbr 要素は acronyms も含む)ということです。

要は abbreviation と acronym という言葉の意味が、英語文化圏の間でも(あるいは人によって)揺れまくってて違いが曖昧なので、abbr に一本化したということのようです。

W3C のメーリングリストを漁ってみると、色々と議論されているのがわかります。ちょっと古いですがこのあたりとか。

http://lists.w3.org/Archives/Public/w3c-wai-ig/2003AprJun/thread.html#msg202

実はまだほかにも、IE 6- が acronym には対応していながら abbr に対応していないとか、色々と問題を抱えていたりして、やっぱり、一度、ちゃんとまとめておいた方がいいでしょうかね?(^ ^;)

投稿: ゆう@管理人 | 2006-11-27 14:00

管理人様はじめまして。デッドリーと申します。

いつもこのブログを楽しく拝見しております。

XHTML 2.0ではacronym要素は廃止なんですか。
私は最近、acronym要素の存在を知りましたw。

投稿: デッドリー | 2006-11-27 13:03

lomo さん、こんにちは。こちらこそ、良い刺激をいただきまして、ありがとうございます!

折角いただいたフォローアップエントリーを無駄にしないようにと、ちょっと小手先の小ワザを付け足しただけ(しかも IE 非対応だし)なんですが、むしろ蛇足っぽくなってお恥ずかしい限りです。(^_^;ゞ

似たような :before, :after + content の使い方として、真琴さんの hxxk.jp で紹介されている blockquote などの事例があります。 こちらは、なかなか実用的で、僕も遅かれ早かれ追従しようかと考えてます。

> 関係ないですが中国風のモチーフとても素敵ですね :-)

途中から Blog の趣旨が変わってしまいましたけど、もともと、中国史専門の研究者だったもので..。(^ ^;)
むしろ、caramel*vanilla の方がオリジナリティがあって僕は良いと思いますよ。caramel*vanilla のマウスオーバーリンクイフェクトも、個人的にとっても好きです。

投稿: ゆう@管理人 | 2006-11-26 16:02

こんにちは!!
:beforeと:afterの実用的な使い方ですね!
思いもつきませんでした!
さっそく()で表示する方法を取り入れさせていただきました。

情報(記事)を発信することでさらに情報を得ることができるということを身を持って知りました。
どうもありがとうございます!!

関係ないですが中国風のモチーフとても素敵ですね :-)

投稿: lomo | 2006-11-26 13:31

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/4316018

この記事へのトラックバック一覧です: abbr の title 値を CSS でポップアップ:

» abbrとacronymを抜き出すプラグイン [オラオラ]
最近ちょっと話題になっていた、省略語と頭字語ですが、ついにMovableTypeにもプラグインが登場しました。 エントリー本文と追記に abbr (省略語) や acronym (頭文字語) があった場合、それらの語句を定義した定義リストを生成する Movable Type プラグインを作ってみました。[省略語と頭文字語から定義リストを生成する Movable Type プラグイン - 2xup....... [続きを読む]

受信: 2006-12-02 13:27

« 略語に振り回される今日この頃 | トップページ | abbr は本来 機械のための要素 —マークアップは誰(何)のためのものか? »