• 締切済み

vogueサイトのようなスライドを作りたいのですが

始めて質問させて頂くので、質問のしかたに不備等あれば申し訳ありません。 表題の通り、下記にURLを記載しているvogueのサイトに実装されているようなスライドショーを作ろうとしているのですが、レイアウトがうまく出来ません。 http://www.vogue.co.jp/ 制作にあたって、Twilight Slideshow（配布サイト：http://love-media.net/twilight-show-en）というjQueryプラグインがあったのでこちらを使用してある程度の形までは出来上がりました。 躓いているのは、vogueのサイトのようにブラウザのウィンドウ幅いっぱいにスライドを表示した上で、さらにウィンドウ幅を拡大縮小しても常にスライドの現在の画像が中央に表示されるようにしたいのですが、現状ではウィンドウ幅を変更するとスライドの中心がどんどんブラウザの中央からズレていってしまいます。 正確には、左側に表示させている一つ前のスライド画像の幅が固定され、右側の次のスライド画像だけ表示幅が変更されてしまうためスライドの中心がズレていくという状況です。 cssの指定で、スライド部分のdivに対してposition:absoluteで位置決めをしても上手く行きませんでした。 また、スライドに対してwidthをピクセル単位で指定した場合は上手く行くのですが、目標のサイトのようにwidth:100%とすると上記のようなズレが発生します。 どのようにcss、及びjQueryを設定すれば常にスライドを中央表示させることができるのでしょうか？ もしくは、使用しているTwilight Slideshowではそのような設定は出来ないのでしょうか？そうであれば、vogueのサイトのような仕様のスライドショーを作るにはどうしたらいいのでしょうか？ お知恵を貸してくださる方がいらっしゃいましたら何卒よろしくお願い致します。

  • kyen
  • お礼率50% (1/2)
  • CSS
  • 回答数2
  • ありがとう数1

みんなの回答

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

Vogueは一旦忘れて、まずは要素のセンタリングの方法からですね。 たとえば、単純にpをセンタリングする方法はご存知なのでしょうか？ https://www.google.co.jp/search?num=100&hl=ja&newwindow=1&safe=off&q=css+%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&oq=css+%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&gs_l=serp.3..0i7l10.6754.9589.0.9644.13.11.2.0.0.0.119.1134.0j10.10.0...0.0...1c.nruOu0JHpDY

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

画像を中央配置し縦横比を変えないためには、 ・画像は行内要素をdisplayblockでblock要素にする。 ・widthプロパティで巾を決める。margin-right/margin-leftの値をautoとする。 ・heightの値はautoとする の三点セットです。

kyen
質問者

お礼

