CSSでの回り込み指定「float」には「clearfix」が便利でスマート

CSSでの回り込み指定「float」には「clearfix」が便利でスマート

Webサイトのマークアップで必ずと言っていいほど使用する回り込み指定のfloat(フロート)。CSSで回り込み指定が出来たのはいいものの、関係ないタグも回り込んでレイアウトが崩れたりと、floatを自在に扱えるかどうかで初心者と中級者の違いが出ると言っていいほど、完璧に扱うには容易ではありませんよね。

そしてfloatの一番難しい所が、レイアウトが崩れる原因でもあるclearによる回り込み解除指定です。私が勤めていた会社でもいたのですが、<br class=”clear”>や<div class=”clear”></div>のように、空タグで回り込み解除を行っている人も多いのではないでしょうか。

スマートじゃないclear指定

この方法でも結果的に回り込みは解除されるのですが、改行の意味やタグ内には何も入っていないので、無駄なソースコードと判断される場合もあり、SEO内部対策的にはあまり宜しくありません。そして何より、マークアップとしてスマートじゃないですよね。

そこでfloatで回り込みレイアウトをした場合に便利なのが「clearfix」という独自のクラスセレクタです。

clearfix(クリアフィックス)で完結型に

clearfix(クリアフィックス)とは、言い換えると「このブロックの回り込みを次のブロックに影響させない」という、ブロック完結型のclear指定です。

CSSに下記スタイルを記述します。

HTMLでは次のように使うと反映されます。

これでソースコードもすっきしりて、なんだかスマートです。

ソースコードも綺麗にするのがプロ

マークアップエンジニアの仕事は、デザイン通りのレイアウトでコーディングをして、なおかつCSSを駆使したクロスブラウザ対策、表示速度の高速化、各種デバイス対応など様々。更には、SEO内部対策を意識したコーディングも求められて場合もあります。

そうなると、必然的にソースコードのダイエット(余分なコードは消す)であったり、人的にも機械的にも読みやすいHTMLコードにしなければなりません。コメントアウトの乱立やW3Cに準拠していないコーディングは、サイトクオリティの低下にも繋がります。

マークアップ最適化も立派なSEO内部対策ですので、本腰入れいてSEO対策を行う際はソースコードも見直してみてはいかがでしょうか?

いいね!のお慈悲を…

この記事が良かったらシェアをお願いしゃっす!

記事の感想はこちら