HTML内に埋め込んだメッセージをポップアップさせるCSSの公開サンプル。

ここでは、CSSだけで実現するポップアップメッセージのデモンストレーションとして、メッセージをHTML内に埋め込む方法のサンプルです。

HTML内に埋め込んだメッセージをポップアップさせるCSSの公開サンプル 目次。

サンプル。

ファイヤーフォックス, サファリ 3.0以降, インターネットエクスプローラ 7.0以降, オペラ 8.0以降など対応ブラウザで、以下のサンプルテキストの文字をポイントすると、その右下にメッセージが出て来る筈です。

インターネットエクスプローラ 6.0など、表示出来ない環境の方向けに、実際のイメージを以下に挙げておきます。

実際に使っているHTMLとCSS。

以下、参考までに実際に書いたHTMLとスタイルシートを挙げておきます。

HTML文書。

サンプルとするため、<ul class="sample1">要素直下の<li>要素内にサンプルテキストを記述しております。

<ul class="sample1">
    <li><abbr>サンプルテキスト<span class="delimiter">(</span><span class="remark">このように、ポイントした要素内に埋め込んだテキストがポップアップします。</span><span class="delimiter">)</span></abbr></li>
    </ul>

スタイルシート。

スタイルシートも、HTMLのマークアップに合わせて、.sample1 クラスセレクタを上位要素としております。

.sample1 {
    border: solid #090 3px;
    padding: 1.5em;
    }

.sample1 abbr {
    font-style: normal;
    position: relative;
    top: 0;
    left: 0;
    }

.sample1 span.delimiter,
.sample1 span.remark {
    display: none;
    }

.sample1 abbr:hover>span.remark {
    display: block;
    position: absolute;
    top: 1.0em;
    left: 1.0em;
    width: 12em;
    margin: 0.5em;
    padding: 0.5em;
    border: #ccc solid 2px;
    color: #000;
    background: #efe;
    font-size: 80%;
    line-height: 1.2em;
    z-index: 2;
    }

もう一つの例 - 画像をポップアップさせる方法。

もう一つのサンプルとして、埋め込みメッセージに画像を含めたものを紹介します。

スタイルシートは同じなので、HTML部分のみ挙げておきます。

<ul class="sample1">
    <li><abbr>うさ耳女子大生<span class="delimiter">(</span><span class="remark"><img alt="" src="http://www.marguerite.jp/Features/_Horikita_Usagi104.GIF" width="104" height="104" />←このように画像をポップアップさせる事も可能です。</span><span class="delimiter">)</span></abbr></li>
    </ul>