• 締切済み

たすけて!jQueryがさっぱりわかりません!

Dreamweaverでサイトを制作しています。 jQueryは何をどこにダウンロードして何をどこにうちこめばいいのか? さっぱりわかりません…。 http://jquery.com/からなにかをダウンロードするということはわかるのですが…。いろいろありすぎて何をダウンロードすればいいのか…。 しかもダウンロードしたファイルはどこに保存してどうやってhtmlとむすびつけるのか。 タグはhtmlのどこに書けばいいのか、くわしく赤ちゃんに説明するつもりで教えていただけると助かります。 ちなみに(http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/)を使いたいのです。 サイトを見たのですがこのコードはどこにいれたらいいのかさっぱりわかりません。 head内なのかbodyなのかはたまた別でcssを作るのか? 【質問まとめ】 ・(http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/)のギャラリーをつかいたいが取り込み方がわからない。 ・上記URLからのダウンロード以外で(http://jquery.com/)からのダウンロードは必要なのか? ・ダウンロードしたものはファイルのどこにいれたらいいのか。 ・どうすれば現在つくっているhtmlにjsをむすびつけられるのか? ・head、bodyそれぞれになにをいれたらいいのか? ・ともかくなにをどこにいれたらいいのかさっぱりわかりません。 ・こういうものは$(function(){})どこにいれたらいいのか、これはなんなのか? 質問が多くてすみません。どうかよろしくお願いします。

みんなの回答

noname#186579
noname#186579
回答No.2

とりあえず、「jQueryを使えるようにする」ということを考えてください。 ギャラリーは、しばらく忘れてください。これはjQueryを拡張するプラグインのようなもので、jQueryがまともに使えることを前提にしています。jQueryがわからない人間がいきなり「使いたい」といっても、どうしようもありません。泳げなくて自転車に乗れない人が「トライアスロンをやりたい」といったら、「まず泳げるようになりましょう。自転車に乗れるようになりましょう」というしかありません。 ちなみに、jQueryを使うだけならライブラリをダウンロードしたりする必要はまったくありません。<head>タグの中に以下のタグを書くだけです。 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 後は、普通にJavaScriptのスクリプトの中でjQueryオブジェクトを使えばいいだけです。……JavaScriptはわかりますよね? それもわからないとすると、「jQueryなんかやる前に、まずJavaScriptを覚えてください」というしかないのですが……。

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

 Dreamweaverにしろ、何にしろWebオーサリングツールを使うためには、HTMLやCSSの知識が、テキストエディタで作成する人以上に必要ですよ。逆じゃないです。そこを誤解されていませんか?  ⇒Dreamweaverを使ったjQuery入門 前編 ~jQueryの概要とコーディングルール解説 (1/5):CodeZine( http://codezine.jp/article/detail/6548 )  などを読まれて、内容が理解できる人だからDreamweaverを使っているはずだと考えるのが普通ですよ。  jqueryも単なるjavascriptのライブラリですから、HTMLのhead内で読み込んでおけば、関数を呼び出してそれを利用します。  まず、HTMLやCSSをテキストエディタで自由自在に書ける能力、そしたらjavascriptを使う能力を身につける。それからDreamweaverを導入するという順番が良いでしょう。所詮Webオーサリングツールは、補助的なものですから。  私は、あの膨大なマニュアルやヘルプを読むのが億劫ですから・・。

関連するQ&A

  • jQuery LightBox Plugin動かず

    複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか? <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。

  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のHTMLソースに足らない部分がありますか? ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • jqueryが動作しない

    jqueryが動作しません。 私が行った手順を書きます。jqueryのサイトからdownloadをします。英文だったのでDreamweaverで開いて名前を付けて別名で保存しました。jquery-1.8.0.js拡張子で保存。 ソースコードをかいてみました。 <html> <head> <script src="jquery-1.8.1.min.js"></script> // urlを指定した場合です。 <script src="http]//jquery-1.8.1.min .js"></script> </head> <body> <h1>Jquery</h1> <script> $(function(){ $('h1').css('color'.'red'); }); </script> </body> </html> これを保存します。(拡張子は.navi.html) 実行しても動作しません。どうしてでしょうか?

  • jQueryについて教えてください

    現在ドットインストールでjQueryを勉強しています いきなりつまずいたといいますかエラー?があります 以下のコードなのですが文字色(<p>)が赤色になりません なぜでしょうか? このコードではjQueryはDLせずに読み込ませています DLしたほうがいいでしょうか? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <p>jQueryの練習</p> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function () { $('p').css('color', 'red'); }); </script> </body> </html>

  • 複数のjQueryを導入するには…?

    見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・? プログラムさっぱりでとても困っています。 解決策よろしくお願いします。

  • jquery uiが動かない

    jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>

  • jQuery を書くファイルはどれですか

    ほんっとうに基本的なことすぎて見つけられないのかもしれないのですが、 2日間ググってもわからないのでお助けください。 jQuery でアコーディオンメニューを作りたいと思っています。 だいたいのサイトをみると、サイトより jQueryをダウンロードしろと 書かれているのでuncompressedのものをダウンロードして、jQuery.jsと リネームしたのちに jsフォルダ内に格納しました。 あとは、html、CSS、jQuery の3つの記述が掲載されているのですが、 jQuery をどこに書くのかわかりません。 どういう名前のどの拡張子(js?)でhtmlファイルに読み込ませるのか、 それともhtmlファイルに書くのかすらわかりません。 なにとぞご教示お願いいたします。

  • jQuery 読み込み

    jQuery 読み込み ソースなのですが <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jqueryの練習</title> </head> <body> <p>jQueryの練習</p> <script src="http://code.jquery.com/jquery-1.10.1min.js"></script> <script> $(function(){ $('p').css('color','red').hide('slow'); }); </script> </body> </html> で9行目と11行目がエラーになります。 英語読めないのでエラーの内容はわかりませんが jQueryが読み込めてないのだと思っていて そこで質問なのですが 9行目で「http:~」と絶対パスで指定してるのにも関わらず jQueryを読み込めない理由って何かありますでしょうか? (全く的外れな事を言い出していたらごめんなさい。)

  • jQuery版のlightbox.jsのカスタマイズについて質問です。

    jQuery版のlightbox.jsのカスタマイズについて質問です。 やりたいことは下記の2点です。 1.「prev」や「next」をhover時ではなく絶えず出ているようにする。 2.任意でグルーピングをする。 使用したjQuery版lightbox.jsは下記のサイトからダウンロードしました。 jQuery lightBox plugin http://leandrovieira.com/projects/jquery/lightbox/ JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら 教えていただきたいです。 よろしくお願いいたします。

  • jquery.bgSwitcherが設置できない

    私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg {  width: 640px;  height: 415px;  margin: 0;  padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか? このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか? 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。

専門家に質問してみよう