横スクロールのサイトデザイン

横スクロールで閲覧するサイトを作りたくなったので、iine!をそうしてみた。ブラウザが横幅8000px以上ならスクロールせずに見ることができる。Ch9とFx3.6、Sf5、Op11、IE8で確認した限りでは特に問題なさそう。手探りでHTMLとCSSを組んだのでdivがものすごく多い。

コンテンツを縦方向にセンタリング

横スクロールさせる場合、縦方向のセンタリングしておくとおさまりが良い。また視線移動もある程度抑えられると思うので、上に寄っているよりは読みやすくなりそう。CSSによる実装にはいくつか方法があるが、一番明快なdisplay: table;display: table-cell;を利用したテクニックを使った。

html {
  height: 100%;
  display: table;
}

body {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

#wrapper {
  height: 424px;
}

ブラウザの描画領域全体まで拡大させたbodyをテーブルのセルにして、コンテンツ全体を.wrapperでくくりセンタリングする。あまりdisplayを使ってレイアウトを誤魔化すのは好きではないので別のやり方でやりたい。

ヘッダとフッタをスクロールさせない

普通の縦スクロールのサイトの場合はHomeEndでヘッダとフッタに到達できるが、横スクロールの場合は到達できない。そのためフッタはともかくホームページに戻ったりナビゲーションがあったりするヘッダは常に表示された方が良さそう。最初は難しく考えてしまいうまくいかなかったが、普通にposition: fixed;を使うだけだった。

#wrapper #header {
  position: relative;
}

/* ロゴ */
#wrapper #header h1 {
  margin: 8px;
  position: fixed; /* 左寄せなのでtopとleftは不必要 */
  width: auto;
  height: 16px;
  line-height: 16px;
}

/* フィードやTwitterのリンク */
#wrapper #header ul {
  margin: 8px;
  position: fixed;
  right: 0; /* 右寄せ */
  width: auto;
  height: 16px;
  line-height: 16px;
}

#headerへのposition: relative;はなくても大丈夫だったが、なぜなくても良いのかわからなかったので入れておいた。display: table-cell;とかの絡みで何か変わるんだろか。

ここではヘッダを中央付近に固定したが、コンテンツの高さが不定な普通のブログ等の場合はヘッダとフッタを#wrapper外に置き、そこでヘッダ(フッタ)ごとposition: fixed;で描画領域の上端(下端)に固定するのが良さそう。

各エントリの横並べ

float: left;でひたすら並べる。ただそれだとブラウザの横幅で折り返されてしまうので、各エントリを括る#contentsを作り、その横幅を770px(エントリの横幅)*10(1ページに表示するエントリ数)+αにして折り返されないようにする。

/* インデックス・ページ用 */
#wrapper #contents {
  width: 7860px;
  height: 200px;
}

/* エントリ個別のページ用 */
#wrapper #contents.individual {
  margin: 0 auto;
  width: 930px;
}

#wrapper #contents .section {
  float: left;
  width: 770px;
}

αはページング・ナビゲーションのために確保。エントリ個別のページでは1つのエントリをセンタリングして表示するように#contentsの幅を制限し、marginでセンタリングしている。

横スクロールバーを常に表示させる

インデックス・ページからエントリ個別のページに飛ぶとスクロールバーの有無で縦方向の位置がずれることへの対策。縦スクロールのサイトでも幅固定のコンテンツをセンタリングした場合にスクロールバーの有無でずれるので、多くのサイトでpixel pushingという古くからあるテクニックが使われている。横スクロールのサイトでも考え方は同じで、margin-bottomの代わりにmargin-rightを使えば良い。

html {
  margin-right: 1px;
  width: 100%;
}

Webkit系やIEならエントリ個別のページでスクロールバーを見えない色合いにしてしまえばすっきりするかもしれない。


縦方向のホイールスクロールで横にスクロールするような仕組みは必要だと思うので、後でjQueryででも作っておきたい。directionwriting-modeなどを使えばCSSだけでもなんとかできそうな気がしないでもない(根拠なし)。あ、transformで全体を反時計回りに90度回転させればいけそう(そんなわけはない)。