ブログ記事が時々長ったらしくなるので、適宜バルーンで補足文を出そうと思う。装飾は最小限でよい。おそらくこれがもっともシンプルな CSS コードだろうというのを考えてみた。
テキストまたは画像上へのマウスホーバーでテキストも画像も自由自在に出せる。また、同一ページ内で何回でも使える。 表示例 HTML <label class="see-more" href="#">See more<span>the contents of "more"</span></label> CSS .see-more { position: relative; color: blue; } .see-more span { display: none; } .see-more:hover span { display: block; position: absolute; padding: 1em top: -3em; left: 0; background: #000; color: #fff; white-space: nowrap; } • 目的から逸脱するが borde-radius や :before などで変形させてもよい。 • 状況に応じて left, top や width を変更する。 • 他のオブジェクトの下に表示されるときは z-index を指定する。 • display: none/block を使っているので、フェードなどのアニメーションはできない。 • 表示例 Shirase の画像の出し方は、このページのソースコードを参照。