固定幅と全幅レイアウトを JavaScript で切り替える
Posted by yoosee on Web at 2005-02-08 23:42 JST
1
固定幅デザインの是非
ネタ元の 760pxと言う新基準 と言う記事は捨て置くとして、固定幅、と言うよりは「一行当たりの文字数/幅がある程度狭いページ」の方が読みやすい気がするというのは個人的な感覚としては同意できる部分だったりする。恐らくは文章を読むときの視線移動量が少なくて済むからだろう。現実に「読むサイトごとに読みやすいようにブラウザの幅を調整する」かと言われると普通の人はそんなことはしないだろうし。2
固定幅と可変幅、それぞれの優位性?
とは言え一方で liquid (fluid) な可変幅デザインの方が「理に適っている」のは全くその通りだと思う。ユーザがどういう環境で閲覧しているか分からない以上、ユーザ側で調整可能な構造にしておくのはリーズナブルだからだ。だが、高アクセスを稼いでいる世の(主には)ニュースサイトにも固定幅を採用しているサイトが少なくないことには、何かしらの理由があると思う。現実には「自分のサイトの見栄えをある程度予測の範囲に留めておきたい」と言う商用デザイン的な意思が働いている可能性も否めないが、この辺りの比較論をユーザビリティの観点から論じた資料はないものだろうか。3
CSS の Switch
ともあれ、ユーザに見た目を任せる事は理に適ってると思う。なので「固定幅か全幅かもユーザに選んでもらおう」と言う方針にしてみた。ちょっと調べてみると alternate stylesheet を使う方法 でうまく行きそうだ。StyleSheet Switcher と言うのを見付けたので、link rel のロジックだけ少し直して使わせて貰う。という事で検索窓の左側に >| |< と |< >| と言う 2つのリンクを作ってみた。片方は幅を 800px 固定にし、もう片方は width 100% にする。Script 内部で Cookie も使っているようで、一度設定した幅は保存されるようだ。4
CSS Switch の仕組み
仕組みとしてはメインの fixed width な stylesheet の他に、 alternate stylesheet として styles-fluid.css と言う css ファイルを作り、link 要素の title を fluid とする。<link rel="stylesheet" href="/templates/styles-site.css" media="screen" type="text/css" /> <link rel="alternate stylesheet" href="/templates/styles-fluid.css" media="screen" type="text/css" title="fluid" /> <script type="text/javascript" src="/templates/scripts.js"></script>JavaScript scripts.js の対応部分はこんな感じになる。
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
if(a.getAttribute('rel')) {
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
a.disabled = true;
if(a.getAttribute('title') == title) a.disabled = false;
}
}
}
}document から link 要素を探し、title がついているものは一度全て disable する。title 属性が無いものはそのまま使われる。onclick イベントで setActiveStyleSheet() に引数で与えられた title の付いた link 要素が active になり、css が読み込まれ、そちらの width が適用される。実際にこれを switch する a 要素を用意する。広げる方には引数として alternate css に付けた title を用いる。
<a href="#" onclick="setActiveStyleSheet('',1);return false;" title="Switch to fixed-width version">>| |<</a>
<a href="#" onclick="setActiveStyleSheet('fluid',1);return false;" title="Switch to full-width version">|< >|</a>ついでというか 800px 幅の画像だと広げたときに間抜けだったので幅広の画像に代えてみた。とりあえずまともに動いている気がする。