floatが適用された要素の親要素に「.clearfix」というクラスを動的に追加する、あてのないスクリプトです。

floatの解除が面倒なアナタへ

このjavascriptは、floatを自動的に解除します。jQueryが必要です。wordpress用に、$をjQueryに変換したものも入ってます。正直、作っておいて、利用するシーンが思い当たらないスクリプトです。くやしいので、自分で使います。

Downloaded DOWNLOAD - AutoClearfixer

お読みください

floatは、cssでレイアウトする際によく使用される、回り込みを行うためのプロパティです。tableを使用しない段組みなどで重宝する一方、floatには意図した通りにレイアウトできないといったトラブルも多く、少々やっかいなプロパティであるとも言えます。

floatでレイアウトが崩れる最も大きな原因は、正しい位置で解除していないことに尽きます。floatを解除せずにそのまま先へ進もうとすることで、レイアウトが崩れるケースが多数を占めています。最も確実なfloatの解除方法は、floatしてから解除する地点までの一連の要素を包含する親要素を作成し、さらにその親要素を閉じる直前で解除するということです。解除には空のdivタグを使用するのが確実です。

しかしながら、HTMLは構造をマークアップするためのもので、視覚的な制御はCSSで行うことが一般的です。回り込みを解除させるためだけのdivタグは、まさしく視覚的な制御のためのものですから、これは本来、CSSで行う必要があるのです。そこで登場するのが、クリアフィックス(clearfix)というテクニックです。これは、after擬似要素を用いて、CSS側で親要素の最後に回り込み解除用のコンテンツを追加するものです。不純なものが挿入される点では、空のdivタグと同じですが、こちらはCSS側で制御しているため、言い訳がしやすくなっています。

クリアフィックスを適用させる際は、目的のHTML要素に「.clearfix」というクラスを付けるのではなく、CSS側で、適用させたいHTMLを指定することで対応しなければなりません。HTMLは構造を表すものですから、そこに回り込みを解除させるためのクラスを指定することは、空のdivタグを挿入することと同じ行為です。それならば、空のdivタグのほうが確実です。例えば複数の要素にクリアフィックスを適用させる場合は、

#navi ul:after,
#navi:after,
#subnavi il:after,
#subnavi:after,
#main:after,
#contents:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
}

#navi ul,
#navi,
#subnavi il,
#subnavi,
#main,
#contents {
    display: inline-block;
}

#navi ul,
#navi,
#subnavi il,
#subnavi,
#main,
#contents {
    display: block;
}

のように、なるわけです。これは、大変です。回り込みをする箇所が増えれば増えるほど、面倒になります。HTML側に「.clearfix」としたくなる気持ちも分かります。しかし、HTML側に回り込みを解除するためだけの何かを追加するのは、得策ではありません。

そこで、今回のjavascriptの登場です。floatが適用された要素の親要素に「.clearfix」というクラスを動的に追加します。正直、これは私がjavascriptとjqueryの勉強をする目的で作成したものです。目的である、javascriptとjqueryの勉強は達成できましたが、このjacvascriptの存在意義は、作ってる途中で、「やっぱ、無いな」と思いました。考えても見てください。floatを解除するために、わざわざjqueryを読み込ませなければいけないなんて、そんな可笑しな話がありますか?しかも、javascriptがオフだと、回り込みが解除できないんですよ!

でも、まあ、せっかく作ったので、とりあえず、このサイトで使っています。wordpressは、勝手にjqueryを読み込むので、まあ、いいでしょう。だからこのサイトを見る時はjavascriptをオフにしないでね。むなしくなるから。

jQueryは憶えて損はないと思うよ