携帯サイトの件は「ロボットの巡回」が来るまで一休み。

次なるネタは「リキッドレイアウト」にして、さっそくチャレンジ。

可変的なレイアウト「リキッドレイアウト」に対して固定的なレイアウトを「ソリッドレイアウト」というらしい。

なぜ「リキッドレイアウト」なのかは、こちらのページが参考になる。

> > ユーザビリティの高いレイアウトの原則

ただ、私が「リキッドレイアウト」に挑戦する気になった理由は「理想はディスプレイサイズに依存しないこと」という思想ではなく、「文字サイズ拡大」をした時のデザインをなんとかしたいと思ったからである。

横幅が固定されているレイアウトの場合に、文字サイズを大きくすると結構な頻度で見て目が悪くなる。いや悪くならないページなど見たことがないのが現実。せめて段組が崩れないように工夫するのが精一杯。

ページを作る側としては、せっかく綺麗に配置したものが文字サイズを大きくしただけで崩れてしまっては哀しくなる。両サイドに十分な余白があるのに、狭いところに大きな文字が見苦しく収まっているというのは情けなくなる。

そこで、まずは横幅を文字数(em)で指定した2段組レイアウトを作ってみたが…

文字サイズを大きくすると自動的に横幅も広くなり、見た目が崩れることはない。しかし、これには大きな欠点があり、Firefoxの場合は文字サイズをかなり大きくすることができるため、ディスプレイサイズをオーバーしてしまう。でも、横スクロールはさせたくない。

ということで「リキッドレイアウト」に挑戦することになった。

2段組レイアウトの左側が「本文」のボックスAで右側が「メニュー」のボックスBとする。文字サイズを拡大でも「メニュー」の表示を崩したくないため、ボックスBの幅指定を「13em」とする。そしてボックスAの幅指定をしない。これだけでも「リキッドレイアウト」となるが、この場合はボックスBを「float:right;」してボックスAより先に配置する必要があり、SEO的によろしくない。

ボックスAは可変だがボックスA側で「float:left;」をしたい。

これを実現させる方法を探してみた。

> > CSSによる段組（マルチカラム）レイアウト講座
> > CSSによる2カラム（2段組）レイアウト

「ネガティブマージン」というワザ(?)を使うことで実現可能らしい。

さっそく試してみたところ、かなり良い感じのページになった。

さて、引き続き「文字サイズ拡大」でも良い感じになるようにアレンジ。

外枠を次のように指定。
  width:90%;
  min-width: 34em;
  max-width: 54em;

ボックスA
  width:99%;
  float:left;
  margin: 0 auto 0 auto;
  margin-right:-14em;
  padding: 0;

ボックスB
  width: 14em;
  float:right;
  margin: 0 auto 0 auto;
  padding: 0;

その他、細かいところをちょこちょこ修正して完了。

いきなり会社のページでやるわけにはいかないので、今日のところは自分のブログで試してみた。あれやこれやとCSSをいじくりまわしていたため、頻繁に自分のブログのレイアウトが壊れて冷や汗続きの一日であった。

今回のチャレンジでつくづくIE6は「リキッドレイアウト」に向いていないと思った。

ツイート