tro-suke blog

HTML5・CSS3で3カラムテンプレートを作る

パソコンのモニターも以前に比べてワイド型のものが多くなってきました。そのためブラウザの横幅を広く使っている方も多いと思います。そういった場合、横幅を固定したものよりも可変にすることで、より使いやすいものになると考えました。まあこれは3カラムのテンプレートに限ったことではないんですけどね。

メインカラム部分を横幅可変にしたレイアウト

3カラムのテンプレートを作る場合、今まででしたら「float」だったりネガティブマージンを使っていました。CSS3では「display: box」を使えば、「float」を使用しなくても綺麗なソースで、３カラムのレイアウトが作れるようになります。

サイドバー固定でメインカラムを可変のレイアウト

このテンプレートでは「display: box」を使用して3カラムのテンプレートを作っていますが、その特長は、サイドバー固定でメインカラムを可変のレイアウトにしていることです。スタイルシートでは「box-flex」を使います。可変にしたい「box」に「box-flex」を指定することでカラムの横幅を可変にすることができます。

やはりInternet Explorerが落ちをつけてくれました

しかしいざ作ってブラウザで確認してみると、IEだけはうまく表示してくれない。調べてみるとIEは未対応とのこと…。「display: box」を使用すると高さも自動的に確保してくれるのに、どうしたものか。IEも10になって他のブラウザーと同じようになったかなと思ったけど、やはり落ちをつけてくれましたね。結局IEだけは今まで通りの方法で対応することにしました。IEハックも何時まで続くのでしょう…。

「display: box」を使用したときと「float」を使用したときの違い

赤丸の部分が見え方の違いです。