- 締切済み
VOGUEのようなサイトを作るには。
CSSを勉強し始めて20日位の者です。 こちらのサイトのような配置がどうしてもできません。 いろいろなサイトを見ましたが統合的な技術なのか出くわすことができません。 どのようにするとこうなるのでしょうか？ ◆疑問点◆ スクロールする画像、黒帯、赤帯、グレイ帯が画面を伸ばせば伸ばすほどどこまでもついてくる点と、伸びているのに（帯より）下メイン部分はセンターに固定され続けている事。 また帯部分に関しては伸びる部分と（下メインと同じ位置）固定されいる部分がある事。 このような構造を簡潔に説明している参考サイトはございませんでしょうか？ 説明していただけるようでしたら何卒ご教授お願いもうしあげます。 ------------- XHTML部分 ------------- ------------- css部分 ------------- こちらサイトです。 http://www.vogue.co.jp/?utm_source=pr&utm_medium=os
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- tracer
- ベストアンサー率41% (255/621)
根本的なセンタリングの方法はご存知ですか？ 基本的には、横幅を指定して、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のサイトは、その理屈が複数あるだけですよ。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
jqueryですが、初心者でしたらいきなりそこまで背伸びするのは考え物です。 jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel ( http://www.webopixel.net/javascript/535.html ) まず、HTMLやCSSをきちんと身につけましょう。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
確かに言われる通りで今たくさんお勉強してます。今後も一層努力していきたいと思います。添付先も参考にさせていただきます。
補足
画面について来る（下にスクロール）上部固定ではなく。 マルチ画面にて作業しているのですが、3ディスプレイに伸ばしても帯が横方向ににどこまでも伸びるのが質問の意図です。 説明が悪くてすみません。 またどこまで（横方向に）伸ばしてもメイン部分と帯のリンクのある部分が固定でセンターになっているのもの不思議です。 この辺の解説サイト等があればぜひご指南いただきたいと思います。