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でもOK!!「display: table」と「display: table-cell」
はじめは以前のように「float」を使用してIEのみに対応していました。その後いろいろ調べてみると「display: table」というものがありました。“table”= “表組み”という頭があったので、はじめは気にもとめていませんでしたが、どうやらこれで解決できそうです。
追記：「Flexbox」を使えばもっと簡単
このテンプレートを作成したのが2013年。当時とはもうブラウザの環境が一変しており、IEが如何の斯うのと気にしなくても良くなりました。CSS3もようやく定着した感がありますね。以前のように古いIEを気にしなくてもいいので、「display: table」でもいいのですが、「Flexbox」を使うともっと簡単にできます。htmlの構造的にもその方が良さそうなので、「Flexbox」で作り変えました。
このテンプレートの主な特長は下記の通り
- HTML5＋CSS3で構成されたシンプルな仕上がりです。
- サイドバー固定でメインカラムを可変可能な3カラムのレイアウト。可変レイアウトにすることによってワイドな画面にもスリムな画面にも対応できます。
- 透過使用のおしゃれなイメージ。ヘッダー部分に少し余裕を持たせて指定していますので、背景にきれいな画像を作ったら、さりげなくアピールしてみましょう。サイトの雰囲気もグッとアップします。
- ベースカラーは明るいイメージの“azure”を使用。
どうぞご利用ください。