2012年10月3日水曜日

CSSのこと

サイトを作成するにあたりコーディングにおいてCSSは必須のものではあるんですが
ある程度の文法にしたがってコーディングしていくのは
当たり前として、1つの表現をするのに様々な方法があるのが悩みなんですよね。

よくあるfloat解除ってヤツです。
float:left; もしくは float:right; させたブロック要素の後には
解除してやらないとその後のレイアウトがぐっちゃぐちゃになります。

この解除の方法は最初に習うのがその次のブロック要素で
clear: both; させてやれば解決なんですけど
その次のブロック要素がいつも同じものとは限らない。

とすると他の方法になるんですけど。

<div stlye="clear: both;"></div>
では空の<div>要素を使ってしまうことになるので
ソース上あまり美しくない。

有名な「clearfix」を使ってみても万能ではなく
一部を <div stlye="clear: both;"></div> 使用しないと 崩れてしまうブラウザもある。

それでは float したブロック要素を囲うブロック要素に

overflow: hidden;
を設定する方法もあるんだが、これも何重にも2階層以上になると
どっかで崩れるんだなー。
一応親にあたるブロック要素で
zoom:1; と overflow:auto;
を設定すると回避できるとかいう記事もあるんだけど
まだ試してないです。。。

コレ!っていうやり方ないんかな~?
結構いい制作のお仕事をされている方のサイトでも
これだけは色々なパターンがあるようで。
皆さん悩まれているんですよね。
それにしてもブラウザが1種類で世界共通になれば良いのに!
と大まじめに思ってしまうこの頃でした(現実逃避やん。。。)。