フローティングメニューの使い方（スクロールするメニュー）
今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。
あまり使う機会はありませんが、覚えておくといざというときに便利です。
それでは早速使い方のご紹介
必要なデータを揃える
まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。
ここではファイル名を下記の通り保存しました。
- jquery.js
- jquery-ui.js
- jquery.easing.js
- jquery.scrollfollow.js
ディレクトリはこのようになりました（ jsフォルダの中にダウンロードした jsファイルが全て入っています）。
IE6でfloatを指定した要素の左右marginが大きくなる（倍になる）
写真をfloatさせてテキストを廻りこませたら、IE6だけ写真の位置が違う！なんて経験ないでしょうか。
これは特定の条件が揃った際に起こるIE6のバグなのですが…はてさてその発生条件とは。
text-indentが効かない?!
とある案件で text-indet: -9999px で背景を表示させるテクニックを使用したところ、text-indent が効かない現象が起こったため、発生条件・原因・対処法をまとめます。
発生条件
text-indet が指定されている親要素に text-align: right が指定されていると発生します。
恐らくtext-alignが効くブラウザ全てで発生するものと思います。発生を確認したブラウザは、IE6～8、Firefox2～3、Safari2～3、Google Cromeです。
◆サンプル
Thickboxの使い方 - 画像やHTMLのポップアップをお手軽に！
ThickBoxとはjQueryを使用したAjaxライブラリの一つで、主に画像をページ上に大きく表示させるときに使われます。また、画像だけではなくHTMLファイルも表示することが出来るため、これ一つで画像とHTMLをポップアップ表示（正確には同じページ上にオーバーレイ表示される）させることができます。
◆サンプル
このライブラリの便利なところは、小難しい設定をしなくても使えることや、ポップアップした画像を自動的にブラウザに収まるサイズに縮小してくれるところです。
※HTMLを表示する場合にはサイズを指定する必要があります。
使ってみたい！と思った方のために使い方の手順を下記にまとめました。
必要なデータを揃える
まずは、配布元であるThickBox3.1に行き、Downloadから下記ファイルをダウンロードしましょう。
ファイル名
- thickbox.js
- thickbox.css
- loadingAnimation.gif
- jquery-latest.js
リンクを左クリックしてしまうと、ファイルが開かれてしまいますので、右クリックから「名前を付けてリンク先を保存」を選びましょう。
このとき、保存するフォルダは下記の用にしてください。
imagesフォルダの中にloadingAnimation.gifが入ります。この画像データはポップアップ画像を読み込んでいるときに表示されるローディングアニメーションです。
clearfixを使ってハッピーなコーディングライフを
clearfixってどんなもの？
CSSでコーディングしているときに、背景や線が途中で消えたり、floatした親要素の下マージンがおかしくなることがあると思います。
◆サンプルを表示する※このサンプルは、floatした要素と回り込みテキストを背景と線が指定された親要素が囲うようにCSSを書いています。
これは、floatした要素が親要素の高さに反映されていないため起きる現象です。
clearfixはこういった現象を解決するための方法です。
