【CSS】【実例動作付き】最低限のコードのCSSだけで作る吹き出しの表示【覚書】


JavaScript を使わずに、CSSだけで、
マウスオーバーすると、アニメーションして表示されるサンプルです。
例によって、わかりやすさのため表示部分は、あまり凝らないようにしています。

言葉だけではわかりずらいので
イメージと実際に試せる動作サンプル(アニメーション付き)を載せています。

考え方

あるテキストエリアにマウスカーソルを乗せると、その場所付近から、もう一つのテキストが吹き出しとして表示されるようにします。

hukidasi_css-min

構成

メインテキストcontainer
(注釈したい部分)


マウスでhoverする

吹き出し部分
#hukidasi

ポイント

1.マウスに反応する部分(container class) と 吹き出し部分(#hukidasi)をHTMLで用意する。その時吹き出し部分はマウスに反応する部分の内部に作る。

2.マウス反応する部分は hover要素を使い反応させる

    .container:hover #hukidasi

3.吹き出しの反応前後の部分で位置を調整する。

4.元となる場所(container)に対して、吹き出しは自由な位置に表示させるためにabsoluteを設定する。

5.アニメーションは transitionを使うが、吹き出しが見えないのにクリックしたり反応しないように、 display要素ではなく、visibility要素を使う。

ちなみに今回は、アニメーションを重なった位置から右上にぼんやりと現れるようにしています。border以降の行は見栄えなので適当に合わせて使ってください。

マウス反応する部分は divにするとblock要素なのではるか後ろまで反応してしまいす。今回のケースを考えるとspanのように inline要素が良いと思います。

#hukidasi
{
    opacity: 0;
    top : 0px;
	left: 0px;
	width:180px;
    transition: 1s;
	visibility:hidden;
	
	position:absolute;
}

.container{
	position:relative;
}

.container:hover #hukidasi
{
    opacity:1;
    top : -30px;
	left: 20px;
	width:180px;
	visibility:visible;

	border: solid 1px #ccf;
	background-color: #ddf;
	padding: 5px;
	text-decoration: none;
	color: #000;
}

<div>
    <span class="container">テキスト
	  <span id="hukidasi">吹き出しだよ</span>
    </span>
    うしろ
</div>
次の文
<br>

アニメーション変化内容の設定

アニメーションするときはCSS上の次の前後の状態を変更すれば、動くようになっています。

#hukidasi  : :吹き出しが現れる前の状態(装飾)

.container:hover #hukidasi  :  吹き出しが現れる後の状態(マウスオーバー後)

サンプル(工事中)

 
テキスト 吹き出しだよ うしろ~~~~

次の文

他のアニメーションの例

位置以外にも、背景色や大きさ、ボーダー、大きさ、形などいろいろ変更できます。

透明にしたい場合 0~1の範囲で以下を設定してください。

opacity :0;

回転したい場合以下のパラメータで設定します。

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

・吹き出しに丸みを帯びさせたい場合

border-radius: 50%;  のように設定してください。 50%がほぼマルですので、 数%~数+%ぐらいが良いと思います。

関連ページリンク

【CSS】タブメニューをCSSだけでシンプルに作る【動作実例付き】

CSSでカードレイアウトがどこまで出来るか試してみた

【CSS】覚えたての人向け。8つのよくあるCSS実践Webテクニック。余計な装飾やロジックはないので肝心なところを理解しやすい

CSSスプライトで、イメージ画像の一部のみ表示させる端的な方法

おまけ

下に向かって
左に向かって

外枠の厚さが均一ではないですが、一旦こんな感じです。

github

参考:CSSで作るフキダシいろいろ | MMMブログ
https://blog.mmmcorp.co.jp/blog/2016/03/02/css_balloon/

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

819 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です