横スクロールのWebページを作りたい

http://tympanus.net/Tutorials/WebsiteScrolling/

こちらのような、横にスライドするWebページを作ろうと思っています。
超横長な１ページを作って、スクロールで見える範囲を設定するという想像は出来ます。
このように、超横長な１ページはどのように作ればいいのでしょうか？
普通でしたら、Photoshop等でモックアップを作り、スライスしていくのが一般的ですが
仮にこのサイトの大きさが8000pxだとすると、とんでもなくデザインしにくそうです…

それと、仮にこのようなページを作る場合、慣れた人ならどのような手順で作っていきますか？


回答よろしくお願いします。
※スクロールのアニメーション自体はjQueryでできることは知っているので大丈夫です。

No.4 ベストアンサー 回答者： taloo 回答日時： 2013/02/27 14:59

floatを使う場合は

それを囲む外側の要素に、内包するfloatさせたい要素全部が横並びするだけのwidthを指定しておかないと、ウインドウの端で折り返されます。

body{width:12000px;}

No.3 回答者： naokita 回答日時： 2013/02/27 00:35

本来なら別にするべき各ページを１ページに合体して、CSSで横にfloatするだけ。

各ページ（各section）4000px　　背景（black,white）を変更

内包は、600pxで良いでしょう。背景画像が大きいだけです。

以下のような画像を用意
http://tympanus.net/Tutorials/WebsiteScrolling/i …
http://tympanus.net/Tutorials/WebsiteScrolling/i …
色を変更しただけですね。
各ページとするのでスライスしません・・・
あとはわかりますよね？

.black {
background: url("../images/black.jpg") no-repeat scroll right top #000000;
color: #FFFFFF;
}
.section {
bottom: 0;
float: left;
height: 100%;
margin: 0;
text-shadow: 1px 1px 2px #F0F0F0;
width: 4000px;
}

No.2 回答者： taloo 回答日時： 2013/02/26 23:37

>No.1補足

<div>1つ目</div>
<div>2つ目</div>

というページを作り、
横に並べて表示すると、パノラマデザイン（横スクロールページ）になります。
この、１つめのdiv、2つめのdivを、1ページ目、2ページ目と呼ぶと、HTMLファイル１つを1ページと読んだ時の『ページ』の呼び方と混同して、混乱の元になるのではないかと思います。


http://view.adam.ne.jp/setoy/pic/360demo/index.h …
http://view.adam.ne.jp/setoy/pic/360demo/360sc3. …
JavaScriptと<img>の解説ですが、
２つ並べたらどんな表示になるか、というものですので、わかりやすいんじゃないかとおもいます。

あとは、タイマー（JavaScriptによる自動）でスクロールするか、手作業でスクロールするかの違いです。

No.1 回答者： taloo 回答日時： 2013/02/26 23:11

縦長でも横長でも区切り部分はありますし、

その部分で区切ってデザイン（編集）して、HTMLやCSSで連結させればいいと思います。

ラフスケッチ（デザインラフ、デザイン案）は紙と鉛筆だと思いますけどね。
必要なら長尺紙とか糊で紙を連結とかで来ますし。（デジタルでもキャンバスサイズ変更はできますけど）


区切り部分の無い、パノラマ写真などを編集する場合などはよくわかりませんが、
たぶん、分割編集した後で連結していると思います。
http://www.my-panorama.com/gururi360/360gururi.htm
http://www.my-panorama.com/workshop/ws008.htm

この回答への補足

回答ありがとうございます

＞＞縦長でも横長でも区切り部分はありますし、その部分で区切ってデザイン（編集）して、HTMLやCSSで連結させればいいと思います。

申し訳ございません。　こちらの部分ですが、もう少し噛み砕いて解説お願い出来ますでしょうか？　詳しく知りたいです。

補足日時：2013/02/26 23:25