VOGUEのようなサイトを作るには。

締切済

質問者：123japan
質問日時：2012/05/23 22:48
回答数：2件

CSSを勉強し始めて20日位の者です。
こちらのサイトのような配置がどうしてもできません。
いろいろなサイトを見ましたが統合的な技術なのか出くわすことができません。

どのようにするとこうなるのでしょうか？

◆疑問点◆
スクロールする画像、黒帯、赤帯、グレイ帯が画面を伸ばせば伸ばすほどどこまでもついてくる点と、伸びているのに（帯より）下メイン部分はセンターに固定され続けている事。
また帯部分に関しては伸びる部分と（下メインと同じ位置）固定されいる部分がある事。

このような構造を簡潔に説明している参考サイトはございませんでしょうか？

説明していただけるようでしたら何卒ご教授お願いもうしあげます。

-------------
XHTML部分
-------------

-------------
css部分
-------------

こちらサイトです。
http://www.vogue.co.jp/?utm_source=pr&utm_medium …

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： tracer
回答日時：2012/05/26 21:27

根本的なセンタリングの方法はご存知ですか？

基本的には、横幅を指定して、margin:0 auto;にするだけです。(IEは別の書き方が必要)　難しく全体を捉えずに、一部分だけで考えてみてください。

たとえば、

body{
　width:100%;
　background:#f00;
}
#menu{
　width:960px;
　background:#00;
　margin:0 auto;
}

<body>
<div id="menu">
メニューです。
</div>
</body>

上記のソースだった場合、どこまで横幅を伸ばしても、bodyの背景色赤は続きますが、#menuの背景色黒は、960pxの幅でセンタリングにとどまったままですよね。Vogueのサイトは、その理屈が複数あるだけですよ。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2012/05/23 23:29

jqueryですが、初心者でしたらいきなりそこまで背伸びするのは考え物です。

jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel ( http://www.webopixel.net/javascript/535.html )

まず、HTMLやCSSをきちんと身につけましょう。

この回答への補足

画面について来る（下にスクロール）上部固定ではなく。

マルチ画面にて作業しているのですが、3ディスプレイに伸ばしても帯が横方向ににどこまでも伸びるのが質問の意図です。

説明が悪くてすみません。

またどこまで（横方向に）伸ばしてもメイン部分と帯のリンクのある部分が固定でセンターになっているのもの不思議です。

この辺の解説サイト等があればぜひご指南いただきたいと思います。

補足日時：2012/05/24 10:52

通報する