« CSS セレクタ、グループ化の落とし穴 | トップページ | プロモーションとアフェリエイト »

2006-05-25

CSS だけでポップアップヘルプ

対応ブラウザ: Mozilla Firefox1.5 Opera8, 9 Safari2.0
(動作未確認の環境が多いので暫定。動作報告歓迎。(^ ^;))

最近、Ajax や JavaScript ネタが多かったので、今日は CSS ネタで。

ネタの出処は、O'Reilly の "Cascading Style Sheets: The Definitive Guide" などでもお馴染みの Eric A. Meyer が運営している下位サイトのひとつ: CSS/edge から。テーマは CSS だけでポップアップを作成("Pure CSS popup")すること。ちなみに Eric Meyer は、W3C の CSS の test suite の作成を手掛けてたりもする Web 標準側の人ですが、このサイトでは、(Web 標準には違いないけれども)ブラウザでの実装や普及もまだまだこれからという、もっとも先端(あるいは異端)な CSS テクニックを積極的に紹介しています。とても興味深い記事が多いですが、当然、運用法を誤ると、アクセシビリティ的に問題が生じることがあるので注意が必要です。

  1. Pure CSS Popups
  2. Pure CSS Popups 2
  3. Pure CSS Popups 2b

今回ここでは、この Eric Meyer のエントリーをちょっとアレンジして、インラインテキストのポップアップヘルプを作成してみます。今日はサンプルとソースをいっぺんに出してしまいましょう。以下の CSS ソースの点線で囲われた部分の上にマウスカーソルを乗せると、Firefox (Gecko 系ブラウザ)、Opera、Safari ならポップアップヘルプが現れるはずです。

HTML

<p>このあたりは段落内の本文です。<span class="term"><dfn>用語</dfn><span class="annotation">(このあたりは用語に対する注釈です。)</span></span>このあたりは段落内の本文です。</p>

CSS

span.term:hover(マウスが乗った時のポップアップなので、まず term クラスを持つ span 要素(span.term)全体に対して:hover ダイナミック疑似クラスを適用する。) span.annotation(次いで、あらかじめ display: none; を適用している、span.term の子孫要素の span.annotation を display: block; で可視化させる。) {
display: block;
width: 320px;
position: absolute;(position を絶対位置指定にして、span.annotation をレイヤー化させる。必要に応じて z-index でレイヤーの順序を調整する。)
left: -4em;
bottom: 5em;
background: #eeddaa;
}

ポイントは "dfn:hover span" で、:hover ダイナミック疑似クラスを適用している要素の子孫要素に対するスタイルをコントロールする点にあります。ここでは段落内の語注ということで、インライン要素である dfn 要素と span 要素を利用しましたが、状況次第で dl 要素を使う手もあります。

span.annotation(annotation クラスを持つ span 要素)はあらかじめ "dfn span { display: none; }" で不可視にしておいて<span class="term">...</span>(実質的には <dfn>...</dfn>)で括られている用語の上にマウスが乗った時に、"span.term:hover span.annotation { display: block; } を実行して可視化させるという仕掛けです。span.annotation をそのままインラインで表示させる場合は display: inline; でも良いのですが、span.annotation の内容がインラインで表示されることで、同じ段落内のそれ以降の文字列が後方にスライドして、読む時の快適さが著しく損なわれます。そこで本来はインライン要素の span(.annotation) に対して、display: block; を適用することで一時的に見た目をブロック要素化します。さらに position: absolute; を適用して表示する場所を絶対位置指定します。こうすることで、ポップアップヘルプのような効果を演出できる上に、段落内のテキストの表示も乱さずに済ませられるというわけです。

クロスブラウザ対応の仕掛け(Eric Meyer のページにも若干の試みがされています)や、(X)HTML 文書構造上の検討がまだ充分でないため、ちょっとソースが散らかってますが、以下にサンプルコードを掲げておきます。これをたとえば annotation.css などとしておいて、標準 css ファイルに @import させるようにしておけば、ポップアップヘルプの拡張 CSS モジュールとして利用できるようになるかも..とか考えてます。

ちなみに最初の方で注意を喚起したアクセシビリティですが、CSS hacks を使って、未対応ブラウザには最初から注釈部分を表示させておく ("span.annotation: display: inline;")ようにすれば、一応、排他的にはせずに済みます。

サンプルコード

span.term { /* 術語部分のマークアップ */
position: relative;
border-bottom: 1px dashed;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
dfn span { /* 術語の解説部分 */
display: none;
}

span.term:hover {
background-color: brown;
color: #fff;
margin-bottom: 1px;
border-top: #D1C6B7 1px solid;
border-left: #9E8282 1px solid;
border-right: #9E8282 1px solid;
cursor: help;
}
/* Web 標準準拠モダンブラウザ用設定 */
span.term:hover span.annotation {
display: block;
width: 320px;
height: auto;
position: absolute;
left: -4em;
bottom: 5em;
color: #000;
font-weight: normal;
text-decoration: none;
font-size: 1em;
line-height: 1.5em;
margin: 0;
padding: 2em;
border-top: #ccc 1px solid;
border-bottom: #666 1px solid;
border-left: #aaa 1px solid;
border-right: #666 1px solid;
background: #eeddaa;

filter: alpha(opacity=90);
-moz-opacity: 0.90;
-khtml-opacity: 0,90;

border-radius: 8px;
-moz-border-radius: 8px;
}

追記: css Zen Garden にも

ちょうど css Zen Garden にも background と z-index を活用した秀逸な CSS ポップアップがアップされているようなので、ご紹介しておきます。詳しい仕掛けは、是非、ソースをご覧ください。

|

« CSS セレクタ、グループ化の落とし穴 | トップページ | プロモーションとアフェリエイト »

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

コメント

コメントを書く



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




« CSS セレクタ、グループ化の落とし穴 | トップページ | プロモーションとアフェリエイト »