こんにちは。paperboy&co.の鈴木です。

寒さの中にも、春らしさがちらほら。花粉も徐々に増えてきましたね。今回は、前回に続きフローティングブログパーツの作り方をご紹介します。フローティングバナーやフローティング広告にも応用できますので、ぜひご活用ください。

フローティングの仕組みを大解剖！

みなさんが知りたいフローティングとは、ずばりページ全体がうっすらと暗くなり（背景透過）、その上に重なるようにページ中央にFlashが表示される形じゃないでしょうか。

フローティングブログパーツの例
「ウェブシネマ小説 / DIGITALSCAPE」

今回は、まさに上記のようなフローティングFlashの仕組みを解剖します。

フローティングFlashの仕組み

まず最初に、ざっとフローティングFlashの仕組みを理解しておきましょう。大きくは、下記の２つの仕組みから成り立っています。

一見難しそうなフローティングですが、仕組みは意外とシンプルなことがわかりますね。ただし、表示エリア全体に背景を重ねる部分はちょっと難しそう。そこで、もう少しかみ砕いてご説明します。

1.ブラウザの表示エリア全体に背景を重ねる方法

フローティングでページ全体が暗くなる表現は、あたかもウェブページ全体にブロック要素が重なっている見えますが実は、そうではありません！　現在見えている表示エリアのみを覆っているのです。そして、スクロールやウィンドウのリサイズにあわせて毎秒、ブロック要素のリサイズと表示位置を調整しているのです。

計算式で表しますと、

• （画面の左上のX座標） ＝ （スクロールX座標）
• （画面の左上のY座標） ＝ （スクロールY座標）

となります。

そのポジションに、表示エリアと同じ大きさの <div> ブロックを絶対座標配置させれば完了です。