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

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

ただいまの
回答率

90.10%

タブ切り替えスライダー?の作り方を教えてください。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 186

jadorehana

score 7

こちらのURLに載ってあります、タブ切り替えスライダー(下からスライドしている)がどうやって作られているのかを知りたく、質問をさせていただきました。
かれこれ1時間以上、1人で調べておりましたが、知識がなくぜひプロの皆様方からこのようなプラグインを使って作っているのだよと教えを頂ければ幸いでございます。

https://www.rakuten.ne.jp/gold/kutu-lead/

イメージ説明

赤い丸がついているところにマウスを当てると、自動的に下からスライドしてくるようになっています。

このようなものを作ってみたいので、お時間を頂戴して申し訳ございませんが、何卒ご指導を頂ければと思います。

よろしくお願い致します。

イメージ説明

デベロッパーはこのような形で見ておりました。
気づいた点は、お恥ずかしながらまだ一つも見つけていない状態です。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/06/08 14:52

    どのように確認したのか画面キャプチャや何かしらわかったことも追記いただけますか?

    キャンセル

  • m.ts10806

    2019/06/08 14:54

    ちなみに・・・「タブ切り替え」と「下からニュッと出てくるアニメーション」はもともとそれぞれ独立した動作であるというのはわかりますか?

    キャンセル

  • jadorehana

    2019/06/08 15:00

    初心者丸出しでお恥ずかしい限りで恐縮ですが、「タブ切り替え」と「下からアニメーション」は一体型ではなかったのですね。てっきりそういったプラグインがあるのかと思い、必死に探しておりました。

    キャンセル

回答 2

+2

ざっと見た感じですがやっていることは非常にシンプルだと思います。

  1. マウスhoverでタブの色を変更(CSS)
  2. hoverしたタブをactiveクラスを付与、ほかのタブからactiveクラスを外しdefaultクラスを付与(おそらくJavaScript)
  3. hoverしたタブに紐づくコンテンツをshow ほかのコンテンツをhide(おそらくJavaScript)
  4. コンテンツがスライドして開閉(おそらくJavaScript)

ちなみにこの「スライド」部分ですが、名称的には「アコーディオン」という仕組みを利用しているようです。
クラス名にも「r-tabs-accordion」というのが入っていますね。
アコーディオンは私の理解では「複数コンテンツを相互に開閉や折り畳みを行う仕組み」であると思っています。

つまり、タブ切り替えをhoverで行い、コンテンツの表示を単にhide,showではなくアコーディオンで行っている、ということになります。

それぞれ独立した仕組みと思われます(もちろんそういうプラグインも探せばあるかもしれませんが、個人が作られたものと思います)