お礼が遅くなってしまい大変申し訳ありません。 ご回答頂き誠にありがとうございます。 質問の仕方が分かりにくかったようで申し訳ありません。 これまでの経験ではご回答頂いたような記述で中央表示できていたのですが、今回使用したTwilightSlideshowというプラグインで作成したスライドこの方法でセンタリングできなかったんです。（ページ読み込み時は中央表示されるのですがブラウザのウィンドウ幅を伸縮すると中央からズレていきます。） 結局、別のプラグインを使用すれば同じcssの記述でも中央表示ができましたので、TwisightSlideshowの使用は一旦取りやめたという現状です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • トップページの画像をスライドさせたい

    jQueryを使って、下記サイトのスライドショーを作成したいと思っています。 http://www.ide-clinic.com/ ブラウザを広げても両端に画像が残る形にしたいです。 作成方法がわかるURLをご存じの方がいらっしゃったらぜひ教えてください。 いろいろ検索しましたが中央画像のみのスライドショーしかみつけられませんでした。 宜しくお願いします。

  • スライドのJavaScriptを探しています。

    このページのトップページのflashの様なスライドのJavaScriptを探しています。 http://www.mcube.jp/ 必要な条件は、３つあります。 ●メインの画像の左右にも画像が表示されていている（このサイトの様に半透明なら尚良し） ●スライドして切り替わる（このサイトの様に光ったりする余計なエフェクトは必要なし） ●下にサムネイルがついている これにとても近いスライド（Twilight Slideshow）は見つけたのですが、サムネイルがないため困っています。 上記の条件を満たすスライドのJavaScriptはありますでしょうか。 よろしくお願いします。

  • jqureryスライドショーが上手くいきません。

    こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン　フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }

  • JQueryでサムネ付スライドショークロスフェード

    JQueryでクリックを使用せず、自動クロスフェードのサムネイル付きスライドショー&マウスオーバーでもクロスフェードで切り替わるようにするためにはどうすればよいでしょうか？ 更にはスライドショーにキャプションがつけられたら最高です。 スライドショーの幅はwidth: 354px; height: 280px;、サムネイルはその下に縦3つ、横3つの計9つ配置します。 スライドショーは自動フォロスフェードによるループ、またサムネイルをマウスオーバーでもその画像にクロスフェードイン、その際スライドショー内に表示されている&マウスオーバーされているサムネイルの画像は罫で仕切るか、半透明がクリアに表示されるといった処理を考えております。 恥ずかしながら調べても分からなかったので、皆さまの知識を拝借したく投稿させて頂きました。 恐れ入りますが、何卒ご助言下さいますよう、よろしくお願い致します。

  • html内にスライドショーを複数設置

    こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか？当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。 以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。

  • サイトでオープニングでスライドショーを使いたい。

    こんにちは。 サイトのトップページで４，５枚の画像をスライドショーで表示させ、 スライドショーをフェードアウトで終了後に通常のトップ画面がフェードインして表示させることを、 FlashかjQueryで動作させるにはどうしたらいいのでしょうか？ トップページは遷移してページを表示させるのではなく同ページ内で実行させたいです。 参考にしたいwebサイトとしてこちらのhttp://www.boku-seka.com/ 映画公式サイト「僕たちは世界を変えることが出来ない。」のように 出来ればなと考えています。 どうか詳しくご存知の方教えていただけないでしょうか。 よろしくお願いします。

    • 締切済み
    • CSS
  • 横にスクロールするだけのスライドショーを探しています

    こんにちは。 JSとかJQUERYなどを使ってフィルムのように横に流れるスライドショーを探しています。 うまく表現できないのですが、一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものが欲しいのですが、意外に見つからずに困っています。 このようなスライドショーを公開しているサイトさんをご存知でしたらお教えください。

  • 背景色と連動するスライドショープラグイン

    お世話になります。 スライドの画像が変わるたびに背景色も変わるタイプのスライドショープラグインを探しています。 サンプルとして http://elegantthemes.com/preview/eStore/ こちらのサイトの様な感じにしたいと思っています。 中央部分がスライドショーになっており両サイドが背景となっているようです。 ソースを見てみるとslideというクラスがついた要素全体をスライドするようです。 画像だけでなく文字や背景も変わっています。 ようはインラインコンテンツそのものをスライドするタイプのものであれば良いのかなと思います。 lightboxのようなイメージギャラリーですとインラインコンテンツを表示するタイプのものがありますが、単純にフェードインアウトするスライドショーでインラインコンテンツをスライドさせるものは無いでしょうか？ もしくは簡単なjQueryで出来そうならご教授願いたいと思います。

  • メイン画像とサムネイル画像のスライドショー

    サムネイル付きのスライドショーのJavaScriptを探しているのですが、サムネイル画像がメイン画像の上にくるスライドショーはありますか？ イメージを添付します。 http://black-flag.net/jquery/20111122-3597.html 上記のサイトとかでcssを使用してみたのですが、メイン画像の下にサムネイル画像がきてしまいます。 サムネイル画像をメインの画像の上にもっていくことはもしかしてできないのでしょうか。 よろしくお願いします。

  • JQueryのスライドショーを停止させたい

    サイトの背景画像のスライドショーを「VEGAS BACKGROUND JQUERY PLUGIN」を利用して行いたいのですが、スライドショーを1回で停止（ループさせない）ようにしたいのです。 どこをいじってもうまくいかなく困っています。 お教えいただけないでしょうか？ http://vegas.jaysalvat.com/ （SLIDE SHOWを利用しています。） よろしくおねがいします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する