あかつきのお宿

気づけば今年も残すところ1か月を切りましたね。

ついでに12月に入った瞬間、急激に気温が下がったような気もしますね。たぶん気のせいではないと思いますが、さすがの僕もそろそろ長袖の下に長袖を着た方が良いのかな～なんて思っている今日この頃です。



さて、ウェブサイトのレイアウトなんかを組んでいると、cssでfloatを使う場合が出て来ると思うんですよ。

このfloatってのは結構やっかいな野郎でして、モダンブラウザは基本的に問題ないんですが、IE７とかの場合にデザインが崩れちゃったりすることがあるんですね。

divの入れ子構造

で、今回もそんな感じでIE７だと～的な話なんですが、divを入れ子で使い、中のdivにfloatを指定すると、デザインが崩れてしまうようなんです。

HTML的にはこんな感じです。

<div id="main" style="background:#ccc;border:1px solid">
  <div style="float:left">
    //左ブロック
  </div>

  <div style="float:right">
    //右ブロック
  </div>

  <hr style="clear:both" />
</div>

すごいざっくり書いた上にソースしか見ないといまいち分かりづらいかもしれませんが、ようは大枠のブロックの中に2つのブロックを横並びで並べたいような感じです。

あかつきのお宿でいうと、トップページの右カラムに小説を音楽をそれぞれランダム検索するためのブロックがありますけど、それをさらに大枠で囲んだような感じですかね。

文章だけだとやっぱり分かりづらいかな……すみません。

上記みたいな書き方だと、一見問題はないように思います。ちゃんと最後にhrタグでclearもしてるし、大丈夫そうに思うんですが、でも大丈夫じゃなかったんですよ、これが。

floatを使っていると高さが無視される

僕が確認した限りではIE7だけなんですが（もはやIE6は見ない）上の書き方だと、大枠の背景が出てこないんですよ。正確には、出てきてはいるんですが、中のブロックを囲むような表示にならない。

こちらのサイトさんでまさにその実例を載せているのですが、自分でこの記事のためにテストレイアウト組むのはめんど……あ、いや、せっかくなんでちょっとそれを参考にさせてもらいましょう。

こちらさんの例2.1なんかがまさにそうですね。まあ、僕の場合はなぜか外側の枠が上じゃなくて下に出てましたが……何でだろ。

それはさておき、どうしてこんな現象が起きてしまうのかということなんですが、僕もざっくりとしか調べてないんでもし間違ってたらごめんなさいなんですけど、どうもfloatを使ったブロックの高さが無視されているみたいなんですね。

普通は意図的に高さを指定したりしない限りは、例えばこのブログでもそうですけど、文章が長くなればその分だけ背景のブロックの高さも増えますよね。でもfloatを使うと、今の例でいえば文章の長さが無視された状態になるので、中のブロックがはみ出てしまいます。

高さが上手く取れないのが原因なので、だったら外のdivにCSSで高さを指定しちゃえば問題は解決じゃん？　っていう考え方もあるとは思うんですけど……

<div id="main" style="background:#ccc;border:1px solid;height:300px">
  <div style="float:left">

  ～中略～

</div>

この場合、高さが固定で問題ないならともかく、文章の長さによって変わるような場合は、ピンポイントで高さを指定するのはちょっとあれですよね。

プログラマ的解決法

僕はプログラマなんで、こういうCSSとかで分からないところはぜひともデザイナーさんにお願いしたいところなんですが、今僕がいる会社はデザイナーがいないもんで、っていうか技術者が僕しかいないので、デザインもプログラムも自分で何とかするしかない。

で、本来であればCSSのみでちゃんと回避できるようにすれば良いんでしょうけど、上手いやり方がよく分からなかったんで、ここはもう、プログラマ的に攻めようという結論に達しまして……つまりjavascriptでやっちまおうっていうところに落ち着きました。

やり方はいたって簡単。ページを読み込む際にdivの高さをjavascriptで取得して、それを動的に書き込むようにすれば良い。こんな感じで。

あ、jquery使ってるって前提でお願いします。

<script>
var height = $('#main').height();
$('#main').css('height', height);
</script>

こうやっとけば高さを指定できるので、しかも固定ではなく、読み込み時のdiv本来の高さを指定できるので、とりあえず背景がおかしくなることは回避できる。



問題はこういうやり方が良いのか判断できないところなんですけど……今回議題にあげている僕が仕事で作ってるウェブサービスはjavascript切ってると動かないんで、まあ、いいかな～って。

ただ、javascriptで何とかすればええやんって発想するあたりは、いかにもプログラマ的思考って感じがしなくもないですよね。

僕がもう少しCSSに詳しければ話は違ってくるんでしょうけど……それはもう少し先の話やね。


それにしても……コーラフロートはただただ美味しいだけなのに、CSSのフロートは全然美味しくないですよ……まったくもぉ。