あとはタブ切り替えを行う部分、コンテンツの表示をアコーディオンで行うようにすれば、おおよそ同等の仕組みは作れるように思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/08 16:56

    細かなアドバイスをしてくださり、ありがとうございました。実は私はHTMLコーダーの方を目指しておりまして、いろんなサイトを模作すればレベルが上がるのではと思い、思うまではよかったのですがすぐに壁にぶつかり質問に至りました。独学での勉強法はとても難しいですね。教えていただいた「リファレンス」というものも利用して、もっと勉強をがんばりたいと思います!ここまでお付き合いくださって、本当にありがとうございました。また質問するかもしれませんが、そのときもよろしくお願い致します!

    キャンセル

  • 2019/06/08 17:29

    何かのヒントになったようで何よりです。確かに模作はレベルアップには不可欠です。
    ただそれはある程度地力があっての進められることでもあるので、今のうちは色々なデザインを見て、それがどのように実現されているのかを確認し、リファレンスやマニュアルで仕様を確認して、地力をつけていくと良いと思います。
    あとは、どの言語でも言えることですが、一気にやろうとせずパーツを作っていくことですね。
    ミニマムコードで部品を作って、それを配置していくようなやり方が良いです(大枠やフレーム部分はそれも部品です。)

    あとこれは蛇足ですが…
    HTMLコーダーのみでご飯を食べていくのはかなり厳しいとは思います。
    WebデザイナーやWebディレクターの方面にいくか、PHPなどサーバーサイドの動的プログラミング言語を覚えてWebプログラマー、SE方面にいくか、選択を迫られることになりそうに思います。
    そこは念頭に置いた方が良さそうです。幸いコーダーであってもJavaScriptは必要技術のはずなので、JavaScriptやってみてどう感じたか(楽しいか、辛いか)である程度判断はできると思います。
    私も昔はHTMLコーダー、Webデザイナーを目指していた時代があり、
    プログラミングなんてできるわけない、JavaScriptは探してコピペ
    でしたが、PHPに出会ってから結局Webプログラマーの道を選ぶことになり、気づけばJavaやC#などでも業務に携わるようになりました。
    向き不向きはあると思いますが、何かのキッカケで悟りがひらけるようなこともあると思いますので、
    しっかり時間をかけて道を着実に進んでいってくださいね。

    コメントややりとりをしている限りでは、キッカケさえ掴めれば道を拓いていけそうに感じたので質問には直接関係ないですが身の上話を書いてみました。
    厳しい業界ではありますが頑張ってくださいね。

    ※30も半ばを過ぎると説教臭くなってしまうのです…

    キャンセル

  • 2019/06/08 17:36

    見逃してましたすみません

    >ベストアンサーにするためにはどのような手順で行えばよろしかったでしょうか?

    前提としてベストアンサーは解除ができます。
    私自身、質問を投稿したことがないので具体的な手順は示せないのですが、何度かしてもらったことはあります。
    「質問するときのヒント」でガイドラインを確認してもらいたいのですが、ベストアンサーは質問者が「役に立った」「解決の手助けになった」回答にひとつだけ付与することができます。
    あと「同じような問題を抱えた他の人が見たときに参考にしてほしい」という意味で付与することもできますし、今回質問者さんがはじめにされたように「自己解決」で使うこともできます。
    選ぶのは質問者さんなので基準は質問者さんが持っていて構いません。
    (しばしば質問者観点と回答者観点で「役に立つ回答」は一致しない現象が起きます)

    最終的にはお任せしますが、質問者さんも使い勝手がわからず、アドバイスがなかなか来ないために自己解決を選ばれたことからすると、私の回答で「役に立った」「前に進むヒントになった」と感じたのでしたら、ベストアンサーは移した方が良いかなとは思います。

    キャンセル

check解決した方法

0

ご回答いただいた方も含めまして、大変申し訳ございませんでした。
無知だったとは言え、丸投げのような質問内容だったと思います。
何かスクールを見つけて入り、勉強しようと思いました。
ご迷惑をお掛けして申し訳ございませんでした。
ご回答いただいた方もありがとうございます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/08 15:34

    回答、したのですが・・・。
    丸投げの低評価がついたわけでもないですし、私は質問者さんがどこまで把握できてるのかを把握したうえで回答したかったので質問に追記以来をしただけです。
    回答はしていますので、気が向いたら確認してみてくださいね。

    キャンセル

  • 2019/06/08 15:41

    すみません!回答した時に回答をくださったみたいで、重なってしまったようでした。本当に申し訳ございません。内容はきっちり拝見させていただきましたので(コピーもさせていただきました)、早く作れるように勉強したいと思います。こんな私に付き合ってくださって、ありがとうございました!また、不慣れで不快な思いをさせてしまったこと、心よりお詫び申し上げます。申し訳ございませんでした。

    キャンセル

  • 2019/06/08 16:22

    いえ、特に不快とかにはなっていません。
    回答者である程度経験してきているとはいえ、実務でやっていても自身で作ったものであっても人に説明するのって
    それなりに検証が必要だったり場合により最小構成で書き直したり、色々と時間も手間も必要だったりします。構文ミスなどのちょっとした内容ならともかく、今回のように他人が作った他人のサイトや仕組みなので、
    質問者さんも1時間かかって中々糸口が見つからなかったと仰っていますが、熟練者が見ると一瞬でわかるということでもないです。推測はしますが、実際のつくりを見ていくのは必ず必要ですし、それを回答として起こす時間も必要だったりします。
    今回は自身が確認したデベロッパーツールの箇所を画面キャプチャつけようか迷ったのですが、いかんせんノートPCであるためあまり効率が出せそうになかったので文章での解説にとどめました。

    キャンセル

  • 2019/06/08 17:02

    不快になっていなくて本当によかったです。ありがとうございます。
    熟練者にもなると、見ただけでパッと分かってしまうものかと思い込んでいたのですが、実際はやはり中身から調べていく作業になるのですね。なるほど…。
    またこれだけ漠然とした質問にもなると回答の時間もかかりますよね。以後、気を付けて質問させていただきますね。ご親切にご指摘してくださって、身になりました。
    とても素晴らしい人柄の方にアドバイスを頂けてとても嬉しく思っております。
    これから頑張っていきますので、またスレを見かけたら相手してやってください。
    ありがとうございました!

    キャンセル

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

  • ただいまの回答率 90.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる