質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1644閲覧

画面上でボタンをクリックするとそこの画面を切り替える方法

zyunnsalome

総合スコア26

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/10 06:30

スマホ用のhomesのサイトはSPAでできていてこの動きを作ってみたいなと思っています。

具体的には、クリックするとその場で画面が切り替わるみたいなことをやってみたいと思っています。
http://www.homes.co.jp/

おそらくjqueryを使っていると思うのですが、この画面切り替えというのはどういう調べ方をしたら参考サイトを見つけられるかが思いつかなくて困っております(アコーディオン的な名称が思いつかない。)

かなり基本的なことなのですが、もしお勧めのサイトがございましたらおしえていただけませんでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

こういう動きは「カルーセル」と言います!

投稿2016/06/10 11:14

hibikikudo

総合スコア238

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zyunnsalome

2016/06/10 13:45

ありがとうございます。これ作ってみたかったんです!
guest

0

ベストアンサー

基本的な原理は、jsFiddleでのサンプルこんな感じです。
クリックしたら最初の要素を最後に持っていくと言うわけです。

ここに動きを入れるとちょっと難しくなりますが、動作原理は同じなので後はアイデア次第です。

拡大・透過しながら消えるサンプル
これどうなんでしょうね、自分で作りながらもう少し上手く書けるんじゃなかろうかと思ったりなんちゃったり(笑)
実際は、cssとかを巧みに使って、徐々に拡大しながら正規のサイズに表示するアニメーションと、徐々に拡大しながら消えていくアニメーションを組み合わせると効果的です。

横スクロール、縦スクロールも同じようなことですけれども、スクロールさせる時には1つ目が左に行けば2つ目もそれに連なって動いてきますよね。これをするためにはどうすればよいかまでは書きませんが、色んなやり方があって、自分で考えたり、人が作ったものを見てみたりソースを読んでみたりするのもとても勉強になりますよ。

結局、やりたいことが明確になった時に、それをするにはどうすればよいかを考えるわけです。で、一旦作ってみる、なんかぎこちない、なぜだろう・・・と言う所から、試行錯誤をすることで腕が磨かれていくわけです。
誰かのソースを見た時に、なるほどそういうやり方をするのかというのがわかれば、それは自分の知識として吸収できます。

投稿2016/06/10 16:52

hidekichi

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zyunnsalome

2016/06/10 22:08

ご丁寧にありがとうございます。試行錯誤してみます。
guest

0

こんにちは

スマホサイト見たのですがその場で画面が切り替わるってのがどれをさしているのか。。。
「借りる」項目の上の部分を指しているのでしたら
スライダーのことですかね?
それだと
http://on-ze.com/archives/4996

この辺とかですかね

違ったらごめんなさい

投稿2016/06/10 10:34

kogure

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kogure

2016/06/10 11:29

へーそうなんですね! 「スライダーが1つ1つ画像(要素)を遷移するのに対し、まとまった画像で遷移するものをカルーセルとします。」メモ
zyunnsalome

2016/06/10 13:45

それのことです説明悪くてすみませんん。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問