スライダーで動的に本文とサイドバーの比率を変更・保存するスクリプト（2カラム版）：ウェブログのIA研究(3)

昨日言いました通り、2カラム版です。

といっても、max-widthプロパチをwidthに変えて、少し値を変えるくらいです。widthプロパチを使うと言うことは、副作用としてIE6に対応することになりました、IE6 + 現在確認できるモダンブラウザでは動作を確認しています。

では、なんだかんだ言うより、とりあえずデモとスクリプトをどうぞ。

で、これは前置きで本当はもうちょい直感的にいじれるコントローラを考えてたんですよ。図にするとこういうのです。

本文とサイドバーのボーダーにサイズ変更ボタンが付いた図

つまり、本文ボックスとサイドバーボックスの間にボタンを設けて、ボーダーとボタンが連動する形で移動する感じです。

ただ、実際やってみるとこれが案外調整が難しくて、デメリットも大きいです。というのは、まず、リキッドレイアウトができません。

なぜかというと、まず、スライダーの長さは一定にしないといけませんから（ブラウザの幅に依存するとスライダーの長さが変わってしまう）スライダーの長さの単位は % ではなく、pxにしないといけません。

そして、この場合スライダ部分もjavascriptでスタイルをいじりつつ動的に動かすことになりますが、スライダーをボタンが動くと、移動した分だけ「ズレ」がでるんですね。このズレはスライダーの長さに関係するため、px単位でのズレになります。

スライダのズレ

となると、単位をpxに統一しながら微調整をしないといけませんから^*1 、スライダ部分の移動はpx単位で行うことになります。そうすると、それに併せて、本文ボックス・サイドバーボックスもpxで組むことになります。ゆえにリキッドレイアウトができないと。

てわけで、最初の点で妥協したわけですが、これでも十分ですかね。ただ、それよりもこれを他の点で改良することを考えた方がいいかもしれません。

例えば、本文ボックスの幅が広いときは1カラム、そこそこの広さのときは2カラム、かなり狭い場合は3カラムにすると言った具合です。私は1カラム賛成派の人ですが、以前にも言いましたとおり、理想的には最終的な選択はユーザーにゆだねるべきだと思います。

ただ、それは、1カラムなら1カラムなりのメリット、2カラムなら2カラムなりのメリットをきちんと考慮した上で、設置するサイトに各カラムデザインを提供するだけのメリットがあったときの話であって、その必要がないのならば、積極的に1カラムあるいは2カラム、nカラムと絞り込んでいくことも必要だと思いますね。

キーワード：

Liner Note