エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント1件
- 注目コメント
- 新着コメント
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
ASCII.jp:透過PNG対応!jQueryでオリジナルツールチップ|Web制作の現場で使えるjQuery UIデザイン入門
透過GIFで作る固定位置のツールチップ 次に作成するのは、透過GIFを利用した「ふき出し」風のツールチッ... 透過GIFで作る固定位置のツールチップ 次に作成するのは、透過GIFを利用した「ふき出し」風のツールチップです。先ほどのツールチップはマウスカーソルの動きに合わせて位置を移動していましたが、今度はあくまでも「ふき出し」に見せるため、位置を固定して表示します(サンプル02)。 テキストの量に応じて縦方向にふき出しのサイズが自動で調整されるように、ふき出しの下側コーナー部分を除いた上側大半の画像と、下側コーナー部分を含む下側の画像の2つを用意します。上側の画像をふき出しテキストの入るp要素の背景として設定すれば、テキストの量によってp要素の高さが決まり、高さに合わせて背景として設定されたふき出しの画像サイズが調整されます。p要素の直後にふき出しの下部をくっつければ、テキストの量に応じて高さが調整されるふき出しになるわけです。 ふき出し部分のHTMLは、ツールチップに表示する内容をclass属性
2011/01/19 リンク