jQueryスライダーをトップページに配置したい

このQ&Aのポイント
  • 質問者は自身のサイトのトップページにJavaScriptのスライドショーを配置したいと考えています。
  • しかし、質問者はWEBデザインの知識が乏しく、サンプルコードを利用しようとしています。
  • しかし、CSSの処理によりレイアウトがうまくいかず、問題が発生しています。
回答を見る
  • ベストアンサー

jQueryスライダーをトップページに配置したい

サイトのトップページに、javascriptのスライドショーを配置したいと思っています。 (イメージはこんなスライドです) http://sandbox.scriptiny.com/tinyslider2/ WEBデザインもまだ勉強中でプログラム領域の知識は全くないため、 サンプルコードを公開しているサイトさんでお借りしようと思っています。 例の通りにcssやjsをリンクさせ、スライド自体は上手く行っているのですがレイアウトがうまくいきません。 (中途半端にスライドしたり、画像送りのボタンが表示されなかったり) 問題点として、サンプルのcssの記述と、もともとのサイトのcssがぶつかってしまう(?)ことがあります。 どのサンプルもcssで margin:0;padding:0; がbodyもしくはアスタリスク(*)で全要素に指定されており、 これが元のトップページのcssレイアウトに影響してしまいます。 こういう場合、cssの処理はどうするのが適正でしょうか。 素人のため分かりにくい文章になってしまっておりますが、その際はご指摘いただけましたら幸いです。 宜しくお願いいたします。

  • d_382
  • お礼率80% (12/15)
  • CSS
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

例のサイトは、 <div id="container"> 内にスライドショーが配置されているので、 *{margin:0;padding:0;} を div#container *{margin:0;padding:0;} とすれば良いでしょう。 (本来は、アスタリスクの全称指定でリセットせずに個別指定した方が良い) そうすれば、元のデザインには影響する事がなく、 スライドショーだけに適応されます。 但し、質問者さんの構造が スライドショーの外枠が<div id="container">だとは限らないし 別のセレクタが関係している場合や優先度の問題もありますので・・・

d_382
質問者

お礼

早速の回答ありがとうございました。 ご指導いただいた内容で一度やってみます。 positionの指定や優先度など、知識がたくさん必要ですね・・・。 また結果もご報告できればと思います。 ありがとうございました。

