• クリックするとふきだしが表示されるボタン

今回作るのは「クリックするとふきだしが表示されるボタン」です。
そのままだと使い勝手があまりよくないので、応用で「クリックするとふきだしが表示されるキャラクター」も併せてご覧ください。

目次

「クリックするとふきだしが表示されるボタン」のソース

「Click Me」ボタンを押下すると、隠されていたエリアが表示されふきだしが現れたように見えます。

ふきだし部分本体(テキストが表示されている箇所)は”p”でマークアップしてあり、ふきだしの三角部分は疑似要素”before”を使用し、絶対位置(position:absolute)で本体部分との位置関係を指定しています。
ちなみに、ふきだし本体と三角部分のbackgroundは同じ色を指定する必要があります。

【応用】「クリックするとふきだしが表示されるキャラクター」のソース

今度はボタンの部分をキャラクターに差し替えています。ユーザーのためにテキストが現れることを予告するコメントも添えました。コメントは削除しても動作するので、お好みに合わせてお使いください。