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

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

横スクロールさせる場合、縦方向のセンタリングしておくとおさまりが良い。また視線移動もある程度抑えられると思うので、上に寄っているよりは読みやすくなりそう。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を使ってレイアウトを誤魔化すのは好きではないので別のやり方でやりたい。

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

普通の縦スクロールのサイトの場合はHomeとEndでヘッダとフッタに到達できるが、横スクロールの場合は到達できない。そのためフッタはともかくホームページに戻ったりナビゲーションがあったりするヘッダは常に表示された方が良さそう。最初は難しく考えてしまいうまくいかなかったが、普通に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ならエントリ個別のページでスクロールバーを見えない色合いにしてしまえばすっきりするかもしれない。