関連するQ&A

  • jQuery slider2のページアイコン

    小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。 既成のJavascriptプログラムの中でスライドショー向けのjQuery slider2をダウンロードし、 ウェブサイトに適応してみました。 概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン(class="jquery-slider-page"として作成されている部分?)が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。 なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。 もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。 不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。 使用しているjsは下記のとおりです。 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js jquery.slider.min.js(http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用) また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。 他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。 よろしくお願いします。

  • jQueryの基本的なことについて教えてください

    自サイトで 「jQuery Slider²」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 (google chrome、IE8で見ています) 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか? それとも、このプラグインに限ってはxhtmlなのでしょうか? よろしくお願いいたします。

  • MacではOKなのにWinで見るとトップ以外のページのレイアウトが崩れているのは何故?

    お世話になります。現在サイトを作成しているのですが、何故かMacの表示とWinの表示が異なっていてWinで見るとレイアウトが崩れてしまっているという状況です。MacはSafari・FireFox・IEなどで確認しましたが普通にレイアウトが崩れることなく表示されました。ところがwinのIEで観覧してみるとトップページのみまともに表示され、他のページはレイアウトが崩れているのです。レイアウトはCSSでdiv分けして組み込んでいて基本どのページも同じCSSを適用しているはずなのに何故かトップページ以外のページが崩れます。これは一体どうしてなのでしょうか?教えていただけないでしょうか? div#header { width:800px; margin-left:auto; margin-right:auto; } div#container { width:800px; padding-bottom:5px; margin-left:auto; margin-right:auto; } div#contens { width:800px; margin-left:auto; margin-right:auto; } div#leftmenu { width:170px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#centermenu { width:630px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } contents(800px)の中にleftmenu(170px)とcentermenu(630px)があるのですがこのcentermenuがleftmenuの隣に収まって欲しいところ下段に表示されます。

  • Jqueryスライダーが動きません。

    WEB制作の素人です。 簡単といわれている「FlexSlider2」ですが、私がやったところ、 画像は出たもののスライドにならず、そのまま上下に出てしまいます。 一度見ていただき、間違えを教えていただけますか? (ちなみにスムーススクロールは動きます) <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。

  • jqueryでスライダーを設置した時に

    jqueryでスライダーを設置した時に設置したページのテキストが画像がスライドするタイミングで点滅してしまうようです。 現象が起こっているのはMacのsafariとchromeです WindowsのIEやモダンブラウザ、MacのFirefoxではオッケーのようです。 ちなみにコンテンツスライダーは、glide.jsやbxslider.jsです。両方とも同じ現象が起きます。 chrome はwebkitではなくなりましたし、、、 該当ページでは、スティッキーヘッダ、トップへ戻るボタン、ロールオーバーや複数のタブパネルなど、jQueryの塊のようなページになっておりまして、、、 ただ、それらをすべて無効にして、スライダだけを実装状態にしても同じようです。 スライダーそれぞれのCSSをみてみましたが、同ページにあるCSSの他のセレクトと同名のセレクタはないようです、、、 どなたか似たような現象を解決された方がいらっしゃいましたらご教示願えますでしょうか?

  • jQueryスライダーの止め方

    jQuery Destaque Plugin http://globocom.github.io/destaque/ こちらのサイトのパララックススライダーを使おうと考えていますが、 デフォルトでスライドをストップさせる方法がわかりません。 どなたかご教授下さいますでしょうか。 また、このプラグインを使って ページネーションをつけた例がございますが、 http://www.nxworld.net/sample/jquery-destaque/ 「3」「4」を表示中に「1」「2」を押すと、 スライドが左から右に遷移しますが、 この方向を固定で右から左へ動かすことは可能でしょうか? こちらもわかる方がいらっしゃいましたら、是非宜しくお願い致します。

  • jQueryでulを動かしたい。

    javascript初心者です。 jQueryを使ってみようとしています。 ページを開くと、リストが左にゆっくり動くようにしたいのです。 cssは ul { position: absolute; margin-top: 0; margin-left: 490px; padding-left: 15px; height: 40px; list-style-type: none; } でページを開くとmargin-leftを460pxにゆっくり動かしたいのです。 調べてみるとanimateが使えそうなので、 window.onload = function(){   $("#contents ul").animate("marginLeft","460px"); } にしてみましたが、動きません・・・。 教えていただけるとありがたいです。 お願いしますm(__)m

  • jQueryの導入方法について

    jQueryの導入が上手くいかず、全く動かなくて困っております。 サイト(http://labs.opentone.co.jp/?p=4923)から説明があったURLから実装に必要なjQueryをダウンロードしました。 ・jquery.flexslider.js ・flexslider.css そして下記コードを入力しました。 <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.flexslider.js"></script> さきほど取得した画像をスライドショーを表示させたい場所に下記の通り指定します。 画像名を「sampleX.png」としています。 <div class="flexslider"> <ul class="slides"> <li><img src="images/sample1.png"></li> <li><img src="images/sample2.png"></li> <li><img src="images/sample3.png"></li> <li><img src="images/sample4.png"></li> <li><img src="images/sample5.png"></li> </ul> </div> 最後にflexfliderの関数を呼び出してスライドショーを実行させます。 $("document").ready(function(){ $('.flexslider').flexslider(); }); 以上のことを行ってjQueryらしい動作どころか画像すら表示されませんでした。(画像パスは入力し直しています) 他にダウンロードするものやコードを書かなければならないことなど、動作に必要なものについて教えて頂けませんでしょうか。 ※上記以外のことは一切行っておりません 何卒よろしくお願い致します。

    • ベストアンサー
    • CSS
  • CSSの絶対配置と相対配置の違い

    おはようございます。 閲覧していただいてありがとうございます。 タイトル通りなのですが、CSSの絶対配置と相対配置の 違いについて教えて下さい。 本やサイトを色々探してみましたが どれも書き方が微妙に違っていて分かりません; 完全に自己流の書き方ですが、サンプルとして ====================== body{  margin:0px;  padding:0px; } #head{  margin:10px 0px 0px 0px;  padding:0px; } #content{  margin:10px 0px 0px 0px;  padding:0px; } ====================== 上記のような書き方をした場合、 これは絶対配置と相対配置のどちらに あたるのでしょうか? 勉強不足で恥かしいのですが ご教授いただけると幸いです。m(__)m

    • 締切済み
    • CSS
  • 複数jQueryの配置で干渉 設置位置

    Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 1サイト目(HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 2サイト目(HTML head内に配置) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の2サイトを合体させた:(HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 (HTML header内に配置) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> (HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか?

専門家に質問してみよう