CSS

FLASH（SWFファイル）の上にHTML要素を重ねる方法を紹介します。
なお、SWFの挿入はDreamweaverから行ったという想定です。

まず、Dreamweaverのメニューから「挿入」＞「メディア」＞「Flash」を選び以下のようなソースを追加します。

<script type=”text/javascript”>

AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,
‘width’,’600′,’height’,’600′,’title’,'●●●●●●’,'src’,'flash/flash’,'quality’,'high’,'pluginspage’,
‘http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'flash/flash’ ); //end AC code

</script><noscript><object classid=”clsid:●●●●●●●●●●●●●●” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”600″ height=”600″ title=”●●●●●●”>

<param name=”movie” value=”●●●●●●.swf” />

<param name=”quality” value=”high” />

<embed src=”●●●●●●.swf” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”600″ height=”600″></embed>

</object>

</noscript>

これに以下の赤字部分を追加します。

<script type=”text/javascript”>

AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,
‘width’,’600′,’height’,’600′,’title’,'●●●●●●’,'src’,'flash/flash’,'quality’,'high’,‘wmode’,'transparent’,’pluginspage’,
‘http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'flash/flash’ ); //end AC code

</script><noscript><object classid=”clsid:●●●●●●●●●●●●●●” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”600″ height=”600″ title=”●●●●●●”>

<param name=”movie” value=”●●●●●●.swf” />

<param name=”quality” value=”high” />

<param name=”wmode” value=”transparent”>

<embed src=”●●●●●●.swf” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”600″ height=”600″></embed>

</object>

</noscript>

次に、このソース全体を<div id=”～～～”></div>で囲います。
このdivにはposition:relative;をかけておいてください。

さらに、このFLASHの上に重ねたいdiv要素を用意し（divじゃなくても基本は同じです）、position:absolute;をかけて、位置を調整しましょう。

最後に、FLASHを囲ったdivと上に重ねるdivの両方にz-indexを指定します。
上に重ねたいほうを大きい値となるように指定してくださいね。

とまぁ、以上で終了です。position周りは別にこの指定じゃなくても出来るんで、興味があったら色々いじってみてください。

まんまタイトルの通りですが、jQueryで縦横のセンタリングの方法を。
（普通、横はCSSでやっちゃうと思うので、実質縦方向の中央寄せのやり方の説明です）

function reposition() {
var top = ($(“body”).outerHeight() – 500) / 2;
var left = ($(“body”).outerWidth() – 1000) / 2;
$(“.common”).css(“top”,top+”px”).css(“left”,left+”px”);
}

縦×横＝500×1000の場合の例です。
ついでに言うと、commonの親要素にはposition:relative;、common自体にはposition:absolute;の指定がそれぞれ必要です。

使えるシーンは限られますが、横長の箱みたいなレイアウトなら十分使えるんじゃないかと思います。

さっき会社のインターンの子と話をしてたら、改めてアウトプットって大事だな～と思いました。
ということで、ちょっとjQueryの話でも。

Continue reading

ビッグパレットふくしまで行われたCSS Nite in Fukushimaに行ってきました。
内容は一度参加したことのあるCSS Nite Beginnersと同じなので、知識の確認としての参加です。

正直、新しい知識というのは、ほとんど無かったわけですが、それでもやはり得るものはありました。

Continue reading