http://tympanus.net/Tutorials/WebsiteScrolling/
こちらのような、横にスライドするWebページを作ろうと思っています。
超横長な1ページを作って、スクロールで見える範囲を設定するという想像は出来ます。
このように、超横長な1ページはどのように作ればいいのでしょうか?
普通でしたら、Photoshop等でモックアップを作り、スライスしていくのが一般的ですが
仮にこのサイトの大きさが8000pxだとすると、とんでもなくデザインしにくそうです…
それと、仮にこのようなページを作る場合、慣れた人ならどのような手順で作っていきますか?
回答よろしくお願いします。
※スクロールのアニメーション自体はjQueryでできることは知っているので大丈夫です。
No.4ベストアンサー
- 回答日時:
floatを使う場合は
それを囲む外側の要素に、内包するfloatさせたい要素全部が横並びするだけのwidthを指定しておかないと、ウインドウの端で折り返されます。
body{width:12000px;}
No.3
- 回答日時:
本来なら別にするべき各ページを1ページに合体して、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
- 回答日時:
>No.1補足
<div>1つ目</div>
<div>2つ目</div>
というページを作り、
横に並べて表示すると、パノラマデザイン(横スクロールページ)になります。
この、1つめのdiv、2つめのdivを、1ページ目、2ページ目と呼ぶと、HTMLファイル1つを1ページと読んだ時の『ページ』の呼び方と混同して、混乱の元になるのではないかと思います。
http://view.adam.ne.jp/setoy/pic/360demo/index.h …
http://view.adam.ne.jp/setoy/pic/360demo/360sc3. …
JavaScriptと<img>の解説ですが、
2つ並べたらどんな表示になるか、というものですので、わかりやすいんじゃないかとおもいます。
あとは、タイマー(JavaScriptによる自動)でスクロールするか、手作業でスクロールするかの違いです。
No.1
- 回答日時:
縦長でも横長でも区切り部分はありますし、
その部分で区切ってデザイン(編集)して、HTMLやCSSで連結させればいいと思います。
ラフスケッチ(デザインラフ、デザイン案)は紙と鉛筆だと思いますけどね。
必要なら長尺紙とか糊で紙を連結とかで来ますし。(デジタルでもキャンバスサイズ変更はできますけど)
区切り部分の無い、パノラマ写真などを編集する場合などはよくわかりませんが、
たぶん、分割編集した後で連結していると思います。
http://www.my-panorama.com/gururi360/360gururi.htm
http://www.my-panorama.com/workshop/ws008.htm
この回答への補足
回答ありがとうございます
>>縦長でも横長でも区切り部分はありますし、その部分で区切ってデザイン(編集)して、HTMLやCSSで連結させればいいと思います。
申し訳ございません。 こちらの部分ですが、もう少し噛み砕いて解説お願い出来ますでしょうか? 詳しく知りたいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(プログラミング・Web制作) webデザインです。 プログラミンでの質問なのですが 手動でpc画面を下にスクロールするとスクロール 1 2022/10/10 22:01
- Excel(エクセル) 【マクロ】webアドレスにて指定されたCSVファイル【excelソフト表示】を印刷する件 1 2023/02/15 01:52
- その他(IT・Webサービス) WEBサイト内のファイルを探す方法は? 1 2022/11/11 16:38
- Java JavaでWebページ作成 7 2023/07/21 21:09
- Excel(エクセル) Excelでマウスを使って横スクロールしたい 7 2022/06/07 17:56
- JavaScript イラストレーター、縦中横のショートカットをスクリプトを使って作成する方法 1 2023/04/19 11:15
- Outlook(アウトルック) PCで登録途中の画面から認証コードを確認する方法を教えてください。 3 2022/09/29 06:11
- マウス・キーボード 無線マウス不具合 4 2022/07/10 22:16
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSS、width100%でもできる余白
-
cssで「下よせ」ってどうやって...
-
CSS(0の単位)について
-
ページを拡大縮小でborderが消...
-
<div>と<div>の間の10px程の...
-
floatした画像の下揃えについて
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
定義リスト dl dd dt
-
余分な縦スクロールバーが出て...
-
heaerとfooterに背景画像が難し...
-
Flexslider2のカーセルスライダ...
-
CSSでボックスのheightが0になる
-
【スタイルシート?】同行内で...
-
テーブル内の文字が揃わない
-
【CSSについて】リストをフロー...
-
リストを全体的に右寄せにしたい。
-
CSSで余白とパディングに”0”を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報