Q&A
ブラウザのデベロッパーツールで確認はしてみましたか？
こちらのURLに載ってあります、タブ切り替えスライダー(下からスライドしている)がどうやって作られているのかを知りたく、質問をさせていただきました。
かれこれ1時間以上、1人で調べておりましたが、知識がなくぜひプロの皆様方からこのようなプラグインを使って作っているのだよと教えを頂ければ幸いでございます。
https://www.rakuten.ne.jp/gold/kutu-lead/
赤い丸がついているところにマウスを当てると、自動的に下からスライドしてくるようになっています。
このようなものを作ってみたいので、お時間を頂戴して申し訳ございませんが、何卒ご指導を頂ければと思います。
よろしくお願い致します。
デベロッパーはこのような形で見ておりました。
気づいた点は、お恥ずかしながらまだ一つも見つけていない状態です。
ご返答ありがとうございます。はい、かれこれ1時間以上はデベロッパーで確認しているのですが、下手くそなもので、どこに該当箇所があるのか分からずにおり、質問をさせていただきました。
どのように確認したのか画面キャプチャや何かしらわかったことも追記いただけますか？
ちなみに・・・「タブ切り替え」と「下からニュッと出てくるアニメーション」はもともとそれぞれ独立した動作であるというのはわかりますか？
初心者丸出しでお恥ずかしい限りで恐縮ですが、「タブ切り替え」と「下からアニメーション」は一体型ではなかったのですね。てっきりそういったプラグインがあるのかと思い、必死に探しておりました。
回答2件
0
ざっと見た感じですがやっていることは非常にシンプルだと思います。
- マウスhoverでタブの色を変更（CSS）
- hoverしたタブをactiveクラスを付与、ほかのタブからactiveクラスを外しdefaultクラスを付与（おそらくJavaScript）
- hoverしたタブに紐づくコンテンツをshow ほかのコンテンツをhide（おそらくJavaScript）
- コンテンツがスライドして開閉（おそらくJavaScript）
ちなみにこの「スライド」部分ですが、名称的には「アコーディオン」という仕組みを利用しているようです。
クラス名にも「r-tabs-accordion」というのが入っていますね。
アコーディオンは私の理解では「複数コンテンツを相互に開閉や折り畳みを行う仕組み」であると思っています。
つまり、タブ切り替えをhoverで行い、コンテンツの表示を単にhide,showではなくアコーディオンで行っている、ということになります。
それぞれ独立した仕組みと思われます（もちろんそういうプラグインも探せばあるかもしれませんが、個人が作られたものと思います）
あとはタブ切り替えを行う部分、コンテンツの表示をアコーディオンで行うようにすれば、おおよそ同等の仕組みは作れるように思います。
投稿2019/06/08 06:32
編集2019/06/08 06:35総合スコア80850
ご回答ほんとうにありがとうございました。
説明いただいたこともいまいちよく分からない私でしたので、どこかスクールを見つけて勉強しようと思いました。そのきっかけをくださった回答者様には感謝しております。ありがとうございました。
こんな丸投げのような質問に答えてくださって感謝しております！
いただきました説明は大事にコピーしておき、作りたい旨をスクールの方にお見せしようと思います。
何かのヒントになったようで何よりです。
スクールの件ですが、今回の対応をしたいがためだけにスクールで勉強するのは非常にもったいないと思います。
この手のプログラミングスクールはそのあたりの専門学校よりも高額だったりします。
もし「やりたいことが明確である」のでしたら独学で進めるか、入門書籍を買ったほうが幾らか有用かと思います。
私自身、プログラミングについてスクールに行くことなく独学でやってきていますし、その気になればずっとお金を払うことなく技術を磨くことは可能です。
※私の回答を「解決につながった」と感じられたのでしたらベストアンサーはうつしてもらったほうが後から見る人のためにもなると思います。
スクールを検索しておりましたが、目が飛び出すようなくらいの値段で驚いてしまいました。あんなに受講料がかかってしまうものなのですね・・・。あの、おこがましいのを失礼で承知いたしますが、ぜひ私におすすめの入門書を教えてはいただけないでしょうか？目標は今回載せたようなスライドコンテンツなどを自由自在に作れるようになることです。今までHTMLとCSSだけやってきていたのですが、どのように勉強すればあのデザインを作れるようになるでしょうか。すみません、見ず知らずの者にこんなことを言われてしまって。
それからこのサイトでは初めて投稿したばかりなのですが、ベストアンサーにするためにはどのような手順で行えばよろしかったでしょうか？いくつもの質問ご容赦ください。ご迷惑をかけして申し訳ございませんが、何卒よろしくお願い致します。
JavaScriptは必要ですし、HTML,CSSを扱うにしても「タグの役割を理解して適切に扱う」というのは大事と思います。
ご自身が何を目指すかにもよりますが「Webデザイナー」方面に寄るのでしたら、やはり、「サイトの模写」でしょうか。
「ソースを表示」や「デベロッパーツールでの確認」をせずに自身で想像しながら作り上げていくことですね。それだけでも経験値は一気に上がります。時間はかかりますが、無駄にはなりません。
書籍でいうと、私自身もHTML,CSSも書籍に頼ったことがないので具体的な書籍名はあげられないのですが、ネットで買うよりも本屋さんにいって、中身をざっと見てみて自身の目的や目標にあったものや網羅しているものを選ぶと良いのではないでしょうか。
WebデザインであればWebデザインに特化したものやDreamWeaverのようなツールを使うものもあると思います。
あとはHTMLやCSS、JavaScriptにはそれぞれ「リファレンス」というものがあります。
それらは使えるようになっておいたほうが良いと思います。
※MDNのような仕様書チックなものからクイックリファレンスのような機能確認に特化したものなど色々ありますが、私はどれもよく確認します。辞書替わりと思って使うと良いです
細かなアドバイスをしてくださり、ありがとうございました。実は私はHTMLコーダーの方を目指しておりまして、いろんなサイトを模作すればレベルが上がるのではと思い、思うまではよかったのですがすぐに壁にぶつかり質問に至りました。独学での勉強法はとても難しいですね。教えていただいた「リファレンス」というものも利用して、もっと勉強をがんばりたいと思います！ここまでお付き合いくださって、本当にありがとうございました。また質問するかもしれませんが、そのときもよろしくお願い致します！
何かのヒントになったようで何よりです。確かに模作はレベルアップには不可欠です。
ただそれはある程度地力があっての進められることでもあるので、今のうちは色々なデザインを見て、それがどのように実現されているのかを確認し、リファレンスやマニュアルで仕様を確認して、地力をつけていくと良いと思います。
あとは、どの言語でも言えることですが、一気にやろうとせずパーツを作っていくことですね。
ミニマムコードで部品を作って、それを配置していくようなやり方が良いです(大枠やフレーム部分はそれも部品です。)
あとこれは蛇足ですが…
HTMLコーダーのみでご飯を食べていくのはかなり厳しいとは思います。
WebデザイナーやWebディレクターの方面にいくか、PHPなどサーバーサイドの動的プログラミング言語を覚えてWebプログラマー、SE方面にいくか、選択を迫られることになりそうに思います。
そこは念頭に置いた方が良さそうです。幸いコーダーであってもJavaScriptは必要技術のはずなので、JavaScriptやってみてどう感じたか(楽しいか、辛いか)である程度判断はできると思います。
私も昔はHTMLコーダー、Webデザイナーを目指していた時代があり、
プログラミングなんてできるわけない、JavaScriptは探してコピペ
でしたが、PHPに出会ってから結局Webプログラマーの道を選ぶことになり、気づけばJavaやC#などでも業務に携わるようになりました。
向き不向きはあると思いますが、何かのキッカケで悟りがひらけるようなこともあると思いますので、
しっかり時間をかけて道を着実に進んでいってくださいね。
コメントややりとりをしている限りでは、キッカケさえ掴めれば道を拓いていけそうに感じたので質問には直接関係ないですが身の上話を書いてみました。
厳しい業界ではありますが頑張ってくださいね。
※30も半ばを過ぎると説教臭くなってしまうのです…
見逃してましたすみません
>ベストアンサーにするためにはどのような手順で行えばよろしかったでしょうか？
前提としてベストアンサーは解除ができます。
私自身、質問を投稿したことがないので具体的な手順は示せないのですが、何度かしてもらったことはあります。
「質問するときのヒント」でガイドラインを確認してもらいたいのですが、ベストアンサーは質問者が「役に立った」「解決の手助けになった」回答にひとつだけ付与することができます。
あと「同じような問題を抱えた他の人が見たときに参考にしてほしい」という意味で付与することもできますし、今回質問者さんがはじめにされたように「自己解決」で使うこともできます。
選ぶのは質問者さんなので基準は質問者さんが持っていて構いません。
(しばしば質問者観点と回答者観点で「役に立つ回答」は一致しない現象が起きます)
最終的にはお任せしますが、質問者さんも使い勝手がわからず、アドバイスがなかなか来ないために自己解決を選ばれたことからすると、私の回答で「役に立った」「前に進むヒントになった」と感じたのでしたら、ベストアンサーは移した方が良いかなとは思います。
0
自己解決
ご回答いただいた方も含めまして、大変申し訳ございませんでした。
無知だったとは言え、丸投げのような質問内容だったと思います。
何かスクールを見つけて入り、勉強しようと思いました。
ご迷惑をお掛けして申し訳ございませんでした。
ご回答いただいた方もありがとうございます。
投稿2019/06/08 06:32
総合スコア13
回答、したのですが・・・。
丸投げの低評価がついたわけでもないですし、私は質問者さんがどこまで把握できてるのかを把握したうえで回答したかったので質問に追記以来をしただけです。
回答はしていますので、気が向いたら確認してみてくださいね。
すみません！回答した時に回答をくださったみたいで、重なってしまったようでした。本当に申し訳ございません。内容はきっちり拝見させていただきましたので(コピーもさせていただきました)、早く作れるように勉強したいと思います。こんな私に付き合ってくださって、ありがとうございました！また、不慣れで不快な思いをさせてしまったこと、心よりお詫び申し上げます。申し訳ございませんでした。
いえ、特に不快とかにはなっていません。
回答者である程度経験してきているとはいえ、実務でやっていても自身で作ったものであっても人に説明するのって
それなりに検証が必要だったり場合により最小構成で書き直したり、色々と時間も手間も必要だったりします。構文ミスなどのちょっとした内容ならともかく、今回のように他人が作った他人のサイトや仕組みなので、
質問者さんも1時間かかって中々糸口が見つからなかったと仰っていますが、熟練者が見ると一瞬でわかるということでもないです。推測はしますが、実際のつくりを見ていくのは必ず必要ですし、それを回答として起こす時間も必要だったりします。
今回は自身が確認したデベロッパーツールの箇所を画面キャプチャつけようか迷ったのですが、いかんせんノートPCであるためあまり効率が出せそうになかったので文章での解説にとどめました。
不快になっていなくて本当によかったです。ありがとうございます。
熟練者にもなると、見ただけでパッと分かってしまうものかと思い込んでいたのですが、実際はやはり中身から調べていく作業になるのですね。なるほど…。
またこれだけ漠然とした質問にもなると回答の時間もかかりますよね。以後、気を付けて質問させていただきますね。ご親切にご指摘してくださって、身になりました。
とても素晴らしい人柄の方にアドバイスを頂けてとても嬉しく思っております。
これから頑張っていきますので、またスレを見かけたら相手してやってください。
ありがとうございました！
あなたの回答
tips
プレビュー
