cssCSS超初心者です。今回はCSSだけで吹き出し型のポップアップを簡単に実装できる方法を載せます。この部分にマウスカーソルが乗るとポップアップが出ます。</div></div>まずはHTML。target部分のonMouseoverとonMouseoutにそれぞれポップアップの表示・非表示メソッドをセットします。(メソッドの中身については後述)なお、今回自分が実装したかったものは、ポップアップ上でメニューを選択するようなもので、target領域からマウスが離れても、fukidashi上に乗っている限りはポップアップが消えないようにしたかったため、fukidashi部分にも同様にポップアップの表示・非表示メソッドをセットしてあります。"block";}続いてJavaScript。マウスオーバー・マウスアウト時にはこれらのメソッドが呼ばれ、fukidashi領域の表示設定を書き替えます。#0000cd;}最後にCSS。親要素の座標を基準にポップアップの座標を決められます。これにより、画面サイズが変わったりしてもポップアップの位置がずれなくて安心。ポップアップを吹き出し化するための三角形部分ですが、こちらはポップアップのbeforeで描画します。本当は三角形ではなく四角形のborderの一部なのですが、まぁその辺についてはこちらのサイトをご参照ください。以上が吹き出し型のポップアップをCSSのみで簡単に実装する方法です。次はもっと汎用的に三角形を描画する方法を探したいですね。15:12【CSS】【js】CSSとJavaScriptだけで簡単に吹き出し型のポップアップを実装する方法Tweet広告を非表示にする関連記事2013-11-13【CSS】はてなブログのカテゴリ欄をタグクラウド風にカテゴリ表示周りのCSSを少し弄りました。港区界隈でSEやってた暇人。今はITコンサルとかいう胡散臭い職種になっています。好きな和音はsus4です。(1)月別アーカイブ参加グループプログラミンググループテストしたい人のグループポケモンリンクはてなブログQiitaGitHubはてなブログをはじめよう!sakuramochi702さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。