マウスホイールに動きで横にスクロールの横長ページを作成する【jQuery連載16】 | HTML5でサイトをつくろう

基本的にウェブページは縦長になるようにレイアウトされ、上下にスクロールしながら閲覧することが一般的で、横スクロール型のサイトはFLASHサイトなどで一部見られたが、特別な理由が無い限り導入されることはありませんでした。しかしサイトとして他にはあまりみられない個性の一つとなるため、うまく導入すれば印象的なサイトにすることができるかもしれません。 横スクロールが採用されない理由のひとつは、ユーザがスクロールバーを横にスライドさせる操作がしづらいことが理由のひとつだが、そういったユーザの不便さをJavascript、jQueryで操作系の機能を補助することで解消することができる。 今回はメニューによるダイレクトリンクの他、マウスホイールやスワイプ操作で横スクロールするウェブページを作成してみます。 今回作成したサンプル 【サンプル】横スクロールするページ（ベーシック） http://www.ht

[masakazu1998]

“まずはどのように横スクロールの仕組みを実装して行けば良いか、図を見ながら順を追って考えてみよう。本来は縦にならぶ、ひとまとまりの内容（※以下、コンテンツカラム）1つにつき1ページ分として分割し、横並び