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

質問

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

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

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

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

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

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

body{width:12000px;}

回答No.3

naokita

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

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

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

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

.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）

>No.1補足

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

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

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

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

回答No.1

神崎 渉瑠（@taloo）

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

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

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

補足

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

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

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