プログラムの仕組みを教えて下さい
- プログラムの仕組みについて教えていただけませんか？
- 他のサイトでも同様の機能が見られることがあります。
- 具体的なプログラムの動作原理を教えていただけると助かります。
- ベストアンサー
プログラムの仕組みを教えて下さい。
まず下記のページを見ていただきたいのですが http://www.muji.net/store/campaign/detail/C11081901 このページの下部に、「手近なものでできる防災の知恵と技ワザ」というのがあります。 ここの画像の左右にある三角のアイコンを押すと画像が左右に移動して 別の画像が表示されるようになっています。 他のサイトですと、楽天市場のトップページ、中央の上部にあります、 キャンペーンのアイコンが並んでいるところも似たような挙動をします。 http://www.rakuten.co.jp/ 最近、このような仕組みのサイトを見かけるのですが 一体どのようにやっているのかわかりますでしょうか？ プログラムの知識が無いため、具体的にお応えいただけたら嬉しいです。 どうぞよろしくお願い致します。
- shimayu
- お礼率65% (58/89)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
コレはJavascriptという言語で書かれているプログラムですね。 その中でも、「jquery」といわれるライブラリを使用しています。
その他の回答 (1)
- dscripty
- ベストアンサー率51% (166/325)
ウェブブラウザは、 インターネットにおいてある HTML ファイルを読み込んで、その内容を表示しているのだけれど、 JavaScript は、 ウェブブラウザに読み込んだ HTML ファイルの内容を書き換えることができるんだ。 例えば、ボタンをクリックしたときとか、[Enter] キーを押したときとか、その動作に合わせて、JavaScript を実行させることができるよ。 下の HTML を sample.html と言う名前で保存してみて！ <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>JavaScript Sample</title> <script type="text/javascript"> var qno=6953301; var url_base="http://okwave.jp/qa/q"; var url_tail=".html"; window.onload = function(){ load_page(url_base+qno+url_tail); } function load_page(url) { var iframe = document.getElementById("iframe"); iframe.contentWindow.location.href=url; } </script> </head> <body> <div> <button onclick="qno--;load_page(url_base+qno+url_tail);"><</button> <button onclick="qno++;load_page(url_base+qno+url_tail);">></button> </div> <div> <iframe id="iframe" width="660" height="600" src="about:blank"></iframe> </div> </body> </html> 保存した sample.html を、ウェブブラウザで開くと、この質問のページが枠の中に表示されるとおもうけど、 枠の上にあるボタン([<]や[>])をクリックすると、違う質問のページが表示されるよ。 つまり、『ボタンをクリックする』という動作に合わせて JavaScript で内容を書き換えたということ。
関連するQ&A
- 【jQuery】画像タブ切り替えの上下配置について
はじめて質問させていただきます。 もしお分かりになる方がいらっしゃいましたら是非教えて頂けないでしょうか。 ただいま、下記のサイトを参考に 同じページ内で内容を切り替える「タブ（画像使用）」を使用したページを制作中です。 ＜参考ページ＞http://depthcode.com/2011/08/tab-img.html 通常、タブの配置は１か所にて使用するかとおもいますが ページの高さがあるため、切り替える部分の上部と下部に 同じ内容のタブスペースを設けたいと思うのですが 上部と下部のナビゲーションのステータスが同期せず詰まっている状態です。 タブの仕様は、 １～４までの番号画像（通常時とアクティブ時の２つの画像をそれぞれ用意）を配置し 本文１～４それぞれ該当した要素が表示されているときに タブ番号画像がアクティブ状態になるというものです。 このタブを、たとえば＜上部タブの１＞を押してアクティブにしたときには 連動して＜下部タブの１＞もアクティブになる、というものとしたいのですが 上記サイト参照した場合だと上部タブはアクティブになり下部タブは通常の状態となります。 （画像のようになるのが理想です。現状は、下部タブのピンク色の「１」がとなりの「２」と同じ状態となります。） ※画像タブのサンプルコードや解説サイトが意外に少なくて本当に手探り状態です。 あまりこういう使い方はされないものなのですかね… 解決方法などお分かりになる方がいらっしゃいましたら お教えいただけると幸いです。どうぞよろしくおねがいします。
- ベストアンサー
- JavaScript
- 別フレームへのリンク設置方法を教えてください
縦長のページの上部に<iframe>下部にも<iframe>で設定している サイトの上部<iframe>内の１テキストリンクをクリックすると、下部のフレーム内で展開される該当ページにリンクが飛び、上部の画面はそのままで、下部のフレーム内のページが変わる設定を調べておりますが、なかなか希望の情報にリーチできません。 普通にファイル名でリンクさせると、フレーム内のページが、フレームから飛び出して表示されます。（そりゃ当然ですよね）。何とか、 上部のフレーム内の各リンクをクリックすると、下部フレーム内のページが展開し、上部、下部同時に見れるページを制作したいのですが、どなたかご教授いただけますと、幸いです。宜しくお願いします。
- ベストアンサー
- HTML
- ＷＥＢサイトの背景について質問いたします。
ＷＥＢサイトの背景について質問いたします。 上部（ヘッダー）と下部（フッター）に それぞれ背景画像をいれることはできますか？ たとえば、上部には入道雲、下部には砂浜といった感じです。 背景画像はひとつしか入れることが出来ないのでしょうか？ ご回答よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- グラデーション背景色について
お世話になります。教えてください。 現在ホームページ作成中ですが、背景色に上部から下部へのグラデーションにしたいと思っています。画像編集ソフトで、上部（#0000FF)、下部(#FFFFFF)で作成し、いざページ作成をおこないました。ページの下部のCSS枠の背面色を#FFFFFFにして最下部は背景と境が分からない様になると思っていましたが、微妙に色合いが変わってきます。なぜなのでしょうか。 また、CSSにて背景グラデーションではIE以外では表示されないのでちょっと使えないです。 よろしくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- PHPで作成したサイトのSEOについて
ECサイトを運営しているのですがECキューブというオープンソースを使って ECサイトの中にLPサイト風のキャンペーンページを1ページ設けています。 このページのURLがcampaign.phpというURLなのですが、検索エンジンには .phpで作成したものはあまりよくないのでしょうか？
- 締切済み
- SEO
- '}'がありません と表示される
サイトを開くとタスクバー上の『e ページが表示されました』のところが IEアイコンではなく、黄色い三角の！マークアイコンで 『ページでエラーが発生しました』と出ます。 三角アイコンをダブルクリックしたら、『'}'がありません』と表示されます。 これはサイト側のエラーなのか、私のパソコン側なのかどっちなんでしょうか。 直す方法もわかれば教えていただきたいです。 よろしくお願いします。
- ベストアンサー
- Windows XP
- Lightbox v2.04を設置しました。
Lightbox v2.04を設置しました。 画像を拡大表示させたとき、IE6以降ではページ上部の中央に表示されるのですが、 firefoxではページ下部の中央に表示されてしまいます。 IEと同様にページ上部中央に表示する方法は教えてください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- サーチエンジンで…
自分のホームページを検索したところ、ちょっと的の外れたページしか見つけることが出来ませんでした。 きちんとサイトのトップページだけが検索結果に表示されるようにするにはどうすればよいのでしょうか？ トップページ(～/index.htm)の構成は、ページを上下に2分割してあって上部にメニュー(～/menutop.htm)が、下部にホーム(～/home.htm)が表示される仕組みになってます。 上部でいろいろなページへとリンクし、下部にそのコンテンツが表示されます。
- ベストアンサー
- その他（インターネット接続・通信）
- koboglo ホームアイコンが効かない
kobogloを買いました。 読書中に中央をタップすると左上部にホームアイコンが出てきますが、それをタップしてもホームに戻らず、読書中のページにもどったり、次のページに進んでしまいます。また右上部の設定同期アイコンについても同様に、元のページに戻ったり前のページにいってしまいます。 ５－６回に１回くらいしかヒットせずほとんど空振りです。 下部のメニューは空振りはそれほどありません。 上部メニューのみ空振りが多発します。 ペンなどでタップしても空振りはすこし改善されるだけでストレスがたまります。 ヘルプデスクに問い合わせても慣れるしかないという木で鼻をくくったような回答です。 どなたか同様な悩みを持ったかたはいらっしゃいませんか。
- 締切済み
- その他（パソコン）
- Word2007 ページ番号 総ページ数の挿入方法
Office2007を最近購入した60代後半の老爺です 使い勝手が2003と異なり四苦八苦しています。 Word2007でフッターにページ番号と総ページ数を挿入したい。 調べたところ [挿入］タブ －［ヘッダー・フッター］グループ －［ページ番号］ －の［ページの上部］［ページの下部］ 「X/Yページ」から適切なものを選択 となっているのですが ［ページの上部］［ページの下部］に「X/Yページ」が見つからないのです。 どのようにすれば、「X/Yページ」が表示されるのでしょうか 画像は3ページの文書です。
- ベストアンサー
- オフィス系ソフト
